Skip to content

Updated the UG document for the Scheduler component #6823

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 13, 2025
Merged

Updated the UG document for the Scheduler component #6823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed9a588
984382: Updated the UG document for the Scheduler component
praveensf4999 Oct 7, 2025
35128dc
Merge branch 'development' into 984382-scheduler3
praveensf4999 Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions blazor/scheduler/dimensions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ documentation: ug

# Scheduler Dimensions in Blazor Scheduler Component

The Scheduler dimensions refers to both height and width of the entire layout and it accepts 3 types of values.
The dimensions of the Syncfusion Blazor Scheduler component, encompassing both height and width of its entire layout, can be defined using three types of values:

* auto
* pixel
* percentage

## Auto Height and Width

When height and width of the Scheduler are set to `auto`, it will try hard to keep an element the same width as its parent container. In other words, for the parent container that holds Scheduler, it's width or height will be the sum of its children. By default, Scheduler is assigned with `auto` values for both height and width properties.
When the height and width of the Scheduler are set to `auto`, the component attempts to match the width of its parent container. In this configuration, the parent container's width or height will be the cumulative size of its children. By default, the Scheduler component is assigned `auto` values for both its `Height` and `Width` properties.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -47,10 +47,11 @@ When height and width of the Scheduler are set to `auto`, it will try hard to ke
}
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBesjtcsURMTcIB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## Height and Width in pixel
## Height and Width in Pixel

The Scheduler height and width will be rendered exactly as per the given pixel values. It accepts both string and number values.
The Scheduler's height and width render precisely according to the specified pixel values. Both string and number values are accepted for these properties.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -80,10 +81,13 @@ The Scheduler height and width will be rendered exactly as per the given pixel v
}
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZByiNjQWKmhecik?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## Height and Width in percentage
![Height and width in pixel in Blazor Scheduler](images/height-width-inpixel.png)

When height and width of the Scheduler are given as percentage, it will make the Scheduler as wide as the parent container.
## Height and Width in Percentage

When the height and width of the Scheduler are provided as percentage values, the component will expand to occupy the specified percentage of its parent container's dimensions.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -113,10 +117,11 @@ When height and width of the Scheduler are given as percentage, it will make the
}
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLSstjwCqYbFnCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## How to set the full height of the view port
## How to set the full height of the viewport

When the height of the Scheduler is set in the CSS unit of Viewport Height(vh), it will make the Scheduler to occupy the full height within the viewport.
Setting the Scheduler's height using the CSS unit of Viewport Height (vh) allows the component to occupy the full height within the viewport.

In the following example, the application header height (4.6rem) is reduced from the total viewport.

