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.
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