kendo-uicalendartelerikkendo-tooltip

Add Custom Data To Kendo UI Calendar For Tooltip


I have the following calendar and tooltip:

$("#achCalendar").kendoCalendar({
    dates: events,
    navigate: MonthNavigate,
    change: DateChange,
    value: cur,
    month: {
        // template for dates in month view
        content: "# if ($.inArray(data.date.formatMMDDYYYY(), events) != -1) { data.title('check check'); #" +
                        "<div class='" +
                    "# if (data.date < currentDate) { #" +
                        "past" +
                    "# } else if (data.date.formatMMDDYYYY() == currentDate.formatMMDDYYYY()) { #" +
                        "current" +
                    "# } else { #" +
                        "future" +
                    "# } #" +
                "'>#= data.value #</div>" +
            "# } else { #" +
            "#= data.value #" +
            "# } #"
    },
    footer: "Today - #=kendo.toString(data, 'd') #"
});

var tooltip = $("#achCalendar").kendoTooltip({
    filter: "td .k-link",
    width: 120,
    position: "top",
    content:  function(e) {
        var target = e.target; // the element for which the tooltip is shown
        return target.data("title"); // set the element text as content of the tooltip
    }
}).data("kendoTooltip");

What I would like to do is for each day add some custom text that will appear in the tooltip. I was thinking to update the title for each day but that does not seem to be working, at least the way I am attempting to do it.

Any ideas? Thanks in advance.


Solution

  • Here is what Telerik responded with:

    $(document).ready(function() {
    
          $("#achCalendar").kendoCalendar({
            dates: events,         
            month: {
              // template for dates in month view
              content: "# if ($.inArray(+data.date, events) != -1) { #" +
              "<div data-tooltip='#=kendo.toString(data.date, \"d\")#' class='" +
                "# if (data.date < currentDate) { #" +
                "past" +
                "# } else if (data.date == currentDate) { #" +
                "current" +
                "# } else { #" +
                "future" +
                "# } #" +
                "'>#= data.value #</div>" +
                "# } else { #" +
                // wrap the text in a div in order to add the data-tooltip
                "<div data-tooltip='#=kendo.toString(data.date, \"d\")#'>#= data.value #</div>" +
                "# } #"
            },
            footer: "Today - #=kendo.toString(data, 'd') #"
          });
    
          $("#achCalendar").find(".k-state-selected").removeClass("k-state-selected");
    
          var tooltip = $("#achCalendar").kendoTooltip({
            filter: "td .k-link>div", // target the inner element to which the data-tooltip is added
            width: 120,
            position: "top",
            content:  function(e) {
              var target = e.target;                            
              return target.data("tooltip"); 
            }
          }).data("kendoTooltip");
        });
    

    And here is the Dojo example

    http://dojo.telerik.com/@rkonstantinov/iwuNU