devexpress/agent-skills/devexpress-blazor-scheduler

DevExpress Blazor Scheduler

DxScheduler is a calendar/appointment component for Blazor. It visualizes time-based data as appointments across Day, Week, Work Week, Month, and Timeline views. Users can create, edit, drag, resize, and delete appointments through built-in UI.

When to Use This Skill

• Display appointments or events in calendar views
• Bind to a collection of appointment data objects via DxSchedulerDataStorage
• Support recurring appointments (daily, weekly, monthly, yearly)
• Manage multiple resources (rooms, employees, etc.)
• Create, edit, or delete appointments through the built-in edit forms
• Show work-time-only views with ShowWorkTimeOnly
• Navigate between dates with the scheduler toolbar

Prerequisites & Installation

NuGet Package

# Install from NuGet.org:
dotnet add package DevExpress.Blazor

Setup

1. Register in Program.cs:

``csharp builder.Services.AddDevExpressBlazor(); ` > **v26.1 note**: DevExpress.Blazor no longer includes options.BootstrapVersion or DevExpress.Blazor.BootstrapVersion`. Do not generate either API.

1. Apply a theme and add client scripts in App.razor inside <head>:

``razor @using DevExpress.Blazor @DxResourceManager.RegisterTheme(Themes.Fluent) @DxResourceManager.RegisterScripts() ``

1. Add namespace to _Imports.razor:

``razor @using DevExpress.Blazor ``

Before You Start — Ask the Developer

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

1. Render mode: Are you using InteractiveServer, InteractiveWebAssembly, or InteractiveAuto?
2. Data model: What is your appointment data class? What are the field names for start, end, subject, type, recurrence, etc.?
3. Initial view: Which view should be shown by default? (Day, Week, Work Week, Month, Timeline)
4. Start date: What date should the scheduler open on?
5. Features: Do you need recurring appointments? Resources? Custom labels/statuses?

Component Overview

DxScheduler includes:

• Data Storage (DxSchedulerDataStorage): Connects the component to appointment data via AppointmentsSource and AppointmentMappings
• Appointment Mappings (DxSchedulerAppointmentMappings): Maps your data model fields to scheduler concepts (Id, Start, End, Subject, Type, RecurrenceInfo, etc.)
• Views: DxSchedulerDayView, DxSchedulerWeekView, DxSchedulerWorkWeekView, DxSchedulerMonthView, DxSchedulerTimelineView
• Recurrence (DxSchedulerRecurrenceInfo): Built-in recurrence rule support (Daily, Weekly, Monthly, Yearly)
• Resources: Bind appointment resources via DxSchedulerResourceMappings and DxSchedulerDataStorage
• Labels & Statuses: Configurable labels and status indicators for appointments
• Appointment Templates (HorizontalAppointmentTemplate, VerticalAppointmentTemplate on each view; AppointmentTooltipTemplate on DxScheduler): Customize how appointments and hover tooltips render
• Drag & Resize (AllowDragAppointment, AllowDragAppointmentBetweenResources, AllowResizeAppointment): Users can drag appointments to reschedule them, drag between resource groups, or resize by dragging appointment borders; all three are enabled by default; set to false to restrict a specific operation; AppointmentStartDragging, AppointmentStartResizing, and AppointmentDraggingBetweenResources events allow customizing or canceling these operations
• Toolbar (ToolbarItems): Add, remove, or replace built-in toolbar items (DxSchedulerDateNavigatorToolbarItem, DxSchedulerTodayToolbarItem, etc.) and inject custom DxToolbarItem commands

Core Entry Point (Razor)

@rendermode InteractiveServer
 
<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage">
    <DxSchedulerWeekView ShowWorkTimeOnly="true" />
</DxScheduler>
 
@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage {
        AppointmentsSource = new List<AppointmentData>(),
        AppointmentMappings = new DxSchedulerAppointmentMappings {
            // Required mappings:
            Id = nameof(AppointmentData.Id),
            Type = nameof(AppointmentData.AppointmentType),
            Start = nameof(AppointmentData.StartDate),
            End = nameof(AppointmentData.EndDate),
            Subject = nameof(AppointmentData.Caption),
            // Optional mappings (add as needed):
            // AllDay = nameof(AppointmentData.AllDay),
            // Description = nameof(AppointmentData.Description),
            // Location = nameof(AppointmentData.Location),
            // LabelId = nameof(AppointmentData.Label),
            // StatusId = nameof(AppointmentData.Status),
            // RecurrenceInfo = nameof(AppointmentData.Recurrence)
        }
    };
}

