Blazorise Scheduler Component

A Scheduler component used to create and manage appointments in a calendar.

Installation

NuGet

Install extension from NuGet.

Install-Package Blazorise.Scheduler

Imports

In your main _Imports.razor add:

@using Blazorise.Scheduler

Fundamentals

Using TItem

The Scheduler<TItem> component is generic and can theoretically work with any type. However, the type must contain properties for Title, Start, and End at minimum. These property names can be overridden using property mappings.

Editing

Editing of scheduler items can be enabled or disabled by setting Editable parameter:

Editable="true": Enables built-in editing capabilities.
Editable="false": Disables built-in editing. In this case, item creation, updates, and deletions must be handled manually using callbacks like ItemInserted, ItemUpdated, and ItemDeleted.

Drag and Drop

Drag and drop functionality for scheduler items can be toggled using Draggable parameter:

Draggable="true" (default): Allows items to be moved or resized via drag-and-drop.
Draggable="false": Disables drag-and-drop interactions.

Recurring Appointments

The Scheduler component supports recurring appointments based on RFC-5545 recurrence rules. Recurrences are dynamically displayed based on these rules and are not persisted by the component itself. Persistence of recurrence data must be managed by the developer and backend.

Recurring items: Defined by limited RFC-5545 rules and calculated at runtime.
Exceptions: Edited or deleted occurrences of recurring appointments are exceptions and managed internally by the scheduler component.

Examples

Basic

Basic usage of the Scheduler component, with a few views, and defined start and end times.

07:00

08:00

09:00

10:00

11:00

12:00

13:00

14:00

15:00

16:00

Sunday May 18

Meeting with the CEO Some other meeting

Monday May 19

Lunch with the team

Tuesday May 20

Wednesday May 21

Thursday May 22

Friday May 23

Saturday May 24

<Scheduler TItem="SchedulerAppointment" @bind-Date="@selectedDate"
           Data="@Appointments"
           @bind-SelectedView="@selectedView">
    <SchedulerToolbar />
    <SchedulerViews>
        <SchedulerDayView StartTime="@startTime" EndTime="@endTime" WorkDayStart="@workDayStart" WorkDayEnd="@workDayEnd" />
        <SchedulerWeekView StartTime="@startTime" EndTime="@endTime" WorkDayStart="@workDayStart" WorkDayEnd="@workDayEnd" />
        <SchedulerWorkWeekView StartTime="@startTime" EndTime="@endTime" WorkDayStart="@workDayStart" WorkDayEnd="@workDayEnd" />
        <SchedulerMonthView StartTime="@startTime" EndTime="@endTime" WorkDayStart="@workDayStart" WorkDayEnd="@workDayEnd" />
    </SchedulerViews>
</Scheduler>

@code {
    private DateOnly selectedDate = DateOnly.FromDateTime( DateTime.Today );
    private SchedulerView selectedView = SchedulerView.Week;
    private static DateTime today10AM = DateTime.Today.AddHours( 10 );
    private TimeOnly startTime = new TimeOnly( 7, 0 );
    private TimeOnly endTime = new TimeOnly( 17, 0 );
    private TimeOnly workDayStart = new TimeOnly( 8, 0 );
    private TimeOnly workDayEnd = new TimeOnly( 16, 0 );

    public class SchedulerAppointment
    {
        public SchedulerAppointment()
        {            
        }

        public SchedulerAppointment( string title, string description, DateTime start, DateTime end, bool allDay = false )
        {
            Id = Guid.NewGuid().ToString();
            Title = title;
            Description = description;
            Start = start;
            End = end;
            AllDay = allDay;
        }

        public string Id { get; set; }

        public string Title { get; set; }

        public string Description { get; set; }

        public DateTime Start { get; set; }

        public DateTime End { get; set; }

        public bool AllDay { get; set; }

        public string RecurrenceRule { get; set; }
    }

    List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>
    {
        new SchedulerAppointment( "Meeting with the CEO", "Regarding the new margeting strategy", today10AM, today10AM.AddHours(1) ),
        new SchedulerAppointment( "Some other meeting", "Regarding the new margeting strategy", today10AM, today10AM.AddHours(1) ),
        new SchedulerAppointment( "Lunch with the team", "Discussing the new project", today10AM.AddDays(-10).AddHours(2), today10AM.AddDays(-10).AddHours(3))
        {
            RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=2;COUNT=3"
        },
    };
}

