# Scheduler and AngularJS | DayPilot Pro for JavaScript Demo

> Read more about the [AngularJS Scheduler](https://doc.daypilot.org/scheduler/angularjs/).

## Links

- Canonical HTML: /demo/scheduler/angularjs.html
- Source HTML folder: /demo/scheduler/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function ($scope) {

            $scope.config = {
                scale: "Day",
                days: 365,
                bubble: new DayPilot.Bubble(),
                startDate: "2026-09-01",
                onEventMoved: function (args) {
                    $scope.dp.message("Event moved: " + args.e.text());
                },
                eventClickHandling: "Select",
                onEventSelected: function (args) {
                    $scope.$apply(function () {
                        $scope.selectedEvents = $scope.dp.multiselect.events();
                    });
                },
                timeHeaders: [
                    {groupBy: "Month"},
                    {groupBy: "Cell", format: "d"}
                ],
                resources: [
                    {name: "Room A", id: "A"},
                    {name: "Room B", id: "B"},
                    {name: "Room C", id: "C"},
                    {name: "Room D", id: "D"},
                    {name: "Room E", id: "E"}
                ]
            };

            $scope.events = [
                {
                    start: new DayPilot.Date("2026-09-05T00:00:00"),
                    end: new DayPilot.Date("2026-09-06T00:00:00"),
                    id: DayPilot.guid(),
                    resource: "B",
                    text: "One-Day Event",
                    bubbleHtml: "Details"
                },
                {
                    start: new DayPilot.Date("2026-09-05T00:00:00"),
                    end: new DayPilot.Date("2026-09-06T00:00:00"),
                    id: DayPilot.guid(),
                    resource: "A",
                    text: "One-Day Event",
                    bubbleHtml: "Details"
                },

            ];

            $scope.add = function () {
                $scope.events.push(
                    {
                        start: new DayPilot.Date("2026-09-05T00:00:00"),
                        end: new DayPilot.Date("2026-09-06T00:00:00"),
                        id: DayPilot.guid(),
                        resource: "B",
                        text: "One-Day Event",
                        bubbleHtml: "Details"
                    }
                );
            };

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

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

            $scope.scrollTo = function (date) {
                $scope.dp.scrollTo(date);
            };

            $scope.scale = function (val) {
                $scope.config.scale = val;
            };


        });
```