Syncfusion Vue Scheduler

A comprehensive scheduling component for Vue applications that provides calendar views, appointment management, resource scheduling, and time-based event visualization with drag-and-drop support.

When to Use This Skill

Use this skill when the user needs to:

• Implement calendar or scheduling functionality in Vue applications
• Create appointment booking or event management systems
• Build resource allocation or meeting scheduler tools
• Display events in day, week, month, timeline, or agenda views
• Handle recurring events with complex recurrence patterns
• Manage multiple resources with grouped scheduling
• Implement drag-and-drop event scheduling
• Create interactive calendars with CRUD operations
• Support multiple timezones in scheduling applications
• Export/import calendar data (ICS format)
• Integrate WebMCP agent-driven scheduling using Scheduler WebMCP tools
• Reserve pre- and post-event time around appointments (preparation, recovery, transition)
• Customize the current time indicator (label, previous dates, stacking order)

Component Overview

The Syncfusion Vue Scheduler is a feature-rich calendar and scheduling component that supports:

• Multiple Views: Day, Week, Work Week, Month, Year, Agenda, Timeline views
• Event Management: Normal, all-day, spanned, and recurring events with exceptions
• Event Buffer: Pre- and post-event reserved time (preparation, recovery, transition) with custom buffer template
• WebMCP Integration: Agent-driven scheduling via enableWebMcp and webMcpSettings with built-in WebMCP tools
• Custom Current Time Indicator: Configurable current time line with custom label, previous-dates range, and stacking order
• Resource Scheduling: Single and multiple resource grouping with custom templates
• Drag & Drop: Move and resize events across time slots and resources
• Data Binding: Local and remote data sources with field mapping
• Customization: Cell templates, event templates, and comprehensive styling options
• Interactions: Context menus, clipboard operations, keyboard shortcuts
• Accessibility: Full WCAG compliance with keyboard navigation and screen reader support

Documentation and Navigation Guide

Complete coverage of Syncfusion Vue Scheduler with 20 comprehensive reference files covering all aspects of scheduler implementation.

Getting Started

📄 Read: references/getting-started.md

• Installation @syncfusion/ej2-vue-schedule and theme package
• CSS reference using Syncfusion theme packages
• Module injection and provide setup for both Vue 2/3
• Basic scheduler initialization with selectedDate and currentView
• Creating first appointments with eventSettings
• CSS import paths for all required components

Appointments and Events

📄 Read: references/appointments.md

• Event types: normal, all-day, spanned, recurring appointments
• Event fields and custom field mapping
• Recurrence rules and patterns (FREQ, INTERVAL, COUNT, UNTIL, BYDAY, etc.)
• Recurrence exceptions and editing individual occurrences vs. series
• Drag and drop with dragStart/drag/dragStop events
• Resizing events with resize controls
• Inline appointment editing
• Event retrieval methods (getEventDetails, getCurrentViewEvents, getEvents)

Appointment Behavior and Validation

📄 Read: references/appointment-behavior-and-validation.md

• Setting minimum appointment height
• Blocking dates and times
• Readonly events and restricting event creation
• Differentiating past events and disabling past dates
• Appointments occupying entire cells and limiting displayed events
• Tooltip and filtering operations
• Appointment selection and deleting multiple appointments via Delete key
• Preventing overlaps and validating recurrence rules

Views and Navigation (Display Modes)

📄 Read: references/views.md

• Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda views
• Timeline views (TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, TimelineYear)
• View-specific configuration (startHour, endHour, workDays, interval, dateFormat)
• Multi-day, multi-week, and multi-month view intervals
• View templates (cellTemplate, dateHeaderTemplate, eventTemplate, resourceHeaderTemplate)
• Custom header rows for timeline views
• First day of week configuration
• Hidden weekend support for all views
• Readonly view modes
• Virtual scrolling in Agenda and Timeline views
• Week number display
• Agenda days count and hideEmptyAgendaDays
• Limit overlapping events with maxEventStack

Data Binding (Local and Remote)

📄 Read: references/data-binding.md