API

Parameters

Parameter	Description	Type	Default
`AllDayField`	Defines the field name of the Scheduler.Scheduler that represents the all-day status of the appointment. Defaults to "AllDay".	`string`	`"AllDay"`
`ChildContent`	Gets or sets the content to be rendered inside the component. Remarks This property allows developers to define custom content within the Scheduler.Scheduler component.	`RenderFragment`	`null`
`Data`	Holds a collection of items of type . Used to manage and display a list of appointments.	`IEnumerable<TItem>`	`null`
`Date`	The currently selected date. Determines the date that is displayed in the scheduler. Defaults to the current date.	`DateOnly`	`null`
`DeletedOccurrencesField`	Defines the field name of the Scheduler.Scheduler that represents the deleted occurrences. This is used to store the dates of the deleted occurrences in a recurring series.	`string`	`"DeletedOccurrences"`
`DescriptionField`	Defines the field name of the Scheduler.Scheduler that represents the description of the appointment. Defaults to "Description".	`string`	`"Description"`
`Draggable`	Indicates whether the items in the scheduler can be dragged and dropped. Defaults to false.	`bool`	`false`
`Editable`	Indicates whether the component is editable. Defaults to true.	`bool`	`true`
`EndField`	Defines the field name of the Scheduler.Scheduler that represents the end date of the appointment. Defaults to "End".	`string`	`"End"`
`IdField`	Defines the field name of the Scheduler.Scheduler that represents the unique identifier of the appointment. Defaults to "Id".	`string`	`"Id"`
`Localizers`	Custom localizer handlers to override default Scheduler.Scheduler localization.	`SchedulerLocalizers`	`null`
`OriginalStartField`	Defines the field name of the Scheduler.Scheduler that represents the original start date of the appointment. This is used to store the original start date of a recurring series.	`string`	`"OriginalStart"`
`RecurrenceExceptionsField`	Defines the field name of the Scheduler.Scheduler that represents the recurrence exceptions. This is used to store the dates of the exceptions in a recurring series.	`string`	`"RecurrenceExceptions"`
`RecurrenceIdField`	Defines the field name of the Scheduler.Scheduler that represents the recurrence ID of the appointment. This is used to identify the master appointment in a recurring series.	`string`	`"RecurrenceId"`
`RecurrenceRuleField`	Defines the field name of the Scheduler.Scheduler that represents the recurrence rule string in iCalendar (RFC 5545) compliance rules.	`string`	`"RecurrenceRule"`
`SelectedView`	The currently selected view. Determines the view that is displayed in the scheduler. Possible values:`Day`, `Week`, `WorkWeek`, `Month`	`SchedulerView`	`SchedulerView.Day`
`ShowToolbar`	Indicates if the toolbar should be displayed.	`bool`	`true`
`StartField`	Defines the field name of the Scheduler.Scheduler that represents the start date of the appointment. Defaults to "Start".	`string`	`"Start"`
`TitleField`	Defines the field name of the Scheduler.Scheduler that represents the title of the appointment. Defaults to "Title".	`string`	`"Title"`
`UseInternalEditing`	Indicates whether internal editing is enabled. Defaults to true.	`bool`	`true`
`WeekNavigationMode`	The mode of the week navigation. Determines how the week navigation is handled. Possible values:`CurrentDay`, `FirstDayOfWeek`	`SchedulerWeekNavigationMode`	`SchedulerWeekNavigationMode.FirstDayOfWeek`

Events

