The Vue Scheduler, or event calendar, is a fully-featured calendar component that that allows users to manage their time efficiently. It facilitates easy resource scheduling, rescheduling appointments through editor pop-ups, drag and drop, and resizing actions.
A wide variety of built-in view modes are available: day, week, work week, month, agenda, month-agenda, and timeline views. This allows you to easily configure each individual view with different, view-specific options.
Display appointments for a single day or across multiple days.
Display appointments on a single day or multiple days for an entire month.
Load the events virtually and display them as a list in a sequential order grouped by day. An option exists to specify the number of days that load initially in the agenda view.
Display the calendar layout and the events of the currently selected date. A round indicator at the bottom of a date shows the presence of one or more events on that day.
Five built-in timeline views are available: timeline day, timeline week, timeline workweek, timeline month, and timeline year. Each view displays events accurately across a horizontal time axis for a single day or multiple days.
To provide better performance, timeline views load resources and appointments virtually on every scroll action.
Easily configure each individual view mode such as day, week, and month, with different calendar settings. For example, you can enable the grouping feature on month view, and apply event templates on week view.
Options exist to display multiple days, weeks, and months by extending each view mode based on the provided interval count.
The Vue Scheduler has a highly responsive layout and a finely optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows 8 OS.
User-friendly touch gestures and an interactive UI design on schedulers help to produce the best user experience.
The Scheduler user interface adapts automatically on mobile and desktop devices. This helps the application to scale elegantly across all form factors without any additional effort.
Data binds seamlessly with various local and remote data sources such as: JSON, RESTful services, OData services, and WCF services.
The Vue Scheduler loads data on demand by default to reduce the transfer and load times. Proper field mapping is mandatory while binding Scheduler to the data sources with different field names.
You can block specific time ranges on Vue Scheduler to prevent the creation of appointments in that time slot.
The Scheduler provides clear, vibrant, exact representations of appointments across the scheduler timeline, based on their assigned time duration.
There is built-in support for better event handling, such as easier appointment creation and editing using the default event editor or through intuitive drag-and-resize actions. In addition, you can also add custom data fields to both the events and resource data source.
Easily select multiple events at once by pressing and holding the Ctrl key while single-clicking on events. On mobile devices, do the same by tap holding an event, and continuing with single-tapping on the consecutive events.
The customizable tooltip displays event information while the mouse pointer is hovering over the event. Do the same on mobile devices by tapping and holding an event.
Easily configure recurring events to repeat on a daily, weekly, monthly, or yearly basis with integrated recurrence options.
Change the look and feel of Scheduler appointments by customizing their default appearance and style using any HTML or CSS.
Regardless of the system time zone, the Vue Scheduler supports setting the required time zone for the control itself, as well as events.
Built-in support is available for assigning resources to events as well as scheduling resources. Group appointments based on resources or dates. Grouping resources by date provides a quick overview of each resource’s availability. You can also set different working days for each resource.
A built-in option has been added to the Vue Scheduler to automatically increase the height of the rows in month and timeline views when new concurrent appointments are added.
Context menu integrated with Vue Scheduler opens when the cells or appointment is right-clicked.
Real-time appointment data accurately synchronizes with our Vue Scheduler.
Easily synchronize events between our Vue Scheduler and Google or Outlook Calendars via the Google Calendar API or Microsoft Outlook’s Object library.
Bidirectional data communication conveys the server-side appointment updates made on Scheduler to all the connected clients through SignalR.
The Vue Scheduler allows users to export its events in two ways: as an Excel file or as an ICS file.
The Vue Scheduler allows exporting all its events to an Excel document by default. It also provides additional customization options to export custom event data collections.
The Scheduler supports exporting all its event data to iCal format, and it supports importing events from an iCal file into the Scheduler.
The Vue Scheduler inherits almost all the calendar-specific features, such as first day of the week and timescale.
Customize the first day of the week, which defaults to Sunday, as per the default locale. You can utilize this option for individual views, also.
Display the event scheduler layout with specific time durations by hiding unwanted hours.
Customizable timescale options exist to view a timeline of events clearly and allow you to set a different duration.
The active cells of the Scheduler (displayed in white) visually represent the work days and working hours.
Indicates the current date with a highlighted date header, as well as marks accurately the current time on all views.
Hiding weekend days from the Scheduler allows you to display only working days across all views.
Display the week number of the current date range beside the date header in day, week, and work week views. Also, display the same in month view as the first column.
Customize the appearance of any part of the Scheduler interface using HTML and CSS styles.
Change the default appearance of the header bar by adding any kind of CSS, custom text, or image.
A built-in client-side event allows the end users to customize any part of the Scheduler user interface.
Add custom items to the default header bar options. You can hide or show common header bar options.
Out-of-the-box template options allow you to easily customize the cells by adding any kind of text, image, or CSS.
Easily customize pop-ups that open when single-clicking on cells or appointments with your own UI or template design.
The Vue Scheduler offers a built-in method to open the default event editor window programmatically.
The modern and trendy UI design of the Vue Scheduler makes user interactions simpler and more efficient.
Clicking or tapping on events displays their important details, such as subject and timing, along with edit and delete options.
Click and drag the pointer over the scheduler cells for multiple cell selection. You can do the same with keyboard shortcuts.
Clicking on the text indicator (+n more) in month and timeline views will open an event container listing all the hidden appointment details of a day.
The Vue Scheduler provides an intuitive way to navigate back and forth among the date ranges using an inline calendar, and also to navigate between different view modes.
Integrate different date-time formats and cultures. This allows the Vue Scheduler to function globally, thus meeting the diverse needs of different regions.
The Vue Scheduler displays the current date and time by following the globalized date and time formats.
Display the static text, date content, and time mode of the Scheduler following the localized language.
Render the event scheduler following the proper right-to-left conventions, thus displaying the layout from right to left.
The Vue Scheduler is easily accessed by screen readers. Complete keyboard interaction support has also been provided.
The Vue Scheduler has complete WAI-ARIA accessibility support. The Scheduler UI includes high-contrast visual elements, helping visually impaired people have the best viewing experience. Also, the valid UI descriptions are easily accessible through assistive technologies such as screen readers.
Various keyboard shortcuts are available to perform almost all scheduler actions, such as multiple cells or events selection and navigating to other views.
The Scheduler component integrates easily with any web framework:
The Vue Scheduler works well with all modern web browsers such as Chrome, Firefox, Edge, Safari, and IE11. It requires MomentJS poly-fill to make the scheduler time zone conversions work further with the IE11 browser and iOS mobile versions.
Many real-time applications use schedulers as an integral part, thus they serve different purposes based on the project type. Some of the active applications are: Fare Calendar, Meeting Room Calendar, Doctor’s Appointment planner, Hotel Room reservation.
Four built-in SASS-based themes are available such as: Material, Bootstrap, Fabric, and High Contrast.
Simplify theme customization either by overriding the existing SASS styling or creating custom themes by using the Theme Studio application.
Developers can have full control over the UI and behavior of the event Scheduler through its built-in, developer-friendly APIs. The simple and extensible APIs allow you to customize even the complex scheduler functionalities with ease.
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
