DayPilot Lite for JavaScript 1.3 SP4

Release date: August 24, 2016 (build 1.3.215)

html5 monthly event calendar customization

Event customization for monthly event calendar

DayPilot.Month control supports event customization using onBeforeEventRender event handler.

Documentation

Demo

Example:

<div id="dp"></div>

<script type="text/javascript">
    var dp = new DayPilot.Month("dp");

    // ...
    
    dp.events.list = [
        {
            "start": "2013-03-03T00:00:00",
            "end": "2013-03-03T12:00:00",
            "id": "5a8376d2-8e3d-9739-d5d9-c1fba6ec02f9",
            "text": "Event 3"
        },
        {
            "start": "2013-02-25T00:00:00",
            "end": "2013-02-27T12:00:00",
            "id": "1fa34626-113a-ccb7-6a38-308e6cbe571e",
            "text": "Event 4",
            "tags": {
                "type": "important"
            }
        },
        // ...
    ];

    dp.onBeforeEventRender = function(args) {
        var type = args.data.tags && args.data.tags.type;
        switch (type) {
            case "important":
                args.data.fontColor = "#fff";
                args.data.backColor = "#E06666";
                args.data.borderColor = "#E06666";
                break;
            // ...
        }
    };

    dp.init();

</script>