Syncfusion Vue Scheduler

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)

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
• 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 17 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

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

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>

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-base/styles/material3.css';
import '@syncfusion/ej2-buttons/styles/material3.css';
import '@syncfusion/ej2-calendars/styles/material3.css';
import '@syncfusion/ej2-dropdowns/styles/material3.css';
import '@syncfusion/ej2-inputs/styles/material3.css';
import '@syncfusion/ej2-navigations/styles/material3.css';
import '@syncfusion/ej2-popups/styles/material3.css';
import '@syncfusion/ej2-vue-schedule/styles/material3.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

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.