diff --git a/knowledge-base/scheduler-scroll-to-timeline-slot.md b/knowledge-base/scheduler-scroll-to-timeline-slot.md new file mode 100644 index 000000000..972d967be --- /dev/null +++ b/knowledge-base/scheduler-scroll-to-timeline-slot.md @@ -0,0 +1,123 @@ +--- +title: Scroll to a Slot in the Scheduler Timeline View +description: Learn how to scroll to a specific slot in the Timeline View of the Telerik Scheduler for Blazor. +type: how-to +page_title: How to Scroll to a Slot in the Scheduler Timeline View +slug: scheduler-kb-scroll-to-timeline-slot +tags: blazor, scheduler, timeline +ticketid: 1680788 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductScheduler for Blazor
+ +## Description + +This KB article answers the following questions: + +* How to focus and highlight the current time slot on load? +* How to auto scroll horizontally the Scheduler Timeline to the current time slot? +* How to style the current time slot in the Scheduler Timeline? + +## Solution + +1. Set the [Scheduler `View` parameter](slug:scheduler-views-overview) with two-way binding or with a [`ViewChanged` handler](slug:scheduler-events#viewchanged). Thus the app will know which is the current view. +1. Define the [Scheduler `OnCellRender` event](slug:scheduler-events#oncellrender). Set a custom CSS class with `args.Class` if `args.Start` matches the current or desired time. +1. Use the custom CSS class to apply custom styles. +1. Use [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) and the custom CSS class to find the slot element in the HTML DOM. +1. Use [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) to scroll to the slot. + +>caption Scrolling to a styled Scheduler Timeline slot + +````RAZOR +@inject IJSRuntime js + + + + + + + + + + +@* Move JavaScript to separate JS file *@ + + + + +@code { + private List SchedulerData { get; set; } = new(); + private DateTime SchedulerDate { get; set; } = DateTime.Today; + + private SchedulerView SchedulerView { get; set; } = SchedulerView.Timeline; + + private bool ShouldScrollTimeline { get; set; } + + private void OnSchedulerCellRender(SchedulerCellRenderEventArgs args) + { + if (SchedulerView == SchedulerView.Timeline && args.Start.Hour == DateTime.Now.Hour) + { + args.Class = "current-slot"; + ShouldScrollTimeline = true; + } + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender || ShouldScrollTimeline) + { + await Task.Delay(1); // Wait for HTML to render + ShouldScrollTimeline = false; + + await js.InvokeVoidAsync("scrollToSlot"); + } + + await base.OnAfterRenderAsync(firstRender); + } + + public class Appointment + { + public Guid Id { get; set; } + public string Title { get; set; } = string.Empty; + public DateTime Start { get; set; } + public DateTime End { get; set; } + public bool IsAllDay { get; set; } + public string Description { get; set; } = string.Empty; + + public Appointment() + { + Id = Guid.NewGuid(); + } + } +} +```` + +## See Also + +* [Scheduler Events](slug:scheduler-events)