Customize Tooltip

2 posts, 0 answers
  1. Anup
    Anup avatar
    6 posts
    Member since:
    Jul 2012

    Posted 10 Aug 2012 Link to this post

    I want to set own value on tooltip of calendar dates, diff value on diff dates tooltip any suggestion.
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 10 Aug 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
Back to Top