This is a migrated thread and some comments may be shown as answers.

Scheduler scrollto method

1 Answer 9 Views
This is a migrated thread and some comments may be shown as answers.
RR
Top achievements
Rank 1
RR asked on 25 Sep 2019, 11:55 AM

hi,

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 27 Sep 2019, 08:14 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
RR
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or