Agent-readable demo data

Title

Text in Cells (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

Note: This demo uses the onBeforeCellRender event to add "Unavailable" text to the selected day and add a custom CSS class to the cells. Read more about Calendar cell customization.

• Canonical HTML: /demo/lite/calendar/textincells.html
• Markdown companion: /demo/lite/calendar/textincells.md
• Folder: /demo/lite/calendar/
• Root: /demo/lite/
• Catalog: /demo/lite/llms.txt

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            viewType: "Week",
            startDate: DayPilot.Date.today(),
            // headerDateFormat: "dddd",
            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"
                });
            },
            onBeforeCellRender: args => {
                // mark the selected day as unavailable, add a custom CSS class
                if (args.cell.start.getDatePart() === DayPilot.Date.today()) {
                    args.cell.properties.cssClass = "unavailable";
                    args.cell.properties.html = "Unavailable";
                }
            }
        });
        dp.init();

        const app = {
            init() {
                this.loadEvents();
            },
            loadEvents() {
                const events = [
                ];
                dp.update({events});
            }
        };
        app.init();