Yearly Calendar

Demo

• Yearly Calendar Demo

Configuration

You can create the yearly calendar view using the following config:

const dp = new DayPilot.Calendar("dp", {
    viewType: "Resources",
    days: 31,
    scale: "Day",
    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";
        }

    },
    // ...
});

dp.init();

The columns with month can to be defined using the columns.list property (columns alias when using the update() method):

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});
}