@inject IJSRuntime js

<TelerikScheduler Data="@SchedulerData"
                  @bind-Date="@SelectedDate"
                  Height="600px">
    <SchedulerViews>
        <SchedulerMultiDayView StartTime="@StartTime" />
    </SchedulerViews>
    <ItemTemplate>
        <div onclick="getOccurrenceDateTime(event)" style="height:100%">
            @{ var appointment = (Appointment)context; }
            @appointment.Title (CLICK ME)
        </div>
    </ItemTemplate>
</TelerikScheduler>

@* Move JavaScript code to a separate JS file *@
<script suppress-error="BL9992">
    function getOccurrenceDateTime(e) {
        alert(e.target.closest("div.k-event").getAttribute("aria-label"));
    }
</script>

@code {
    private AppointmentService appointmentService = new();

    private DateTime SelectedDate { get; set; } = DateTime.Now.Date;
    private DateTime StartTime { get; set; } = DateTime.Now.Date.AddHours(7);

    private List<Appointment> SchedulerData = new List<Appointment>();

    protected override async Task OnInitializedAsync()
    {
        SchedulerData = await appointmentService.GetAppointmentsAsync();
    }

    public class AppointmentService
    {
        public async Task<List<Appointment>> GetAppointmentsAsync()
        {
            await Task.Delay(1);

            return GetAppointments();
        }

        public List<Appointment> GetAppointments()
        {
            List<Appointment> data = new List<Appointment>();
            DateTime baselineTime = GetStartTime();

            data.Add(new Appointment
            {
                Title = "Daily Meeting",
                Description = "Daily Meeting",
                Start = baselineTime.AddHours(1),
                End = baselineTime.AddHours(1).AddMinutes(30),
                RecurrenceRule = "FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR"
            });

            return data;
        }

        public DateTime GetStartTime()
        {
            DateTime dt = DateTime.Now;
            int daysSinceMonday = dt.DayOfWeek - DayOfWeek.Monday;

            return new DateTime(dt.Year, dt.Month, dt.Day - daysSinceMonday, 8, 0, 0);
        }
    }

    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 string RecurrenceRule { get; set; } = string.Empty;

        public Appointment()
        {
            var rand = new Random();
            Id = Guid.NewGuid();
        }
    }
}