【问题标题】:Show tooltip only on Month view and hide on Day view仅在月视图上显示工具提示并在日视图上隐藏
【发布时间】:2017-10-26 22:20:50
【问题描述】:

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

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

但是,我不想为 Day 视图显示 OnMouseOver 工具提示。我想显示仅月视图的工具提示。

如何仅在视图中显示工具提示并在视图中禁用?

Demo

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>

【问题讨论】:

    标签: javascript kendo-ui kendo-scheduler kendo-tooltip


    【解决方案1】:

    这是dojo 的工作示例。

    我在配置中添加了showhide。在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;
    }
    

    【讨论】:

    • @Mantas Čekanauskas,感谢您的回答...但我仍然遇到问题,因为 scheduler.viewName 不是函数 这可能因为我使用的是旧版本(2014.3.1119)... dojo.telerik.com/EgOFa 请查看更新后的演示网址...
    • @Reddy 你可以用scheduler._selectedViewName 代替scheduler.viewName()
    • @Mantas Čekanauskas,就像一个魅力......我接受支持你的回答......非常感谢您的帮助
    • 很高兴为您提供帮助 ;)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-06-30
    • 2017-11-30
    • 2012-08-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多