Add Custom Data To Kendo UI Calendar For Tooltip

Cef Published at Dev

Cef

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.

Cef

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

Collected from the Internet

Please contact [email protected] to delete if infringement.