• Local data source with array of objects
• Remote data binding with DataManager (ODataV4Adaptor, WebApiAdaptor, UrlAdaptor)
• Custom field mapping (id, subject, startTime, endTime, location, description, isAllDay, recurrenceRule, isReadonly)
• Server-side filtering with includeFiltersInQuery
• Custom adaptors extending ODataV4Adaptor with processResponse
• Loading data via AJAX Post with callbacks
• Passing additional parameters to server with Query.addParams
• Handling failure actions with actionFailure event
• CRUD operations with UrlAdaptor and server-side controller code
• C# controller implementation with EditParams (Insert/Update/Remove logic)
• Google Calendar integration with WebApiAdaptor and dataBinding transformation
• DataManager configuration with crossDomain support

Resources and Grouping

📄 Read: references/resources.md

• Resource fields and properties (field, title, name, allowMultiple, dataSource, idField, textField, colorField, etc.)
• Resource data binding (local JSON and remote DataManager)
• Single and multiple resource assignment
• Single-level and multi-level hierarchical resource grouping
• Resource grouping by date (byDate property)
• One-to-one resource grouping (byGroupID: false)
• Shared events across resources with allowGroupEdit
• Vertical vs. Timeline resource view implementation

Resource Customization

📄 Read: references/resource-customization.md

• Custom working hours per resource
• Custom working days per resource
• Resource header templates with customization
• Multi-column resource headers (Timeline only)
• Customizing parent resource cells with renderCell event
• Custom CSS classes per resource
• Expanded/collapsed state for resources (Timeline views)

Time Configuration (Timescale and Timezone)

📄 Read: references/timescale-timezone.md

• Timescale configuration (enable, interval, slotCount, templates)
• Slot duration configuration (30-min, 15-min, 10-min, 5-min intervals)
• Hiding timescale and custom time format
• Major and minor slot templates
• Scheduler timezone configuration with IANA timezone names
• Common timezones (America/New_York, Europe/London, Asia/Tokyo, etc.)
• UTC display for global applications
• Per-event timezone with startTimezone and endTimezone fields
• Timezone conversion helper methods (convert, removeLocalOffset, addLocalOffset)
• Timezone dropdown in event editor
• Browser local timezone (no timezone setting)
• Daylight saving time handling

Customization

📄 Read: references/customization.md

• Cell dimensions with CSS classes (height, width for all views)
• Cell templates for workCells, monthCells, allDayCells, dateHeader cells
• RenderCell event with elementType checking (workCells, monthCells, dateHeader, resourceGroupCells, etc.)
• Cell header template for Month view
• Date header customization for Week/Day views
• Minimum and maximum date constraints
• Weekend cell customization and highlighting
• Custom working hours and working days
• Multi-cell and multi-row selection control
• Slot availability checking with isSlotAvailable method

Editor Templates

📄 Read: references/editor-template.md

• Event editor overview and modes (Add, Edit, EditOccurrence, EditSeries)
• Customizing editor field labels with title property
• Customizing editor buttons via localization (L10n)
• Field validation rules (required, regex, custom validators)
• Adding custom fields to default editor
• Creating fully custom editor template
• Quick info template customization (header, content, footer)
• Disabling editor with readonly or popupOpen event
• Editor field types and validation

Header Configuration

📄 Read: references/header-configuration.md

• Header bar customization and styling
• Header rows for timeline views (Year, Month, Date)
• Date header template for all views
• Custom toolbar actions and buttons
• Header navigation (previous, today, next)
• Hiding/showing header elements

CRUD Operations

📄 Read: references/crud-operations.md

• Adding events: addEvent method, multiple events batch add
• Editing events: saveEvent method with action types
• Deleting events: deleteEvent by ID or object, multiple delete
• Drag and drop with allowDragAndDrop module
• Event resizing with allowResizing module
• ActionBegin event for validation and cancellation
• ActionComplete event for post-operation handling
• ActionFailure event for error handling
• Readonly mode and per-event readonly flag
• Validation for time ranges and slot availability
• Preventing overlaps with isSlotAvailable

Clipboard Operations

📄 Read: references/clipboard.md

