Syncfusion Aspnetmvc Scheduler

Implementing Syncfusion ASP.NET MVC Scheduler

The Syncfusion ASP.NET MVC Scheduler is a comprehensive calendar and event management component that displays appointments in various views (Day, Week, Month, Year, Agenda, Timeline). It supports drag-and-drop, recurring events, multiple resources, timezone handling, and extensive customization options for building scheduling applications, appointment booking systems, resource management tools, and timeline-based interfaces.

When to Use This Skill

Use this skill when users want to:

• Create scheduling or calendar interfaces in ASP.NET MVC applications
• Implement appointment booking or event management systems
• Build resource scheduling with multiple calendars
• Display time-based data in day, week, month, or timeline views
• Handle recurring events with complex recurrence patterns
• Enable drag-and-drop appointment management
• Integrate with remote data services or Google Calendar
• Customize event rendering, templates, or styling
• Implement timezone-aware scheduling across regions
• Export calendar data to Excel, PDF, or ICS formats

Component Overview

The Scheduler component provides:

• Multiple Views: Day, Week, Work Week, Month, Year, Agenda, Month Agenda, Timeline variants
• Appointment Management: Create, read, update, delete with inline editing, drag-drop, resize
• Recurring Events: Daily, weekly, monthly, yearly patterns with exceptions
• Data Binding: Local arrays, remote services, OData, custom adaptors, Google Calendar
• Resource Scheduling: Single/multi-level grouping, vertical/timeline layouts
• Customization: Event templates, cell templates, header customization, styling
• Advanced Features: Timezone support, localization, virtual scrolling, state persistence
• Interactions: Context menu, quick info popup, keyboard navigation, touch support
• Export: Excel, PDF, ICS (iCalendar) formats

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Prerequisites and system requirements
• Installing NuGet package (Syncfusion.EJ2.MVC5)
• Adding Scheduler to ASP.NET MVC project
• CSS and script references (CDN, NPM, CRG)
• Basic initialization with event data
• Setting initial date and view
• Populating appointments from controller

Appointments and Event Management

📄 Read: references/appointments.md

• Normal, spanned, and all-day events
• Creating appointments programmatically
• Recurring events and recurrence rules (FREQ, INTERVAL, COUNT, UNTIL, BYDAY, BYMONTHDAY)
• Daily, weekly, monthly, yearly recurrence patterns
• Adding exceptions to recurring series
• Editing single occurrences vs entire series
• Event fields (Id, Subject, StartTime, EndTime, IsAllDay, RecurrenceRule, etc.)
• Binding different field names
• Adding custom fields to appointments
• Appointment selection and deletion

📄 Read: references/appointment-interactions.md

• Drag and drop appointments between time slots
• Multi-appointment drag (Ctrl+select multiple events)
• Resizing appointments (extending/shrinking duration)
• Controlling scroll speed during drag/resize
• Setting drag and resize intervals
• Auto-navigation on drag to edges
• Dragging from external sources (TreeView, ListView)
• Opening editor on drag stop
• Preventing overlaps with allowOverlap property
• Blocking specific dates/times (IsBlock field)
• Read-only appointments (IsReadonly field)
• Inline appointment editing

📄 Read: references/appointment-customization.md

• Event templates for custom rendering
• Using EventRendered event for styling
• CSS class customization (CssClass property)
• Setting minimum appointment height
• Tooltip configuration (enableTooltip, tooltipTemplate)
• Differentiating past events
• Sorting overlapping events (sortComparer)
• Appointments occupying full cell height (enableMaxHeight)
• Custom appointment colors and backgrounds
• Quick Info popup customization

Views and Navigation

📄 Read: references/views.md

• Available views: Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda
• Setting active view (currentView property)
• Configuring specific views to display
• View-specific options (dateFormat, readonly, showWeekend, workDays)
• Day view with custom intervals (display 3 days, 5 days, etc.)
• Week and Work Week customization (firstDayOfWeek, workDays)
• Month view with "+more" indicator
• Year view (Horizontal and Vertical orientations)
• Agenda view with virtual scrolling (agendaDaysCount, hideEmptyAgendaDays)
• Month-Agenda view
• Extending view intervals with displayName
• MaxEventStack appointment limit per cell

📄 Read: references/timeline-views.md

• Timeline Day, Week, Work Week views
• Timeline Month and Year views
• Horizontal time axis with appointments
• Resource grouping in timeline mode
• Header rows configuration (year, month, week, date, hour labels)
• Auto row height for timeline views
• Timeline-specific cell and event rendering
• Customizing timeline intervals and slots

Data Binding

📄 Read: references/data-binding.md

• Binding local JSON data arrays
• Remote data services with DataManager
• Using ODataV4Adaptor for OData services
• Filter events with includeFiltersInQuery
• Creating custom adaptors
• Loading data via AJAX post
• Passing additional parameters to server (Query.addParams)
• Handling server failures (ActionFailure event)
• CRUD operations with UrlAdaptor
• Server-side controller implementation (InsertOnSubmit, DeleteOnSubmit)
• Google Calendar API integration
• Mapping event fields in DataBinding event

