javascriptkendo-uikendo-schedulerkendo-tooltip

Show tooltip only on Month view and hide on Day view


I am using Kendo UI Scheduler.

On mouse over of each event, I am showing tooltip with details of that particular event. Till here, everything is fine.

But, I do not want to show the OnMouseOver tooltip for Day view. I want to show the tooltip for only Month view.

How can I show tooltip only on Month view and disable on Day view?

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>

Solution

  • Here's working dojo example.

    I added show and hide to configuration. In show you just decide if you want or not your tooltip to popup. If you want, then just make it visible.

    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");
    },
    

    As well, set tooltip to be invisible by default, because you have your logic in show defined.

    .k-tooltip.k-popup{
        visibility: hidden;
    }