1

我正在使用 Kendo UI 调度程序。

在每个事件的鼠标悬停时，我都会显示带有该特定事件详细信息的工具提示。到这里为止，一切都很好。

但是，我不想显示日视图的OnMouseOver工具提示。我只想显示Month view的工具提示。

如何仅在月视图上显示工具提示并在日视图上禁用？

演示

var _data = new kendo.data.SchedulerDataSource({
        data: [    {
          eventID: 8,
          title: "Group meeting.",
          start: new Date(),
          end: new Date(),
          pending:false,
          recurrenceRule: "",
          recurrenceException: "",
          description: "Take my brother to his group meeting.",
          isAllDay:false,
          ownTimeSlot:true,
          careAssistantId: 5,
          clientId: 6
        },{
          eventID: 9,
          title: "Make dinner.",
          start: new Date("2013/06/13 11:00"),
          end: new Date("2013/06/13 13:30"),
          pending:true,
          recurrenceRule: "",
          recurrenceException: "",
          description: "Make dinner for my mom.",
          isAllDay:false,
          ownTimeSlot:true,
          careAssistantId: 5,
          clientId: 6
        } ],
        schema: {
            model : {
                id : "eventID"
            }
        }
    });

    function save(){
        console.log(_data);    
    }

    $('#scheduler').kendoScheduler({
        date: new Date(),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
        views: [
            { type: "day", title: "Day" },
            { type: "month", selected: true },
        ],
        save: save,
        dataSource:_data
    });

    $(function () {
        $("#scheduler").kendoTooltip({
            filter: ".k-event",
            position: "top",
            width: 250,
            content: kendo.template($('#template').html())
        });
    });



  <script id="template" type="text/x-kendo-template">
    #var uid = target.attr("data-uid");#
    #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
    #var model = scheduler.occurrenceByUid(uid);#

    #if(model) {#
        <strong>event start:</strong> #=kendo.format('{0:d}',model.start)#<br />
        <strong>event end:</strong> #=kendo.format('{0:d}',model.end)#<br />
        <strong>event description:</strong> #=model.description#<br />
    #} else {#
        <strong>No event data is available</strong>
    #}#
</script>
4

1 回答 1

1

这是有效的道场示例。

我添加了show和hide配置。show您只需决定是否要弹出工具提示。如果你愿意，那就让它可见。

show: function(e){
    var scheduler = $('#scheduler').data('kendoScheduler');
    if(scheduler.viewName() === 'day'){
        this.content.parent().css("visibility", "visible");
    }
},
hide:function(e){
    this.content.parent().css("visibility", "hidden");
},

同样，默认情况下将工具提示设置为不可见，因为您已经show定义了逻辑。

.k-tooltip.k-popup{
    visibility: hidden;
}
于 2017-05-26T20:57:52.393 回答