Agent-readable demo data

Title
Exact Event Duration (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Lite
Description
By default, event boxes are aligned to the Calendar grid. You can change this behavior by setting the useEventBoxes property to "Never". Read more about the exact event duration.

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            viewType: "Week",
            startDate: "2022-03-21",
            headerDateFormat: "dddd",
            useEventBoxes: "Never",
            snapToGrid: false,
            onEventClick: async args => {

                const colors = [
                    {name: "Blue", id: "#3c78d8"},
                    {name: "Green", id: "#6aa84f"},
                    {name: "Yellow", id: "#f1c232"},
                    {name: "Red", id: "#cc0000"},
                ];

                const form = [
                    {name: "Text", id: "text"},
                    {name: "Start", id: "start", type: "datetime"},
                    {name: "End", id: "end", type: "datetime"},
                    {name: "Color", id: "barColor", type: "select", options: colors},
                ];

                const modal = await DayPilot.Modal.form(form, args.e.data);

                if (modal.canceled) {
                    return;
                }

                dp.events.update(modal.result);

            },
            onBeforeEventRender: args => {
                if (!args.data.barColor) {
                    args.data.barColor = "#333";
                }
            },
            onTimeRangeSelected: async args => {

                const form = [
                    {name: "Name", id: "text"}
                ];

                const data = {
                    text: "Event"
                };

                const modal = await DayPilot.Modal.form(form, data);

                dp.clearSelection();

                if (modal.canceled) {
                    return;
                }

                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    text: modal.result.text,
                    barColor: "#3c78d8"
                });
            },
            onEventMove: args => {
                console.log(args.newStart);
            }
        });

        dp.init();

        const app = {
            init() {
                this.addEventHandlers();
                this.loadEvents();
            },
            loadEvents() {
                const events = [
                    {
                        start: "2022-03-21T11:15:00",
                        end: "2022-03-21T14:15:00",
                        id: 1,
                        text: "Event 1",
                        barColor: "#3c78d8",
                        barBackColor: "#7aa5ed"
                    },
                    {
                        start: "2022-03-22T12:05:00",
                        end: "2022-03-22T15:05:00",
                        id: 2,
                        text: "Event 2",
                        barColor: "#6aa84f",
                        barBackColor: "#a8d8a0"
                    },
                    {
                        start: "2022-03-23T10:20:00",
                        end: "2022-03-23T15:10:00",
                        id: 3,
                        text: "Event 3",
                        barColor: "#f1c232",
                        barBackColor: "#f1e0a4"
                    },
                    {
                        start: "2022-03-24T12:25:00",
                        end: "2022-03-24T16:05:00",
                        id: 4,
                        text: "Event 4",
                        barColor: "#cc0000",
                        barBackColor: "#f1a7a7"
                    },
                ];
                dp.update({events});
            },
            addEventHandlers() {
                document.getElementById("useBoxes").addEventListener("change", (e) => {
                    dp.update({useEventBoxes: e.target.value});
                });
            }
        };
        app.init();