Config tooltip on event and on editor event

6 posts, 0 answers
  1. salvador
    salvador avatar
    17 posts
    Member since:
    Oct 2013

    Posted 06 Nov 2013 Link to this post

    Hello everyone,

        I would like to know how to config tooltip message when mouse is over an event in day, week and month views.

       Also how I could show tooltip message in editor event template when validating dates like in demo.

        Currently on my scheduler I can see tooltip but without message, only it shows exclamation icon. Additionally as I show a dropdownlist with resources the tooltip is displayed below this dropdownlist and I can't see the tooltip.

    Thank you very much
    Regards
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 08 Nov 2013 Link to this post

    Hi Salvador,

     
    Please check the example tooltip which will render additional information when hover given event in the scheduler:

    • tooltip configuration:  
      $(function () {
          $("#scheduler").kendoTooltip({
              filter: ".k-event",
              position: "top",
              width: 250,
              content: kendo.template($('#template').html())
          });
      });
    • tooltip template: 
      <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>

    Also as the second question is not related to the original topic of this support conversation - could you please submit a new support ticket / forum post for it with more information about the exact setup that you have (current code of the scheduler). In this way you can be sure that your query will reach the corresponding staff member in time and will be answered faster and accurately.

    Kind Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. salvador
    salvador avatar
    17 posts
    Member since:
    Oct 2013

    Posted 08 Nov 2013 Link to this post

    Thank you Vladimir,

        I have proved adding $("#scheduler").kendoTooltip, but now It is showed default tooltip and custom tooltip. I have attached an image.

        Really I only needs to modify the time format at the default tooltip to "HH:mm" format.

        Is there a simple way to edit this format?

    Thanks a lot
    Regards
  4. salvador
    salvador avatar
    17 posts
    Member since:
    Oct 2013

    Posted 11 Nov 2013 Link to this post

    Hi,

        Is it possible to add different tooltip templates for each view?

    Thank you
    Regards
  5. salvador
    salvador avatar
    17 posts
    Member since:
    Oct 2013

    Posted 11 Nov 2013 Link to this post

    Hi,

        I have looked into HTML elements and I have found that default tooltip are in title attribute.

        As I'm using a month eventTemplate I have added a title attribute to my custom <div> element. This solution works successfully when exists only an event in the day.

        But when there are some events in the day I would like to show a title which contains concatenated all the titles for each event.

        Is it possible?

    <script id="event-month-template" type="text/x-kendo-template">
        #var stringTitle = "(" + kendo.toString(start,'HH:mm') + " - " + kendo.toString(end,'HH:mm') + "): " + title;#
        <div id="divMonthTemplate" title="#=stringTitle#">
            #if (resources[1]) {#
                <span class="k-scheduler-mark" style="background-color:#=resources[1].color#"></span>           
                <label style="text-align: center; display: block">#=resources[1].text#</label>
            #}#
        </div>
    </script>
    Thank you in advance
    Regards

  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 12 Nov 2013 Link to this post

    Hi Salvador,

     
    Please note that the concatenation of the titles of all events for given day is not supported out of the box and you should implement it using custom solution. 

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top