Card Creating

The Kanban card can be creating using the client-side API:

• DayPilot.Kanban.cards.add()

JavaScript

This example creates a button in the first Kanban column cell using active areas.

<style>
    .add-button {
        cursor: pointer;
        border: 1px solid #ccc;
        background-color: #eee;
        color: #666;
        text-align: center;
        line-height: 30px;
    }
    .add-button:hover {
        background-color: #ddd;
    }
</style>

<div id="dp"></div>

<script type="text/javascript">

    var dp = new DayPilot.Kanban("dp");
    dp.columns.list = [
        {name: "Analysis", id: "1", barColor: "#f9ba25"},
        {name: "Draft", id: "2"},
        {name: "Testing", id: "3"}
    ];
    dp.cards.list = [
        {id: 1, "name": "Task 1", column: "1", text: "This is a description of task #1."},
        {id: 2, "name": "Task 2", column: "1", text: "This is a description of task #2.", barColor: "#ea3624"},
    ];

    dp.cellMarginBottom = 40;

    dp.onBeforeCellRender = function(args) {
        if (args.cell.column.data.id === "1") {
            args.cell.areas =[ {right: 5, bottom: 5, width: 100, height: 30, html: "Add", cssClass: "add-button", action: "JavaScript", js: function(args) { console.log(args); add();}} ]
        }
    };

    dp.init();

    function add() {
        var name = prompt("New card name:", "Task");
        if (!name) {
            return;
        }
        dp.cards.add({id: DayPilot.guid(), name: name, column: "1"});
    }


</script>