Vue Scheduler Component for Building Calendar & Scheduling Apps

• Highly responsive layout and a finely optimized design for desktops, tablets, and mobile phones.

• Different basic views like day, week, workweek, month, and year of calendar mode and timeline mode.

• Virtual scrolling allows users to load large numbers of resources and events dynamically.

• Adapts to different time zones instantly.

• Multiple resource grouping based on the timeline, horizontal, hierarchical, and date views.

• One of the best Vue Scheduler in the market that offers feature-rich UI to interact with the software.
• Easy synchronization of events with Google and Outlook Calendars.

• Simple configuration and API.

• Support for all modern browsers.

• Expansive learning resources such as demos and documentation to learn quickly and get started with Vue Scheduler.

You can find our Vue Scheduler demo, which demonstrates how to render and configure the Scheduler.

You can programmatically add events to the Syncfusion Vue Scheduler component using the addEvent() method. This method allows you to add either a single event or a collection of events simultaneously to the schedule. For more information, refer to our detailed documentation on adding, editing, and removing events in Vue Scheduler.

You can also perform CRUD operations on events using these methods:

• addEvent() - To add new events
• saveEvent() - To update existing events
• deleteEvent() - To remove events

These methods enable you to programmatically manage events in your Vue Schedule component without directly manipulating the data source.

You can reschedule appointments by simply dragging and dropping them. To enable this functionality, inject the DragAndDrop module and set the allowDragAndDrop property to true.

On mobile devices, events can be moved by tapping and holding an appointment, then dragging it to the desired time or location.

To learn more about dragging external items and advanced drag-and-resize capabilities, watch this video. For additional details, refer to our comprehensive documentation on drag-and-drop appointments in the Vue Scheduler.

The Syncfusion Vue Scheduler fully supports recurring appointments, allowing you to easily create events that repeat on a daily, weekly, monthly, or yearly basis with integrated recurrence options.To configure recurring appointments in the Vue Scheduler component, set the RecurrenceRule property in your event data. The RecurrenceRule follows the iCalendar (RFC 5545) specifications.For additional details, refer to our comprehensive documentation on recurring events in the Vue Scheduler.

Resource and grouping support enables the Scheduler to be shared across multiple resources. Appointments associated with each resource are displayed under their corresponding resource.

Resources in the Scheduler are arranged in rows or columns, with dedicated spacing to ensure all related appointments are clearly visible on a single page. The Scheduler also supports multilevel resource grouping, allowing for hierarchical organization of resources.

Depending on the view, resources can be displayed as expandable groups in timeline views or as a vertical hierarchy in calendar views, providing flexible and intuitive scheduling layouts.

For additional details, refer to the comprehensive documentation on resources and grouping in the Vue Scheduler.

Virtual scrolling is a powerful feature in the Syncfusion Vue Schedule component that significantly improves performance when working with large datasets. This feature allows the component to load only visible items in the viewport and load remaining items as you scroll, which is especially beneficial when handling numerous resources and appointments.

To enable virtual scrolling in your Vue Schedule component, set the allowVirtualScrolling property to true within view-specific settings.

For more information, refer to our detailed documentation available on Virtual scrolling in Vue Scheduler.

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

A good place to start would be our comprehensive getting started documentation.

To configure day, week, and month views in the Vue Scheduler component, you need to properly import and inject the required modules for each view. For more information, refer to our detailed documentation on module injection in the Vue Schedule component.

To enable resizing functionality in the Vue Scheduler, inject the resize module and ensure that the allowResizing property is set to true. For more information, refer to our detailed documentation appointment resizing in the Vue Scheduler.

By default, the Vue Scheduler component operates using the system’s current timezone. To schedule appointments in a different timezone, set the timezone property in the Scheduler.In addition to configuring a global timezone, you can assign timezones to individual appointments by specifying the startTimezone and endTimezone properties within the event fields collection.For additional details, refer to our comprehensive documentation on timezones in the Vue Scheduler.

Yes, events can be reordered using the sortComparer property. By default, the Scheduler renders overlapping events based on their start and end times. You can customize the display order of overlapping events by defining a custom sorting logic through the sortComparer property within eventSettings, allowing events to be ordered based on custom fields. For more information, refer to our detailed documentation on reordering events in the vue Scheduler.