In the scheduler for Asp.net Ajax, the month view would put a k-other-month class on the cells from other months outside of the current one and those cells would have a different style (grayed day numbers or background, etc.). In the Blazor scheduler component it doesn't look like that class is being put on those cells anymore. The Telerik SCSS themes still allow for that class, so is there a way to add them or is there a workaround so that those cells can be re-styled similar to the way the Ajax Scheduler functions?
Thanks,
Mike
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>Bug reproduced systematically on web browser Edge (131.0.29.03.146) & Firefox (134.0).
Beware: culture is fr-FR
Scheduler component sometimes put appointments at wrong coordinates (hour if ok but the day is wrong).
The screenshot "ExampleWrongCoordinates.png" set an example of an item wrongfully located. In this picture, console log shows details of the razor element who's supposed to be located on Tuesday 14th of January 2025 .. but which is rendered on Monday instead!
Appointments model defines "default (expected) property names Start & End":
private DateTime _start;
public DateTime Start
{
get { return _start; }
set { _start = value; }
}
private DateTime _end;
public DateTime End
{
get { return _end; }
set { _end = value; }
}View is MultiDay but the glitch is the same on Week view.
Now if we switch on day view and navigate to Tuesday 14, scheduler shows the appointment on hours column! If we click it, a JS error is raised (Cf screenshot "ClickAppointmentWrongCoordinates.png").
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/wfkbbBca54BdZnUk24
Now that we can have more than 2 events in a day in Month View, we need to add an AppointmentHeight parameter to be able to make the appointments taller in height to accommodate longer titles.
ADMIN EDIT
An alternative for the time being is to show the longer content by using the appointment templates and the Tooltip component. For example:
https://github.com/telerik/blazor-ui/tree/master/scheduler/appointment-tooltips
When I try to move by drag and drop an event between resources the resource on the event is not updated.
I used this
<TelerikScheduler Data="@_trips" Height="500px"At the moment start and end times effectively "round" to the nearest half an hour. This can give the impression of events overlapping when they do not
e.g.

Admin edit: This feature would be similar to the Exact Time Rendering in our WebForms suite: https://demos.telerik.com/aspnet-ajax/scheduler/examples/exacttimerendering/defaultcs.aspx
If the Scheduler is placed in a parent container (for example Telerik Splitter or any other container) its appointments are not resized when resizing the pane. The Scheduler itself resizes accordingly, but the appointments don't.
Is there a way to customize the resource grouping's header (i.e. Alex, Bob, Charlie)? I understand it displays the text from the Resource, but I would like to be able to customize the HTML displayed so that I can add a tooltip. Would you have a suggestion as to how I can accomplish this?
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.
The "Edit Recurring Appointment" modal is only partially visible on mobile which prevents the user from proper editing.
Scheduler cells are not aligned correctly in the Timeline View when Bootstrap Theme is used.
To reproduce the problem:
1. Open the following Scheduler Demo:
https://demos.telerik.com/blazor-ui/scheduler/overview
2. Select the Bootstrap Theme
3. Open the Timeline View
Other schedule controls have an 'agenda' view that has a chronological list of appointments back to back stacked vertically colored by resource.
It would be great for the telerik scheduler to have a view like this.
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:
I want to hide the 'All Day slot' - I don't want to offer this functionality.
At the moment, you could try CSS like this, but ideally this would be a parameter (maybe on the view):
.no-allday .k-scheduler-head .k-scheduler-group:last-child{
display:none;
} <div class="no-allday">
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">
<SchedulerViews>
<SchedulerDayView StartTime="@DayStart" />
<SchedulerWeekView StartTime="@DayStart" />
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
</SchedulerViews>
</TelerikScheduler>
</div>
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