New to Kendo UI for jQuery? Download free 30-day trial

Show a Tooltip with Additional Information over Scheduler Events

Environment

Product Progress® Kendo UI® Scheduler for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I use the Kendo UI for jQuery Tooltip to show additional information over Kendo UI Scheduler events?

Solution

The following example demonstrates how to achieve the desired scenario.

<div id="scheduler"></div>
<script>
  $(function() {
    $("#scheduler").kendoScheduler({
      date: new Date("2022/6/13"),
      startTime: new Date("2022/6/13 07:00 AM"),
      height: 600,
      views: [
        "day",
        { type: "workWeek", selected: true },
        "week",
        "month",
        "agenda",
        { type: "timeline", eventHeight: 50}
      ],
      timezone: "Etc/UTC",
      dataSource: {
        batch: true,
        transport: {
          read: {
            url: "//demos.telerik.com/kendo-ui/service/tasks",
            dataType: "jsonp"
          },
          update: {
            url: "//demos.telerik.com/kendo-ui/service/tasks/update",
            dataType: "jsonp"
          },
          create: {
            url: "//demos.telerik.com/kendo-ui/service/tasks/create",
            dataType: "jsonp"
          },
          destroy: {
            url: "//demos.telerik.com/kendo-ui/service/tasks/destroy",
            dataType: "jsonp"
          },
          parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
              return {models: kendo.stringify(options.models)};
            }
          }
        },
        schema: {
          model: {
            id: "taskId",
            fields: {
              taskId: { from: "TaskID", type: "number" },
              title: { from: "Title", defaultValue: "No title", validation: { required: true } },
              start: { type: "date", from: "Start" },
              end: { type: "date", from: "End" },
              startTimezone: { from: "StartTimezone" },
              endTimezone: { from: "EndTimezone" },
              description: { from: "Description" },
              recurrenceId: { from: "RecurrenceID" },
              recurrenceRule: { from: "RecurrenceRule" },
              recurrenceException: { from: "RecurrenceException" },
              ownerId: { from: "OwnerID", defaultValue: 1 },
              isAllDay: { type: "boolean", from: "IsAllDay" }
            }
          }
        }
      },
      resources: [
        {
          field: "ownerId",
          title: "Owner",
          dataSource: [
            { text: "Alex", value: 1, color: "#f8a398" },
            { text: "Bob", value: 2, color: "#51a0ed" },
            { text: "Charlie", value: 3, color: "#56ca85" }
          ]
        }
      ]
    });

    $("#scheduler").kendoTooltip({
      filter: ".k-event:not(.k-event-drag-hint) > div, .k-task",
      position: "top",
      width: 250,
      content: kendo.template($('#template').html())
    });
  });
</script>
<script id="template" type="text/x-kendo-template">
  #var element = target.is(".k-task") ? target : target.parent();#
  #var uid = element.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>

See Also

In this article