Resources and Grouping

📄 Read: references/resources.md

• Resource fields (Field, Title, Name, DataSource, IdField, TextField, ColorField)
• AllowMultiple for multi-resource selection
• Local and remote resource data binding
• Scheduler with multiple resources (no visual grouping)
• Vertical resource view (calendar views)
• Timeline resource view
• Single-level resource grouping
• Multi-level hierarchical grouping (GroupIDField)
• One-to-one grouping (byGroupID: false)
• Grouping by date (byDate: true)
• Resource-specific work hours (StartHourField, EndHourField, WorkDaysField)
• Customizing parent resource cells

Cell and UI Customization

📄 Read: references/cell-customization.md

• Work cell templates (cellTemplate)
• Resource header templates (resourceHeaderTemplate)
• RenderCell event for conditional cell styling
• Cell click and double-click handling
• Restricting cell availability with isSlotAvailable
• Custom cell content and rendering
• Preventing event creation on specific cells

📄 Read: references/scheduler-styling.md

• Theme customization (Fluent, Material, Bootstrap, etc.)
• CSS class override techniques
• Event color customization
• Header bar styling
• Cell and time slot styling
• Resource color mapping (ColorField)
• Custom CSS examples for events and cells
• CssClass property for appointments

CRUD Operations

📄 Read: references/crud-actions.md

• Add, edit, delete events through UI
• Editor window configuration
• Custom editor templates (editorTemplate)
• Quick info popup customization
• Preventing default actions (ActionBegin event)
• Server-side CRUD with UrlAdaptor
• Validation rules for event fields
• Read-only mode (readonly property)
• Editor field settings (default, name, title, validation)

Context Menu

📄 Read: references/context-menu.md

• Enabling context menu on events and cells
• Default menu items (Add, Edit, Delete, Today, Save, Cancel, Close)
• Adding custom menu items
• Menu item selection handling (menuOpen, menuItemSelect events)
• Context menu templates
• Conditional menu display

Editor Customization

📄 Read: references/editor-template.md

• Creating custom editor popup
• Adding custom fields to editor
• Editor template setup with HTML
• Populating editor with appointment data
• Saving custom field data
• Multi-field editor forms
• Validation in custom editors
• Dependent Fields
• DateTime Picker
• Dropdown Fields
• Custom Styling

TimeScale Configuration

📄 Read: references/timescale.md

• TimeScale enable/disable (shows/hides time slots)
• Setting time slot duration (interval property in minutes)
• SlotCount for subdividing intervals
• Major slot template (majorSlotTemplate)
• Minor slot template (minorSlotTemplate)
• Hiding timescale grid lines
• Current time indicator (showTimeIndicator)
• Custom time label formats

Timezone Handling

📄 Read: references/timezone.md

• Scheduler-level timezone (timezone property)
• Event-specific timezones (StartTimezone, EndTimezone fields)
• IANA timezone names (America/New_York, Europe/London, etc.)
• Timezone conversion for display
• Handling appointments across multiple timezones
• UTC storage and local display
• Timezone offset calculations

Localization

📄 Read: references/localization.md

• Internationalization setup (locale property)
• Culture-specific date/time formats
• Translating Scheduler text (load CLDR data)
• RTL (right-to-left) support (enableRtl)
• Number and currency format customization
• Week number display (showWeekNumber)
• First day of week configuration

Header Customization

📄 Read: references/header-customization.md

• Header bar configuration
• Custom toolbar items
• Date range text customization (dateRangeTemplate)
• Hiding header bar elements
• Header rows for timeline views (year, month, week, date, hour)
• Custom navigation buttons
• Header item templates
• Date header templates (dateHeaderTemplate) with template scripts, formatted date text, and dynamic content like weather icons
• Combining DateHeaderTemplate with RenderCell for Month view decorations

Print and Export

📄 Read: references/print-and-export.md

• Export to Excel (exportToExcel method)
• Export to PDF (exportToPdf method) with page settings
• Export to ICS/iCalendar format (exportToICalendar method)
• Import iCalendar files (importICalendar) via Uploader
• Print the Scheduler with default options (print method)
• Custom export fields and field mapping
• Export selected events only
• Export options (fileName, exportType, customData)
• Excel custom cell formatting
• PDF orientation and page size

Advanced Features

📄 Read: references/advanced-features.md

• State persistence (enablePersistence) across page reloads
• Virtual scrolling for Agenda and Timeline views (allowVirtualScrolling)
• Row auto height (rowAutoHeight) for Timeline views with adaptive resource rows
• Working days configuration (workDays property)
• Start and end hour (startHour, endHour)
• Scheduler dimensions (width, height)
• Clipboard operations (cut, copy, paste events)
• Recurrence editor component (standalone)
• Calendar modes (Gregorian, Islamic calendar)
• Adaptive UI rendering with EnableAdaptiveUI for mobile-friendly layouts

Security Considerations

When implementing Syncfusion Scheduler:

