The JavaScript Scheduler control was developed from scratch using pure JavaScript, HTML, and CSS. The Scheduler is available with JavaScript ES6 and ES5 modes. This control has a rich set of features that can be enabled on a modular basis. We are going to look at the top 10 features in this blog:
The virtual loading, also called lazy loading, helps achieve better performance on rendering. The Scheduler has virtual scrolling support to load a large number of resources and events on demand. The appointments and resources will be loaded instantly as you scroll when you set the allowVirtualScrolling property to true.
You can see a live demo for this key feature.
The look and feel of all Scheduler UI elements can be easily customized to meet your application needs using HTML and CSS styles.
The following UI elements can be customized:
The Scheduler was designed with a mobile-first approach. So, its user interface is fully responsive on mobile devices. The interaction functionalities seamlessly work with touch events and gestures such as drag-and-drop actions, resizing, scrolling, and CRUD actions. To drag and drop appointments in mobile devices, tap and hold an event, and then move it to a new time slot.
While grouping resources in mobile, the Scheduler automatically converts their layout to a compact view mode that gives you clear visibility of the resources and their appointments. You can view the details of all the appointments one by one using the resource navigator.
The themes (Material, Bootstrap, and more) are also designed to give a better user experience with mobile devices.
The drag-and-drop and resize interaction features play a major role in appointment-rescheduling applications. The resize feature is used to extend or shorten the event timing by resizing it. The event timing is rescheduled by simply dragging and dropping appointments to a desired time slot. These features are controlled using the allowDragAndDrop and allowResizing properties.
Also, the Scheduler allows you to drag and drop appointments outside the Scheduler onto external targets. You can also drag items from external sources and drop them onto the Scheduler.
The Scheduler provides 11 varieties of calendar views that enable users to view their events with more convenient layouts. The views can be easily configured with individual view settings using the view property.
The different types of views that are supported by JavaScript Scheduler are:
The views property is used to configure the views your schedule needs. The currentView property allows you to choose the initially selected view.
The views:
This demo demonstrates the different views of the Scheduler control.
These views display events as a list in sequential order grouped by day. Set the currentView to “Agenda” to enable these views by default in a schedule.
Types of agenda views:
Timeline views visualize appointments with clear event representation using a separate horizontal time axis. The views and currentView properties are used to configure the timeline views, as well.
Types of timeline views:
The timeline feature is used to design applications like a meeting room calendar or conference room.
You can create a view with a custom range of dates. For example, you can create a view with three days, two weeks, or four months. This functionality can be achieved by using the ‘interval’ and ‘option’ fields of the views property.
Check out a demo.
The JavaScript Scheduler provides a flexible option to group its appointments based on groups. The major customer requirements for their scheduling-oriented applications center on multiple resources and grouping, along with the timeline layout.
The data for resources can be bound separately from local or remote data sources using the resources property. Also, you can configure different working days by resource.
Resource grouping options:
The Scheduler inherits all the calendar-related features:
Recurring appointments occur more than once, i.e. the event reoccurs on a daily, weekly, monthly, or yearly basis. For example, you can schedule a meeting on every Monday at 10 a.m. to discuss project statuses using these recurring appointments. There is no additional setting to enable the recurrence option when creating appointments. You can check this demo for details on recurrence appointments.
The Scheduler extends its recurrence editor to act as an independent module; it is used to generate recurrence rules and set up the recurring appointments.
The following links demonstrate how you generate and apply recurrence rules:
For an event calendar, the time zone is an important feature. Users can maintain database servers with different time zones, and applications can be hosted with another time zone. Scheduler works great with different time zones and considers daylight saving time a built-in time zone. So, users can view their appointments without variations in timings.
By default, the JavaScript Scheduler behaves by picking up the local time zone, but the time zone can be controlled by specifying it externally for a schedule using the timezone property.
The Islamic calendar, or Hijri calendar, is a lunar calendar that consists of 354 or 355 days in a year. To learn more about the Islamic calendar, refer to this Wikipedia page.
Change the calendarMode to Islamic to render the Hijri calendar through a separate module. The Islamic schedule also supports all Gregorian calendar features.
Find more details about this calendar in this User Guide.
Apart from these features, the Scheduler has a lot more to offer, such as globalization, export to Excel and ICS files, a context menu, and data binding from different data sources. These can be used to design a real-time application, like Outlook and Google Calendar.
The JavaScript Scheduler is available in ES5 mode, as well as for Angular, React, Vue, ASP.NET MVC, ASP.NET Core, and Blazor.
If you have any questions about our applications, please let us know in the comments below. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are happy to assist you!
If you liked this post, we hope you will also enjoy the following posts that describe how to design real-time applications using Scheduler:
[Meeting room calendar] https://www.syncfusion.com/blogs/post/creating-a-meeting-room-calendar-using-the-syncfusion-javascript-scheduler.aspx
[Airfare calendar] https://www.syncfusion.com/blogs/post/designing-airfare-calendar-using-pure-javascript-scheduler2.aspx
[Appointment planner] https://ej2.syncfusion.com/showcase/angular/appointmentplanner/#/calendar