Scheduler scrollto method

[RR]

hi,

is there a way to scroll to a specific time slot or event in vue schedular ?

[Dimitar]

Hi Roshan,

To achieve the desired result, a custom function could be wired to scroll to a specific time slot as follows:

<button v-on:click="scrollToHour(10)">Scroll to 10 AM</button>

methods: {
  scrollToHour: function(hour) {
    var time = new Date();
    time.setHours(hour);
    time.setMinutes(0);
    time.setSeconds(0);
    time.setMilliseconds(0);

    var scheduler = this.$refs.sched.kendoWidget();;
    var contentDiv = scheduler.element.find("div.k-scheduler-content");
    var rows = contentDiv.find("tr");

    for (var i = 0; i < rows.length; i++) {
    var element = $(rows[i]);
    var slot = scheduler.slotByElement(element);

    var slotTime = kendo.toString(slot.startDate, "HH:mm");
    var targetTime = kendo.toString(time, "HH:mm");

    if (targetTime === slotTime) {
      contentDiv.scrollTop(0);

      var elementTop = element.offset().top;
      var containerTop = contentDiv.offset().top;

      contentDiv.scrollTop( elementTop - containerTop );
    }
  };
}
}

Here is a StackBlitz example that demonstrates the above approach.

I hope this helps.

Regards,
Dimitar
Progress Telerik