• Enabling clipboard with allowClipboard property
• Copy/cut/paste keyboard shortcuts (Ctrl+C, Ctrl+X, Ctrl+V)
• Programmatic API (copy(), cut(), paste() methods)
• Context menu integration with custom menu items
• Before/after paste events for data modification
• Behavior notes (copy creates duplicate, cut moves event)
• Multiple paste of copied events
• Cross-application paste support

Context Menu

📄 Read: references/context-menu.md

• Custom context menu integration with ContextMenu component
• Menu setup with items configuration
• BeforeOpen event for menu display logic
• OnSelect event for menu action handling
• Showing/hiding menu items based on context (cell vs. event)
• Recurring event menu with sub-items (Edit/Delete Occurrence/Series)
• Custom menu items (Print, Export, Email, etc.)
• Mobile context menu with tap-hold support
• Custom styling with CSS classes

Localization and Accessibility

📄 Read: references/localization-accessibility.md

• Locale configuration and language translation (en, fr, de, ja, etc.)
• L10n class for custom text translation
• Date and time formatting with dateFormat and timeFormat (12/24-hour, ISO, locale-aware)
• RTL (right-to-left) support for Arabic, Hebrew
• WCAG 2.0 compliance level AA
• Keyboard shortcuts (Tab, Enter, Space, Delete, Ctrl+A, etc.)
• ARIA attributes (role, aria-label, aria-describedby)
• Screen reader support and announcements
• Focus management and visible focus indicator

Advanced Features

📄 Read: references/advanced-features.md

• Virtual scrolling for large datasets in Agenda/Timeline views
• Exporting to PDF and Excel formats
• Printing scheduler with custom templates
• State persistence (enablePersistence) saving view/date/scroll position
• Row auto height for overlapping events
• Event templates for custom rendering
• Quick info templates
• Block time slots (marking unavailable times)
• ICS calendar import/export
• Tooltip on event hover
• Inline editing support
• Responsive adaptive UI

WebMCP Integration

📄 Read: references/webmcp-integration.md

• Enable Scheduler WebMCP tool registration using enableWebMcp
• Configure tool selection, prefixing, and exposure via webMcpSettings
• Control tool execution via beforeWebMcpToolExecute

Recurrence Editor and Calendar Modes

📄 Read: references/recurrence-editor-calendar-modes.md

• Recurrence editor and recurrence date generation
• Gregorian and Islamic calendar modes
• Working days, hours, and custom time ranges
• Scheduler styling and theming
• Performance optimization tips
• Best practices for production use

Event Buffer

📄 Read: references/EventBuffer.md

• Reserving pre- and post-event time (preparation, recovery, transition) on every appointment
• eventSettings.enableBuffer activation and bufferBefore / bufferAfter field mapping
• Custom bufferTemplate slot for rendering the buffer pill (icon, label, duration)
• Buffer-aware overlap detection with allowOverlap=false and dragStop validation
• Buffer support in Day, Week, WorkWeek, TimelineDay, TimelineWeek, and TimelineWorkWeek views
• When to use and when not to use EventBuffer; constraints, validation, and best practices

Custom Current Time Indicator

📄 Read: references/CustomCurrentTimeIndicator.md

• showTimeIndicator master toggle and currentTimeIndicatorSettings behavior object
• Custom label with the current time (showTime), previous-dates range (showPreviousDates)
• Stacking order between the indicator and appointment cells (onTop)
• Support in Day, Week, WorkWeek, TimelineDay, TimelineWeek, and TimelineWorkWeek views
• Reactive runtime toggles via ref and computed for settings panels
• When to use and when not to use; constraints, validation, and best practices

Quick Start Example

Basic Scheduler with Appointments

<template>
  <div id='app'>
    <ejs-schedule 
      height='550px' 
      :selectedDate='selectedDate'
      :eventSettings='eventSettings'>
    </ejs-schedule>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';

const selectedDate = new Date(2024, 0, 15);
const eventSettings = {
  dataSource: [
    {
      Id: 1,
      Subject: 'Team Meeting',
      StartTime: new Date(2024, 0, 15, 10, 0),
      EndTime: new Date(2024, 0, 15, 11, 30),
      IsAllDay: false
    },
    {
      Id: 2,
      Subject: 'Project Review',
      StartTime: new Date(2024, 0, 16, 14, 0),
      EndTime: new Date(2024, 0, 16, 15, 30),
      IsAllDay: false
    }
  ]
};

