# Blue CSS Theme (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo

> Note: You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)

## Links

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

## Source

### Inline demo script 1

```javascript
var dp = new DayPilot.Calendar("dp");

        // behavior and appearance
        dp.theme = "calendar_blue";

        // view
        dp.startDate = DayPilot.Date.today();
        dp.viewType = "Week";

        // event creating
        dp.onTimeRangeSelected = function (args) {
            var name = prompt("New event name:", "Event");
            if (!name) return;
            var e = new DayPilot.Event({
                start: args.start,
                end: args.end,
                id: DayPilot.guid(),
                text: name
            });
            dp.events.add(e);
            dp.clearSelection();
        };

        dp.onEventClick = function (args) {
            alert("clicked: " + args.e.id());
        };

        dp.onBeforeEventRender = args => {
            args.data.areas = [
                {
                    right: 4,
                    top: 6,
                    width: 24,
                    height: 24,
                    padding: 2,
                    symbol: "../icons/daypilot.svg#padlock"
                }
            ]
        };


        dp.init();

        const startDate = DayPilot.Date.today().firstDayOfWeek();
        const events = [
            {
                start: startDate.addDays(1).addHours(12),
                end: startDate.addDays(1).addHours(15),
                id: 1,
                text: "Event 1"
            },
            {
                start: startDate.addDays(2).addHours(11),
                end: startDate.addDays(2).addHours(16),
                id: 2,
                text: "Event 2"
            },
            {
                start: startDate.addDays(3).addHours(9).addMinutes(30),
                end: startDate.addDays(3).addHours(12),
                id: 3,
                text: "Event 3"
            },
            {
                start: startDate.addDays(3).addHours(13),
                end: startDate.addDays(3).addHours(15).addMinutes(30),
                id: 4,
                text: "Event 4"
            },
            {
                start: startDate.addDays(3).addHours(14),
                end: startDate.addDays(3).addHours(16).addMinutes(30),
                id: 5,
                text: "Event 5"
            },
        ];
        dp.update({events});
```