Expand Down Expand Up @@ -148,5 +153,4 @@ In the following example, the application header height (4.6rem) is reduced from
}
}
```

![Blazor Scheduler with View Port Height](images/blazor-scheduler-view-port-height.png)
121 changes: 73 additions & 48 deletions blazor/scheduler/editor-template.md
View file
Open in desktop

Large diffs are not rendered by default.

48 changes: 24 additions & 24 deletions blazor/scheduler/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ documentation: ug

# Events in Blazor Scheduler Component

In this section, the list of events of the Scheduler component have been provided which will be triggered for appropriate Scheduler actions.
This section provides a list of events associated with the Scheduler component that trigger upon appropriate Scheduler actions.

The events should be provided to the Scheduler using **ScheduleEvents** tag. When using events of Scheduler, **TValue** must be provided in the **ScheduleEvents** tag.

## ActionCompleted

[`ActionCompleted`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_ActionCompleted) event triggers on successful completion of the Scheduler actions.
[`ActionCompleted`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_ActionCompleted) event triggers upon the successful completion of Scheduler actions.

The action type that can be checked within the [`ActionCompleted`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_ActionCompleted) event are as follows.

Expand Down Expand Up @@ -77,7 +77,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.

## Created

[`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Created) event triggers after the Scheduler component is created.
The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Created) event triggers after the Scheduler component is rendered.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand All @@ -98,7 +98,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.
DateTime CurrentDate = new DateTime(2020, 3, 10);
public void OnCreated()
{
//Here you can customize your code
// Custom code can be implemented here.
}
List<AppointmentData> DataSource = new List<AppointmentData>
{
Expand All @@ -122,7 +122,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.

## DataBinding

[`DataBinding`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBinding) event triggers before the data binds to the Scheduler.
The [`DataBinding`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBinding) event triggers before data binds to the Scheduler.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -167,7 +167,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.

## DataBound

[`DataBound`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBound) event triggers once the event data is bound to the Scheduler.
The [`DataBound`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBound) event triggers once event data is bound to the Scheduler.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -213,7 +213,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.

## Destroyed

[`Destroyed`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Destroyed) event triggers when the Scheduler component is destroyed.
The [`Destroyed`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Destroyed) event triggers when the Scheduler component is destroyed.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand All @@ -234,7 +234,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.
DateTime CurrentDate = new DateTime(2020, 3, 10);
public void OnDestroyed()
{
//Here you can customize your code
// Custom code can be implemented here.
}
List<AppointmentData> DataSource = new List<AppointmentData>
{
Expand All @@ -258,7 +258,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.

## Dragged

[`Dragged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Dragged) event triggers when the dragging of appointment is stopped.
[`Dragged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Dragged) event triggers when appointment dragging is stopped.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -304,7 +304,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.

## EventRendered

[`EventRendered`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_EventRendered) event triggers before each of the event getting rendered on the Scheduler user interface.
The [`EventRendered`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_EventRendered) event triggers before each event is rendered on the Scheduler user interface.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -358,7 +358,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.

## MoreEventsClicked

[`MoreEventsClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_MoreEventsClicked) event triggers when the more events indicator are clicked.
The [`MoreEventsClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_MoreEventsClicked) event triggers when the "more events" indicator is clicked.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -406,7 +406,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.

## Navigating

[`Navigating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Navigating) event triggers before the date or view navigation takes place on Scheduler.
[`Navigating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Navigating) event triggers before date or view navigation occurs in the Scheduler.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -453,9 +453,9 @@ The action type that can be checked within the [`ActionCompleted`](https://help.

## OnActionBegin

[`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event triggers on beginning of every Scheduler action.
[`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event triggers at the beginning of every Scheduler action.

The request type that can be checked within the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event are as follows.
The `ActionType` that can be checked within the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event are as follows.

| ActionType | Description |
|------|-------------|
Expand Down Expand Up @@ -513,7 +513,7 @@ The request type that can be checked within the [`OnActionBegin`](https://help.s

## OnActionFailure

[`OnActionFailure`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionFailure) event triggers when a Scheduler action gets failed or interrupted.
[`OnActionFailure`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionFailure) event triggers when a Scheduler action fails or is interrupted.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -558,7 +558,7 @@ The request type that can be checked within the [`OnActionBegin`](https://help.s

## OnCellClick

[`OnCellClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnCellClick) event triggers when the Scheduler cells are single clicked or on single tap on the same cells in mobile devices.
[`OnCellClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnCellClick) event triggers when Scheduler cells are single-clicked or upon single-tapping the same cells on mobile devices.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -695,7 +695,7 @@ The request type that can be checked within the [`OnActionBegin`](https://help.s

## OnEventClick

[`OnEventClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnEventClick) event triggers when the events are single clicked or on single tapping the events on the mobile devices.
[`OnEventClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnEventClick) event triggers when an event is single-clicked or upon single-tapping an event on mobile devices.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -742,7 +742,7 @@ The request type that can be checked within the [`OnActionBegin`](https://help.s

## OnEventDoubleClick

[`OnEventDoubleClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnEventDoubleClick) event triggers when the events are double clicked.
[`OnEventDoubleClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnEventDoubleClick) event triggers when an event is double-clicked.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down Expand Up @@ -790,9 +790,9 @@ The request type that can be checked within the [`OnActionBegin`](https://help.s

## OnPopupClose

[`OnPopupClose`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupClose) event triggers before any of the Scheduler popups close on the page.
[`OnPopupClose`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupClose) event triggers before any Scheduler popups close on the page.

In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the [`OnPopupClose`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupClose) event are as follows.
To prevent only specific popups in the Scheduler, the condition can be checked based on the popup type. The `PopupType` values that can be checked within the [`OnPopupClose`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupClose) event are as follows.

| PopupType | Description |
|------|-------------|
Expand Down Expand Up @@ -852,9 +852,9 @@ In case, if you need to prevent only specific popups on Scheduler, then you can

## OnPopupOpen

[`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event triggers before any of the Scheduler popups opens on the page.
[`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event triggers before any Scheduler popups open on the page.

In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the [`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event are as follows.
To prevent only specific popups in the Scheduler, the condition can be checked based on the popup type. The `PopupType` values that can be checked within the [`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event are as follows.

| PopupType | Description |
|------|-------------|
Expand Down Expand Up @@ -914,7 +914,7 @@ In case, if you need to prevent only specific popups on Scheduler, then you can

## OnRenderCell

[`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell) event triggers before each element of the Schedule rendering on the page.
[`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell) event triggers before each element of the Scheduler renders on the page.

The ElementType that can be checked within the [`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell) event are as follows.

Expand Down Expand Up @@ -983,7 +983,7 @@ The ElementType that can be checked within the [`OnRenderCell`](https://help.syn

## OnResizeStart

[`OnResizeStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnResizeStart) event triggers when an appointment is started to resize.
[`OnResizeStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnResizeStart) event triggers when an appointment begins to be resized.

```cshtml
@using Syncfusion.Blazor.Schedule
Expand Down
Loading