KendoUI setting background for specific dates


In Kendo UI demos it is explained how to format a specific date by adding an icon but many times you just need to change the background.

Kendo UI calendar with formatted dates

First of all lets define the structure used for choosing which dates to format and how:

var tasks = [];
tasks[+new Date(2012, 8 - 2, 22)] = "ob-done-date";
tasks[+new Date(2012, 8 - 2, 27)] = "ob-done-date";
tasks[+new Date(2012, 8 - 1, 3)] = "ob-done-date";
tasks[+new Date(2012, 8 - 1, 5)] = "ob-not-done-date";
tasks[+new Date(2012, 8, 8)] = "ob-done-date";
tasks[+new Date(2012, 8, 12)] = "ob-done-date";
tasks[+new Date(2012, 8, 24)] = "ob-not-done-date";
tasks[+new Date(2012, 8 + 1, 6)] = "ob-done-date";
tasks[+new Date(2012, 8 + 1, 7)] = "ob-not-done-date";
tasks[+new Date(2012, 8 + 1, 25)] = "ob-done-date";
tasks[+new Date(2012, 8 + 1, 27)] = "ob-not-done-date";

What I did is defining a vector tasks and for each (desired) date I define a mark that will help me deciding its formatting.
Now I create a Kendo UI Calendar as:

$("#calendar").kendoCalendar({
    value:today,
    dates:tasks
}).data("kendoCalendar");

And a style definition:

.ob-done-date {
    background-color: #85d633;
    background-image: url(../styles/textures/highlight.png);
}
.ob-not-done-date {
    background-color: #EBB500;
    background-image: url(../styles/textures/highlight.png);
}

Next is defining the logic for deciding the formatting…

if (typeof data.dates[+data.date] === "string") {
    // insert the HTML: <div class="data.dates[+data.date]">
    // insert the date: data.value
    // insert the HTML: </div>
} else {
    // insert the date: data.value
}

And this logic as a template gets transformed into:

$("#calendar").kendoCalendar({
    value:today,
    dates:tasks,
    month:{
        content:'# if (typeof data.dates[+data.date] === "string") { #' +
                '<div class="#= data.dates[+data.date] #">' +
                '#= data.value #' +
                '</div>' +
                '# } else { #' +
                '#= data.value #' +
                '# } #'
    }
}).data("kendoCalendar");

Producing…

Kendo UI Calendar with wrong formatting
Kendo UI Calendar with wrong formatting

Where you can see it is almost what I wanted to do but formatting is not correct. The reason is that I’ve applied the formatting to the wrong HTML node. I should have applied the formatting to the parent of the DIVnode that I have defined in the template.

Fixing formatting

1. Rename CSS style

Lets append -style suffix to each of the marks used in tasks array.

.ob-done-date-style {
    background-color: #85d633;
    background-image: url(../styles/textures/highlight.png);
}
.ob-not-done-date-style {
    background-color: #EBB500;
    background-image: url(../styles/textures/highlight.png);
}

2. Bind a function to navigate for applying the style to the parent node

$("#calendar").kendoCalendar({
    value:today,
    dates:tasks,
    month:{
        content:'# if (typeof data.dates[+data.date] === "string") { #' +
                '<div class="#= data.dates[+data.date] #">' +
                '#= data.value #' +
                '</div>' +
                '# } else { #' +
                '#= data.value #' +
                '# } #'
    },
    navigate:function () {
        $(".ob-done-date", "#calendar").parent().addClass("ob-done-date-style k-state-hover");
        $(".ob-not-done-date", "#calendar").parent().addClass("ob-not-done-date-style k-state-hover");
    }
}).data("kendoCalendar");

And I finally get what I was looking for:

Kendo UI calendar with colored dates
Kendo UI calendar with colored dates
Advertisements

10 thoughts on “KendoUI setting background for specific dates

  1. Hi I have just noticed that the calendar is one month out in your example, the screen shot is showing ‘september’ but the date ranges from the tasks for the 8th 12th & 24th are all for August. Did you resolve this problem as I am also having the same problem.

    regards

    Tom

  2. i m also want same calender… but not static dates, but i want server dates from sqlserver. how to retrive dates from json & pass in calender… can u please give me answer as soon as.

    • There is no such option for changing the “dates” in runtime. What you might do is requesting the data using Ajax and then bind the result data to the Calendar. Another possibility is destroying and recreating the calendar each time that the data in the server changes but this requires you to request the data from the server and then (and only then) create the Calendar.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s