// Inject required view modules
provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/schedule/index.css";
</style>

Common Patterns

Recurring Event with Exceptions

<script setup>
const eventSettings = {
  dataSource: [
    {
      Id: 1,
      Subject: 'Daily Standup',
      StartTime: new Date(2024, 0, 15, 9, 0),
      EndTime: new Date(2024, 0, 15, 9, 30),
      RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=10',
      RecurrenceException: '20240117T090000Z,20240119T090000Z'
    }
  ]
};
</script>

Resource Grouping

<template>
  <ejs-schedule 
    :eventSettings='eventSettings'
    :group='group'>
    <e-resources>
      <e-resource 
        field='RoomId' 
        title='Room' 
        name='Rooms'
        :dataSource='roomData'
        textField='Name' 
        idField='Id' 
        colorField='Color'>
      </e-resource>
    </e-resources>
  </ejs-schedule>
</template>

<script setup>
const roomData = [
  { Id: 1, Name: 'Room A', Color: '#ffaa00' },
  { Id: 2, Name: 'Room B', Color: '#357cd2' }
];

const group = { resources: ['Rooms'] };
</script>

Custom Field Mapping

<script setup>
const eventSettings = {
  dataSource: appointmentData,
  fields: {
    id: 'EventId',
    subject: { name: 'Title' },
    startTime: { name: 'From' },
    endTime: { name: 'To' },
    location: { name: 'Place' },
    description: { name: 'Notes' },
    isAllDay: { name: 'FullDay' }
  }
};
</script>

Timeline View Configuration

<template>
  <ejs-schedule 
    :selectedDate='selectedDate'
    :eventSettings='eventSettings'>
    <e-views>
      <e-view option='TimelineDay'></e-view>
      <e-view option='TimelineWeek'></e-view>
      <e-view option='TimelineMonth'></e-view>
    </e-views>
  </ejs-schedule>
</template>

<script setup>
import { provide } from "vue";
import { TimelineViews, TimelineMonth } from '@syncfusion/ej2-vue-schedule';

provide('schedule', [TimelineViews, TimelineMonth]);
</script>

Event Buffer

<template>
  <ejs-schedule
    :selectedDate="selectedDate"
    :currentView="currentView"
    :allowOverlap="false"
    :eventSettings="eventSettings">
    <e-views>
      <e-view option="Day"></e-view>
      <e-view option="TimelineDay"></e-view>
      <e-view option="TimelineWeek"></e-view>
    </e-views>

    <template v-slot:bufferTemplate="{ data }">
      <span class="buffer-duration">
        {{ data.bufferType === 'before'
            ? data.data.bufferBefore
            : data.data.bufferAfter }} min
      </span>
    </template>
  </ejs-schedule>
</template>

<script setup>
import { provide } from "vue";
import {
  ScheduleComponent as EjsSchedule,
  ViewDirective as EView,
  ViewsDirective as EViews,
  Day,
  TimelineViews
} from '@syncfusion/ej2-vue-schedule';

const eventSettings = {
  enableBuffer: true,
  dataSource: [
    {
      Id: 1,
      Subject: 'Knee Replacement',
      StartTime: new Date(2024, 0, 15, 9, 0),
      EndTime: new Date(2024, 0, 15, 10, 30),
      IsAllDay: false,
      bufferBefore: 30, // 30 minutes preparation
      bufferAfter: 45   // 45 minutes recovery
    }
  ],
  bufferTemplate: 'bufferTemplate',
  fields: {
    bufferBefore: { name: 'bufferBefore' },
    bufferAfter: { name: 'bufferAfter' }
  }
};

provide('schedule', [Day, TimelineViews]);
</script>

Custom Current Time Indicator

