Agent-readable demo data

Title

AngularJS Event Calendar (Controller As) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Read more about the AngularJS event calendar plugin.

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

Inline demo script 1

var app = angular.module('main', ['daypilot']).controller('CalendarCtrl', function () {

            this.config = {
                startDate: "2026-09-01",
                viewType: "Week"
            };

            this.events = [
                {
                    start: new DayPilot.Date("2026-09-01T10:00:00"),
                    end: new DayPilot.Date("2026-09-01T14:00:00"),
                    id: DayPilot.guid(),
                    text: "First Event"
                }
            ];

            this.add = function () {
                this.events.push(
                    {
                        start: new DayPilot.Date("2026-09-01T10:00:00"),
                        end: new DayPilot.Date("2026-09-01T12:00:00"),
                        id: DayPilot.guid(),
                        text: "Simple Event"
                    }
                );
            };

            this.move = function () {
                var event = this.events[0];
                event.start = event.start.addDays(1);
                event.end = event.end.addDays(1);
            };

            this.rename = function () {
                this.events[0].text = "New name";
            };

            this.message = function () {
                this.calendar.message("Hi");
            };

            this.day = function () {
                this.config.viewType = "Day";
            };

            this.week = function () {
                this.config.viewType = "Week";
                this.calendar.update();
            };

        });