Event	Description	Type
`DateChanged`	Occurs when the selected date changes.	`EventCallback<DateOnly>`
`DeleteItemClicked`	An event callback triggered when an item is clicked for deletion.	`EventCallback<SchedulerItemClickedEventArgs<TItem>>`
`DragCancelled`	Triggered when a drag operation is cancelled.	`Func<SchedulerDragEventArgs<TItem>, Task>`
`DragStarted`	Triggered when a drag operation starts.	`Func<SchedulerDragEventArgs<TItem>, Task>`
`DropAllowed`	Defines a function that determines if a drop action is allowed during a drag-and-drop operation.	`Func<SchedulerDragEventArgs<TItem>, Task<bool>>`
`EditItemClicked`	An event callback triggered when an item is clicked for editing.	`EventCallback<SchedulerItemClickedEventArgs<TItem>>`
`ItemDropped`	Triggered when an item is dropped into a new slot.	`EventCallback<SchedulerItemDroppedEventArgs<TItem>>`
`ItemInserted`	Triggers an event when a new item is inserted into the scheduler.	`EventCallback<SchedulerInsertedItem<TItem>>`
`ItemInserting`	Triggers an event when a new item is being inserted into the scheduler. It allows handling and cancellation of the item insert process.	`EventCallback<SchedulerCancellableItemChange<TItem>>`
`ItemRemoved`	Triggers an event when an item in the scheduler is deleted.	`EventCallback<SchedulerUpdatedItem<TItem>>`
`ItemRemoving`	An event callback triggered when an item is being removed from the scheduler. It allows handling and cancellation of the removal process.	`EventCallback<SchedulerCancellableItemChange<TItem>>`
`ItemStyling`	Defines a callback for customizing the styling of items in a Scheduler.Scheduler.	`Action<TItem, SchedulerItemStyling>`
`ItemUpdated`	Triggers an event when an item in the scheduler is updated.	`EventCallback<SchedulerUpdatedItem<TItem>>`
`ItemUpdating`	An event callback triggered when an item is being updated in the scheduler. It allows handling and cancellation of the item update process.	`EventCallback<SchedulerCancellableItemChange<TItem>>`
`NewIdCreator`	Defines a function that creates a new ID for the item. It allows for custom ID generation logic.	`Func<object>`
`NewItemCreator`	Defines a function that creates a new item of type TItem. It allows for custom item creation logic.	`Func<TItem>`
`SelectedViewChanged`	Occurs when the selected view changes.	`EventCallback<SchedulerView>`
`SlotClicked`	Occurs when an empty slot is clicked.	`EventCallback<SchedulerSlotClickedEventArgs>`

Methods

Method	Description	Return	Parameters
`NavigatePrevious`	Navigates to the previous date.	`Task`
`NavigateNext`	Navigates to the next date.	`Task`
`NavigateToday`	Navigates to the current date.	`Task`
`ShowDayView`	Sets the selected view to 'Day' and triggers an update to reflect this change.	`Task`
`ShowWeekView`	Sets the selected view to 'Week' and triggers an update to reflect this change.	`Task`
`ShowWorkWeekView`	Sets the selected view to 'WorkWeek' and triggers an update to reflect this change.	`Task`
`ShowMonthView`	Sets the selected view to 'Month' and triggers an update to reflect this change.	`Task`
`New`	Creates a new appointment by invoking the Scheduler.Scheduler.New() method with a newly created item.	`Task`
`New`	Creates a new item and sets the editing state to 'New'. If conditions are met, it displays a modal for editing the item.	`Task`	`TItem item`
`Edit`	Sets the Scheduler.Scheduler into the Edit state mode for the specified item.	`Task`	`TItem item`
`Delete`	Deletes the specified item from the Scheduler.Scheduler.Data source.	`Task`	`TItem item`
`EditOccurrence`	Opens the modal dialog for editing a single occurrence of a recurring item.	`Task`	`TItem item`
`CancelSelection`	Cancels the current selection if a transaction is in progress, rolling back any changes made during the selection. Should not be called directly by the user!	`Task`