Edit this page

Scroll to and Select Scheduler Events

Environment

Product Progress Kendo UI Scheduler

Description

How can I vertically and horizontally scroll and focus an event that is placed on the Timeline view of the Scheduler?

Solution

  1. Find the <div> which renders the event.
  2. Calculate its position according to the Scheduler content element.
  3. Scroll the Scheduler view to that position.

You can also select the desired event by using the select method.

<div id="example" class="k-content">
  <input type="button" value="Click to select the Event with ID 3" id="btn" class="k-button"/>
  <div id="scheduler"></div>
</div>

<script>
  $(function () {
    $('#btn').on('click', function() {
      var id = 3;
      var scheduler = $("#scheduler").getKendoScheduler();
      var event = scheduler.dataSource.get(id);
      var isTimelineView = scheduler.view().name.indexOf("timeline") > -1;

      // No event with ID 3 is present
      if (!event) {
        return;
      }

      var contentDiv = scheduler.element.find("div.k-scheduler-content");
      var contentDivPosition = contentDiv.position();
      var eventUID = event.uid;
      var eventDiv = $(".k-event[data-uid=" + eventUID  + "]");
      var eventDivOffset = eventDiv.offset();

      if (isTimelineView) {
        // Scroll to the div with given data-uid attribute            
        contentDiv.scrollLeft(eventDivOffset.left + contentDiv.scrollLeft() - contentDivPosition.left);
        contentDiv.scrollTop(eventDivOffset.top + contentDiv.scrollTop() - contentDivPosition.top);

        // Select the Event in question
        scheduler.select([event.uid]);
      }
    });

    $("#scheduler").kendoScheduler({
      height: 300,
      selectable: true,
      date: new Date("2013/6/13"),
      startTime: new Date("2013/6/13 07:00 AM"),
      eventHeight: 50,
      majorTick: 60,
      views: [ "timelineWeek" ],
      timezone: "Etc/UTC",
      dataSource: {
        batch: true,
        transport: {
          read: {
            url: "https://demos.telerik.com/kendo-ui/service/meetings",
            dataType: "jsonp"
          }
        },
        schema: {
          model: {
            id: "meetingID",
            fields: {
              meetingID: { from: "MeetingID", 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" },
              roomId: { from: "RoomID", nullable: true },
              attendees: { from: "Attendees", nullable: true },
              isAllDay: { type: "boolean", from: "IsAllDay" }
            }
          }
        }
      },
      group: {
        resources: ["Rooms"],
        orientation: "vertical"
      },
      resources: [
        {
          field: "roomId",
          name: "Rooms",
          dataSource: [
            { text: "Meeting Room 203", value: 3, color: "#f58a8a" },
            { text: "Meeting Room 204", value: 4, color: "#f58a8a" },
            { text: "Meeting Room 205", value: 5, color: "#f58a8a" },
            { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
            { text: "Meeting Room 201", value: 2, color: "#f58a8a" },
            { text: "Meeting Room 206", value: 6, color: "#f58a8a" },
            { text: "Meeting Room 207", value: 7, color: "#f58a8a" }
          ],
          title: "Room"
        }
      ]
    });
  });
</script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy