Scroll to a Slot in the Scheduler Timeline View

Environment

Product

Scheduler 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 with two-way binding or with a ViewChanged handler. Thus the app will know which is the current view.
2. Define the Scheduler OnCellRender event. Set a custom CSS class with args.Class if args.Start matches the current or desired time.
3. Use the custom CSS class to apply custom styles.
4. Use querySelectorAll() and the custom CSS class to find the slot element in the HTML DOM.
5. Use scrollIntoView() to scroll to the slot.

Scrolling to a styled Scheduler Timeline slot

@inject IJSRuntime js

<TelerikScheduler Data="@SchedulerData"
                  @bind-Date="@SchedulerDate"
                  @bind-View="@SchedulerView"
                  OnCellRender="@OnSchedulerCellRender"
                  Width="80vw"
                  Height="80vh">
    <SchedulerViews>
        <SchedulerDayView />
        <SchedulerWeekView />
        <SchedulerMonthView />
        <SchedulerTimelineView />
    </SchedulerViews>
</TelerikScheduler>

@* Move JavaScript to separate JS file *@
<script suppress-error="BL9992">
    function scrollToSlot() {
        var slotsAfterCurrent = document.querySelectorAll(".current-slot + .k-slot-cell");
        if (slotsAfterCurrent.length > 0) {
            slotsAfterCurrent[slotsAfterCurrent.length - 1].scrollIntoView({ behavior: "smooth" });
        }
    }
</script>

<style>
    .current-slot {
        background-color: var(--kendo-color-primary-subtle);
    }
</style>

@code {
    private List<Appointment> 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