Customize Tooltip

[Anup]

I want to set own value on tooltip of calendar dates, diff value on diff dates tooltip any suggestion.

[John DeVight]

Hi Anup,

To do this, you would need to override the Calendar.fn._templates function after referencing the kendo ui library, but prior to creating an instance of a Calendar.  Then when you initialize an instance of a Calendar, you can pass in a template to set the title (tooltip).

Here is the code to override the Calendar.fn._templates function:

window.kendo.ui.Calendar.fn._templates = function () { 

    var a = this, 

        b = a.options, 

        d = b.footer, 

        e = b.month, 

        f = e.content, 

        g = e.empty,

        h = e.title;

    a.month = {

        content: kendo.template("<td#=data.cssClass#><a class=\"k-link#=data.linkClass#\" href=\"#=data.url#\" " + kendo.attr("value") + "=\"#=data.dateString#\" title=\"" + (h || "#=data.title#") + "\">" + (f || "#=data.value#") + "</a></td>", 

            {useWithBlock: !!f}), 

            empty: kendo.template("<td>" + (g || " ") + "</td>", {useWithBlock: !!g})

        };

      

    if (d !== false) {

        a.footer = kendo.template(d || "#= kendo.toString(data,\"D\",\"" + b.culture + "\") #", {useWithBlock: false})

    };

};

Now when you initialize the Calendar, you can pass in a template for the title like this:

var calendar = $("#calendar").kendoCalendar({

    month: {

        title: "#=formatTitle(data)#"

    }

}).data("kendoCalendar");

In the title template, I am calling a function where logic can be applied to formatting the template.  Here is the format title function:

function formatTitle(data) {

    return "Custom " + data.title;

}

Hopefully this helps.

Attached is a working example.

Regards,

John DeVight