• ✅ Always use [Authorize] and [ValidateAntiForgeryToken]
• ✅ Validate and sanitize all user inputs
• ✅ Encode all outputs to prevent XSS
• ✅ Filter data by authenticated user (multi-tenant isolation)
• ✅ Use parameterized queries (Entity Framework helps)
• ✅ Enable HTTPS and set secure cookie flags
• ✅ Implement audit logging for sensitive operations
• ✅ Follow principle of least privilege for resources

Quick Start Example

Basic Scheduler with Appointments

// Controller: HomeController.cs
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(GetScheduleData());
    }

    public List<AppointmentData> GetScheduleData()
    {
        List<AppointmentData> appData = new List<AppointmentData>();
        appData.Add(new AppointmentData
        {
            Id = 1,
            Subject = "Project Meeting",
            StartTime = new DateTime(2026, 4, 10, 9, 30, 0),
            EndTime = new DateTime(2026, 4, 10, 11, 0, 0),
            Location = "Conference Room A"
        });
        return appData;
    }
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public string Location { get; set; }
}

@* View: Index.cshtml *@
@model List<AppointmentData>

@Html.EJS().Schedule("scheduler")
    .Width("100%")
    .Height("550px")
    .SelectedDate(new DateTime(2026, 4, 10))
    .EventSettings(e => e.DataSource(Model))
    .Render()

Recurring Event Example

// Create a weekly recurring event (every Monday for 10 occurrences)
appData.Add(new AppointmentData
{
    Id = 3,
    Subject = "Weekly Team Standup",
    StartTime = new DateTime(2026, 4, 13, 10, 0, 0),
    EndTime = new DateTime(2026, 4, 13, 10, 30, 0),
    RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO;COUNT=10"
});

Common Patterns

1. Data Binding with Remote Service

@Html.EJS().Schedule("scheduler")
    .Width("100%")
    .Height("550px")
    .EventSettings(e => e
        .DataSource(d => d
            .Url("url")
            .CrudUrl("url")
            .Adaptor("UrlAdaptor")
        )
    )
    .Render()

2. Resource Grouping (Timeline View)

// Controller
public ActionResult Index()
{
    ViewBag.Resources = GetResourceData();
    return View(GetScheduleData());
}

public List<ResourceData> GetResourceData()
{
    return new List<ResourceData>
    {
        new ResourceData { Id = 1, Text = "Room A", Color = "#cb6bb2" },
        new ResourceData { Id = 2, Text = "Room B", Color = "#56ca85" }
    };
}

@{
    string[] group = new string[] { "Rooms" };
}

@Html.EJS().Schedule("scheduler")
    .Width("100%")
    .Height("550px")
    .CurrentView(Syncfusion.EJ2.Schedule.View.TimelineWeek)
    .Group(g => g.Resources(group))
    .Resources(res =>
    {
        res.DataSource((IEnumerable<ResourceData>)ViewBag.Resources)
            .Field("RoomId")
            .Title("Room")
            .Name("Rooms")
            .TextField("Text")
            .IdField("Id")
            .ColorField("Color")
            .Add();
    })
    .EventSettings(e => e.DataSource(Model))
    .Render()

3. Custom Event Template

<script id="eventTemplate" type="text/x-template">
    <div class="template-wrap">
        <div class="subject">@Html.Encode("${Subject}")</div>
    </div>
</script>

@Html.EJS().Schedule("scheduler")
    .EventSettings(e => e
        .DataSource(Model)
        .Template("#eventTemplate")
    )
    .Render()

4. Handling CRUD Events

@Html.EJS().Schedule("scheduler")
    .EventSettings(e => e.DataSource(Model))
    .ActionBegin("onActionBegin")
    .ActionComplete("onActionComplete")
    .Render()

<script>
    function onActionBegin(args) {
        // args.requestType: 'eventCreate', 'eventChange', 'eventRemove'
        if (args.requestType === 'eventCreate') {
            console.log('Creating appointment:', args.data);
            // Validate or modify data before save
        }
    }

    function onActionComplete(args) {
        if (args.requestType === 'eventCreated') {
            console.log('Appointment created successfully');
        }
    }
</script>

Key Properties

Common Use Cases

Appointment Booking System

• Use Month view for date selection, Day view for time slots
• Implement custom event template showing patient/client details
• Use isSlotAvailable method to check availability
• Block lunch breaks and off-hours with IsBlock
• Send confirmation emails in ActionComplete event

Resource Scheduling (Meeting Rooms, Equipment)

• Configure resources with room/equipment details
• Use Timeline Week/Month view for resource overview
• Enable resource grouping (byDate: false)
• Implement color coding by resource type
• Set resource-specific work hours (StartHourField, EndHourField)

Project Timeline Management

• Use Timeline views with custom intervals (display weeks/months)
• Create milestone events as all-day appointments
• Implement custom event template showing task progress
• Group by project phases using hierarchical resources
• Export to Excel for stakeholder reports

Employee Shift Scheduling

• Use Work Week view with custom workDays
• Configure multiple resources (employees) with timeline grouping
• Implement recurring shift patterns (weekly recurrence)
• Use custom cell templates to show shift details
• Handle shift swaps with drag-drop between resources