Documentation & Navigation Guide

Getting Started

📄 references/getting-started.md

When you need to:

• Set up the scheduler from scratch
• Configure DxSchedulerDataStorage and AppointmentMappings
• Display your first calendar view

Data Binding

📄 references/data-binding.md

When you need to:

• Connect your appointment data model to the scheduler
• Load appointments from a service or database
• Understand all AppointmentMappings properties

Appointments

📄 references/appointments.md

When you need to:

• Handle appointment creation, editing, and deletion events
• Configure recurring appointments
• Customize appointment display with labels and statuses
• Use the compact form settings

Views

📄 references/views.md

When you need to:

• Choose between Day, Week, Work Week, Month, and Timeline views
• Configure ShowWorkTimeOnly
• Set visible time range and cell duration

Examples

💻 examples/quickstart.razor — Multi-view scheduler with appointment CRUD, labels, and statuses 💻 examples/resources.razor — Multi-resource timeline view with ResourcesSource, ResourceMappings, and GroupType.Resource

Quick Start Example

@page "/scheduler-demo"
@rendermode InteractiveServer
 
<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage">
    <DxSchedulerDayView />
    <DxSchedulerWeekView ShowWorkTimeOnly="true" />
    <DxSchedulerWorkWeekView />
    <DxSchedulerMonthView />
</DxScheduler>
 
@code {
    DxSchedulerDataStorage DataStorage;
 
    protected override void OnInitialized() {
        var appointments = new List<AppointmentData> {
            new AppointmentData {
                Id = 1, AppointmentType = 0,
                StartDate = DateTime.Today.AddHours(9),
                EndDate = DateTime.Today.AddHours(10),
                Caption = "Team Meeting",
                Description = "Weekly sync",
                Label = 2, Status = 0
            },
            new AppointmentData {
                Id = 2, AppointmentType = 0,
                StartDate = DateTime.Today.AddDays(1).AddHours(14),
                EndDate = DateTime.Today.AddDays(1).AddHours(15),
                Caption = "Code Review",
                Label = 3, Status = 0
            },
        };
 
        DataStorage = new DxSchedulerDataStorage {
            AppointmentsSource = appointments,
            AppointmentMappings = new DxSchedulerAppointmentMappings {
                Id = nameof(AppointmentData.Id),
                Type = nameof(AppointmentData.AppointmentType),
                Start = nameof(AppointmentData.StartDate),
                End = nameof(AppointmentData.EndDate),
                Subject = nameof(AppointmentData.Caption),
                Description = nameof(AppointmentData.Description),
                AllDay = nameof(AppointmentData.AllDay),
                Location = nameof(AppointmentData.Location),
                LabelId = nameof(AppointmentData.Label),
                StatusId = nameof(AppointmentData.Status),
                RecurrenceInfo = nameof(AppointmentData.Recurrence)
            }
        };
    }
 
    class AppointmentData {
        public int Id { get; set; }
        public int AppointmentType { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public string Caption { get; set; }
        public string Description { get; set; }
        public string Location { get; set; }
        public bool AllDay { get; set; }
        public int Label { get; set; }
        public int Status { get; set; }
        public string Recurrence { get; set; }
    }
}

Key Properties

DxScheduler

DxSchedulerDataStorage

DxSchedulerAppointmentMappings

Programmatic Recurrence Patterns

When a user asks to make an appointment recurring, create a recurring pattern in the data source. Set AppointmentType = 1 and assign a recurrence rule string to the mapped Recurrence field. Do not invent helpers like WeeklyRecurrence(...) unless the project already defines them.

var start = DateTime.Today.AddDays(1).AddHours(14);
var end = DateTime.Today.AddDays(1).AddHours(15);
 
var appointment = new AppointmentData {
    Id = 3,
    AppointmentType = 1,
    StartDate = start,
    EndDate = end,
    Caption = "Planning Session",
    Description = "Sprint planning",
    Label = 5,
    Status = 1,
    Recurrence = string.Format(
        System.Globalization.CultureInfo.InvariantCulture,
        "<RecurrenceInfo Start=\"{0}\" End=\"{1}\" WeekDays=\"{2}\" Frequency=\"1\" Range=\"0\" Type=\"1\" Id=\"{3}\" />",
        start,
        end,
        1 << (int)start.DayOfWeek,
        Guid.NewGuid())
};

Use the following recurrence rule shapes for common prompts: