将自定义数据添加到 Kendo UI 工具提示日历
Add Custom Data To Kendo UI Calendar For 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");
我想做的是每天添加一些将出现在工具提示中的自定义文本。我想每天更新标题,但这似乎不起作用,至少我尝试这样做的方式是这样。
有什么想法吗?提前致谢。
这是 Telerik 的回复:
$(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");
});
这是 Dojo 示例
我有以下日历和工具提示:
$("#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");
我想做的是每天添加一些将出现在工具提示中的自定义文本。我想每天更新标题,但这似乎不起作用,至少我尝试这样做的方式是这样。
有什么想法吗?提前致谢。
这是 Telerik 的回复:
$(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");
});
这是 Dojo 示例