# Year View (JavaScript Event Calendar) | DayPilot Pro for JavaScript Demo

> The Calendar component can display a [year view](https://doc.daypilot.org/calendar/year/) where each column represents a month and each cell represents a day.

## Links

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

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Calendar("dp", {
            viewType: "Resources",
            headerHeight: 50,
            days: 31,
            scale: "Day",
            showCurrentTime: false,
            startDate: DayPilot.Date.today(),
            durationBarVisible: false,
            eventBorderRadius: 6,
            columnMarginLeft: 45,
            onBeforeEventRender: args => {
                const color = args.data.color ?? "#2e78d6";
                args.data.backColor = color + "ee";
                args.data.borderColor = "darker";
                args.data.fontColor = "#ffffff";
            },
            onBeforeTimeHeaderRender: args => {
                const day = args.header.date.toString("d");
                args.header.html = day;
            },
            onBeforeCellRender: args => {
                const belongsToCurrentMonth = args.cell.y + 1 === args.cell.start.getDay();

                if (belongsToCurrentMonth) {
                    args.cell.properties.areas = [
                        { top: 0, left: 2, bottom: 0, width: 40, fontColor: "#999999", text: args.cell.start.toString("d ddd"), verticalAlignment: "center" }
                    ];
                }

                if (!belongsToCurrentMonth) {
                    args.cell.properties.backColor = "#dddddd";
                }

            },
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                dp.message("Created");
            },
        });

        dp.init();


        const app = {
            init() {
                this.loadColumns();
                this.loadEventData();
            },
            get start() {
                return DayPilot.Date.today().firstDayOfYear();
            },
            loadColumns() {
                const columns = [];
                const startDate = this.start;
                // one column per month
                for (let i = 0; i < 12; i++) {
                    const start = startDate.addMonths(i);
                    const end = start.addMonths(1);
                    const name = start.toString("MMMM");
                    columns.push({name, start, end});
                }
                dp.update({startDate, columns});
            },
            loadEventData() {
                const events = [
                    {
                        id: DayPilot.guid(),
                        start: this.start.addDays(2),
                        end: this.start.addDays(6),
                        text: "Event #1",
                        color: "#674ea7"
                    },
                    {
                        id: DayPilot.guid(),
                        start: this.start.addDays(10),
                        end: this.start.addDays(16),
                        text: "Event #2",
                        color: "#a64d79"
                    },
                    {
                        id: DayPilot.guid(),
                        start: this.start.addMonths(1).addDays(4),
                        end: this.start.addMonths(1).addDays(10),
                        text: "Event #3",
                        color: "#3c78d8"
                    },
                    {
                        id: DayPilot.guid(),
                        start: this.start.addMonths(1).addDays(13),
                        end: this.start.addMonths(1).addDays(18),
                        text: "Event #4",
                        color: "#6aa84f"
                    },
                    {
                        id: DayPilot.guid(),
                        start: this.start.addMonths(2).addDays(2),
                        end: this.start.addMonths(2).addDays(5),
                        text: "Event #5",
                        color: "#3c78d8"
                    },
                ];
                dp.update({events});
            }
        };
        app.init();
```