<template>
  <ejs-schedule
    width="100%"
    height="550px"
    :selectedDate="currentDate"
    currentView="TimelineWeek"
    :showTimeIndicator="showTimeIndicator"
    :currentTimeIndicatorSettings="currentTimeIndicatorSettings"
    :timeScale="{ enable: true }"
    :eventSettings="eventSettings">
    <e-views>
      <e-view option="Day"></e-view>
      <e-view option="Week"></e-view>
      <e-view option="WorkWeek"></e-view>
      <e-view option="TimelineDay"></e-view>
      <e-view option="TimelineWeek"></e-view>
      <e-view option="TimelineWorkWeek"></e-view>
    </e-views>
  </ejs-schedule>
</template>

<script setup>
import { ref, computed, provide } from "vue";
import {
  ScheduleComponent as EjsSchedule,
  ViewsDirective as EViews,
  ViewDirective as EView,
  Day,
  Week,
  WorkWeek,
  TimelineViews
} from '@syncfusion/ej2-vue-schedule';

const currentDate = new Date();

const showTimeIndicator = ref(true);
const showTime = ref(true);
const showPreviousDates = ref(true);
const onTop = ref(true);

const currentTimeIndicatorSettings = computed(() => ({
  showTime: showTime.value,
  showPreviousDates: showPreviousDates.value,
  onTop: onTop.value
}));

const eventSettings = { dataSource: [] };

provide('schedule', [Day, Week, WorkWeek, TimelineViews]);
</script>

Key Props and Events

Essential Properties

Essential Events

Essential Methods

Installation

Install the Syncfusion Vue Schedule package:

npm install @syncfusion/ej2-vue-schedule --save

Import required CSS themes:

import "@syncfusion/ej2-material3-theme/styles/schedule/index.css";

Module Injection

The Scheduler requires view modules to be injected. Only inject the views you need:

import { 
  Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda,
  TimelineViews, TimelineMonth, TimelineYear,
  DragAndDrop, Resize
} from '@syncfusion/ej2-vue-schedule';

provide('schedule', [Day, Week, Month, Agenda, DragAndDrop]);

Related Components

• Recurrence Editor: Standalone component for creating recurrence rules
• DatePicker/DateRangePicker: For date selection in custom editors
• TimePicker: For time selection in custom editors
• DropDownList: For resource selection in custom editors

Best Practices

1. Module Injection: Only inject view modules you actually use to reduce bundle size
2. Field Mapping: Use custom field mapping when data structure differs from default
3. Performance: Enable virtual scrolling for large datasets (timeline views)
4. Timezones: Set scheduler timezone explicitly when working with multiple timezones
5. Event IDs: Always provide unique IDs for events to ensure proper CRUD operations
6. Validation: Use actionBegin event to validate data before saving
7. Templates: Use templates for custom event rendering and cell customization
8. Accessibility: Enable keyboard navigation and provide proper ARIA labels
9. Responsive: Use CSS media queries to adjust scheduler for mobile devices
10. State Management: Use state persistence to save user preferences
11. Custom Current Time Indicator: Use currentTimeIndicatorSettings for behavior (label, previous dates, stacking order) and CSS for visual styling; do not treat the settings object as a style API

Troubleshooting

Events not displaying: Verify event fields match the scheduler's expected field names or use field mapping in eventSettings.

View not loading: Ensure the required view module is properly injected via the provide method.

Drag and drop not working: Import and inject the DragAndDrop module.

Timezone issues: Set the scheduler's timezone property and ensure event times are in correct format.

Custom fields not saving: Map custom fields in eventSettings.fields configuration.

Performance issues: Enable virtual scrolling for timeline views with many events or resources.

Data not loading from server: Verify CORS settings, DataManager adaptor configuration, and network requests in browser DevTools.

Recurring events not generating occurrences: Check RecurrenceRule syntax (FREQ, INTERVAL, COUNT, UNTIL parameters) and verify rule is valid.

Buffer pills not rendering: Confirm eventSettings.enableBuffer is true, the bufferBefore and bufferAfter fields are mapped under eventSettings.fields, and the events carry numeric values for those fields.

Current time indicator not visible: Confirm showTimeIndicator is true, the active view has a time axis (Day, Week, WorkWeek, TimelineDay, TimelineWeek, TimelineWorkWeek), and timeScale.enable is set to true. The indicator does not render in Month, Year, or Agenda views.