# Open-Source AngularJS Event Calendar | DayPilot Lite for JavaScript Demo

> Note: Read more about the [AngularJS event calendar](https://doc.daypilot.org/calendar/angularjs/) plugin.

## Links

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

## Source

### Inline demo script 1

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

            $scope.config = {
                startDate: "2021-09-01",
                viewType: "Week"
            };

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

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

            $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";
            };

        });
```