Currently, when using an ItemTemplate, I cannot get the details for the current occurrence from the template context as it cannot be differentiated from the series.

===

TELERIK EDIT:

In the meantime, it is possible to get the occurrence details with JavaScript. The occurrence start and end DateTime are rendered as an aria-label HTML attribute of the <div class="k-event"> element.

@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();
        }
    }
}

Hello,

I would like the Scheduler day view to scroll automatically to a defined hour, for example the start of the work day.

Is this available for blazor? if not could it be added somehow temporarily until support for it is added?

https://demos.telerik.com/aspnet-mvc/scheduler/yearview

When using Vertical Grouping by multiple resources and Timeline View, the group rows without appointments do not have min-height as the rest of the group rows. Thus, they appear shorter which causes an offset of the events on the next rows.

Steps to reproduce:

1. Load Timeline View Demo
2. Delete Charlie's event in Small meeting room

===

ADMIN EDIT

===

A possible workaround for the time being is to set min-height to all rows. Apply this style only when Timeline view is selected, so this does not break the rendering of the other views.

Example: https://blazorrepl.telerik.com/mHYmwsOt30fjTZ6a32.

I want to easily print the Scheduler calendar - month view, week view and more.

===

ADMIN EDIT

===

A possible approach for the time being is to implement printing functionality for the Scheduler in a similar fashion to how the Grid is printed here https://github.com/telerik/blazor-ui/tree/master/grid/print.

The approach relies on using JavaScript to invoke the browser print() method. Using CSS and @media print, you can customize the page and specify which elements should be visible when printing. For example, you may hide the toolbar and footer of the component, so only the calendar is visible.

Here is a runnable sample that demonstrates the approach: https://blazorrepl.telerik.com/cnutklOC55T5sV0J15.

If the Start and End match exactly, the rendering of the Scheduler breaks in Day view. If another view is used, the event looks as if it is rendered on the previous day.

===

ADMIN EDIT

===

A possible workaround for the time being is to use a custom edit form and implement some kind of validation that prevents the user from selecting the same value for the Start and End of an event.

When you have an event that starts between 11:30pm and 12:00am - the default last slot of the Timeline view, the Scheduler throws the following error:

Error: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection

Hi there

The scheduler is an amazing component for Blazor, however with our designs we'd need to hijack one of the existing views and make a custom page from that which we don't really want to do if we can get this feature.

Custom Views would work just like any other view, but expose a <ViewTemplate> tag that would allow us to create our own custom view that can leverage on the power of the scheduler without doing anything hacky to achieve the same effect.

For instance a code example can be like:

<SchedulerViews>
    <SchedulerMonthView />
    <SchedulerDayView StartTime="@CurrentDate"></SchedulerDayView>
    <SchedulerCustomView>
        <ViewTemplate Context="view">
            <h1>This is a custom view for the @view.month</h1>
            <TelerikCalendar Date="@item.date" />
        </ViewTemplate>
    </SchedulerCustomView>
</SchedulerViews>

I have located an issue with the scheduler in Firefox

It currently is not possible to edit an appointment in Firefox when visiting the following demo page:

https://demos.telerik.com/blazor-ui/scheduler/appointment-editing

Edge and Chrome work as expected.

I noticed this issue in my local project and referred to the demo's to see if I was doing something stupid :-).

I am assuming that the demo's are running in .net 5 and that the demo's are blazor server applications.

I have a problem with Scheduler TimelineView. When there are a bit more appointments in the first resource group, the last appointment from the last group is positioned incorrectly/outside of the Scheduler component.

I think the CSS parameter "top" is calculated in the wrong mode. See the attached recording.

I am using the Scheduler component in Telerik for Blazor and am getting an intermittent exception being thrown, usually when navigating quickly through the application (ie. navigating to another page before the initial page containing the Scheduler has finished rendering).

This is the exception received:

===

ADMIN EDIT

===

The Scheduler must render in the browser and then it measures and adjusts its layout with JavaScript. You may hit this error if the component is disposed before or during this JavaScript call.

Example use cases:

• Navigating to a different page before the full component initialization
  
  Workaround: 
  
  The possibility to hit that is higher in case the Scheduler needs more time to initialize (e.g. it has to render a large set of appointments). In such a scenario, it will be useful to optimize the time needed for loading the appointments, so that the initial component rendering is not blocked by waiting all the data. For that purpose, you may load the appointments on demand - not fetching all possible appointments at once, but only when the user should see them. An example of such an implementation you may find here: https://github.com/telerik/blazor-ui/tree/master/scheduler/load-appointments-on-demand.
  
  
• Disposing the component during runtime (e.g. depending on the screen size) - https://blazorrepl.telerik.com/wIuHliEt40SutaBI53.
  
  Workaround: 
  
  Potential solution in this case - render component after calculating the screen size: https://blazorrepl.telerik.com/coEnPWON4570Wna007.

Support the recurrence rule to create multiple appointments per time slot. Examples of such rules are:

FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR,SA,SU;BYHOUR=08,09,10,11,12,13,14,15,16;BYMINUTE=50

Check the following configuration: https://blazorrepl.telerik.com/cHvuPOYX27peykXr18 ( SlotDuration="720"  SlotDivisions="1").

The start time of the appointment is 12:00 PM today. The Scheduler, however, displays the start at 12:00 AM on the next day even though the arrow indicates the event continues from the previous day.

For reference, if I set SlotDivisions="2", I get the expected result: https://blazorrepl.telerik.com/GxFOvYED302CzPCo32.

Here are some use cases: 

- Highlighting Today slot

- Change background colours for specific dates and/or days - such as weekends

- Change fonts and/or style of numbers on prev/next months days

Hi the lack of Timeline view is preventing me using Telerik Scheduler and urgghhhh feel like I need to shower after mentioning this: am having to use the sh*tty buggy cr*p in the Syncfusion suite at the moment. I would love a timeline view where we can create lanes for resources an also be able to custom style the event with background css (a template)

see attached screen shot

cheers

Neil

Currently, it is possible to select only one appointment at a time. I want to be able to select more than one appointment to perform some operation with all selected ones - for example, delete them.

The appointments at the start of the day seem accurate. If you scroll down, the position of the appointments does not line up with the grid line for the hour that it starts at or ends at. The issue can be observed in the live demo.