This is a migrated thread and some comments may be shown as answers.

Customize Tooltip

1 Answer 70 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Anup
Top achievements
Rank 1
Anup asked on 10 Aug 2012, 11:09 AM
I want to set own value on tooltip of calendar dates, diff value on diff dates tooltip any suggestion.

1 Answer, 1 is accepted

Sort by
0
John DeVight
Top achievements
Rank 1
answered on 10 Aug 2012, 02:30 PM
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
Tags
Calendar
Asked by
Anup
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Share this question
or