Agent-readable demo data

Title
Task Creating (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
You can create a new task using the last row. Read more about task creating.

Inline demo script 1

const gantt = new DayPilot.Gantt("dp", {
            startDate: DayPilot.Date.today(),
            days: 10,
            heightSpec: "Auto",
            rowCreateHandling: "Enabled",
            rowCreateAllowTimeRangeSelection: true,
            columns: [
                { title: "Name", width: 50, property: "text" },
                { title: "Info", width: 50, property: "info" },
                { title: "Duration", width: 50 }
            ],
            onBeforeRowHeaderRender: (args) => {
                const duration = args.task.duration();
                const html = duration.toString("d") + "d " + duration.toString("h") + "h";
                args.row.columns[2].html = html;
            },
            onRowCreate: (args) => {
                gantt.tasks.add({
                    id: DayPilot.guid(),
                    text: args.text,
                    start: new DayPilot.Date().getDatePart(),
                    end: new DayPilot.Date().getDatePart().addDays(1)
                });
            },
            onTimeRangeSelected: async (args) => {
                const form = [{ name: "Task name", id: "name" }];
                const modal = await DayPilot.Modal.form(form);
                gantt.clearSelection();
                if (modal.canceled) return;
                gantt.tasks.add({
                    id: DayPilot.guid(),
                    text: modal.result.name,
                    start: args.start,
                    end: args.end
                });
            }
        });

        gantt.init();

        const app = {
            loadData() {
                const tasks = [];
                const links = [];

                let start = DayPilot.Date.today();
                let last = null;

                for (let i = 0; i < 2; i++) {
                    const duration = Math.floor(Math.random() * 3) + 1; // 1 to 3
                    const end = start.addDays(duration);

                    const task = {
                        start: start,
                        end: end,
                        id: DayPilot.guid(),
                        text: "Task " + i,
                        tags: { info: "info text" },
                        children: [
                            {
                                start: start,
                                end: end,
                                id: DayPilot.guid(),
                                text: "Subtask 1",
                                complete: Math.floor(Math.random() * 101) // 0 to 100
                            },
                            {
                                start: start,
                                end: end,
                                id: DayPilot.guid(),
                                text: "Subtask 2",
                                complete: Math.floor(Math.random() * 101) // 0 to 100
                            },
                            {
                                start: end,
                                id: DayPilot.guid(),
                                text: "Milestone 1",
                                type: "Milestone"
                            }
                        ]
                    };

                    tasks.push(task);

                    if (last) {
                        links.push({
                            id: DayPilot.guid(), // optional
                            from: last,
                            to: task.id,
                            type: "FinishToStart"
                        });
                    }

                    last = task.id;
                    start = end;
                }

                gantt.update({
                    tasks,
                    links
                });
            },

            init() {
                this.loadData();
            }
        };

        app.init();