We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Overview

The HTML5 JavaScript Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently. It features easy resource scheduling, rescheduling appointments through editor pop-ups, drag and drop, and a resizing action.


Multiple scheduler views

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.

Day, week, and work week views

Display appointments for a single day or across multiple days.

Month view

Display appointments on a single day or multiple days for an entire month.

Agenda view

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 to load initially in the agenda view.

Month 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.


Timeline views

Four built-in timeline views are available: timeline day, timeline week, timeline work week, and timeline month. Each view displays events accurately across a horizontal time axis for a single day or multiple days.


Unique view configurations

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 day view and week view based on different categories.


Extensible view intervals

Options exist to display multiple days, weeks, and months by extending each view mode based on the provided interval count.


Responsive and touch-friendly

The JavaScript Scheduler (event calendar) 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.

Illustration of touch support of HTML5 JavaScript scheduler

Touch support

User-friendly touch gestures and an interactive UI design on schedulers help to produce the best user experience.

Illustration of adaptive UI of HTML5 JavaScript scheduler

Adaptive UI

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 binding

Data binds seamlessly with various local and remote data sources such as: JSON, RESTful services, OData services, and WCF services.

The HTML5 JavaScript 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.

Data binding options available in HTML5 JavaScript scheduler


Advanced event handling options

The Scheduler provides clear, vibrant, exact representations of appointments across the scheduler timeline, based on their assigned time duration.

Illustration of add and edit capabilities of HTML5 JavaScript scheduler

Add and edit capabilities

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.

Illustration of multiple event selection in HTML5 JavaScript scheduler

Multi-event selection

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.

Illustration of event tooltips of HTML5 JavaScript scheduler

Tooltip

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.

Illustration of recurring events of HTML5 JavaScript scheduler

Recurring events

Easily configure recurring events to repeat on a daily, weekly, monthly, or yearly basis with integrated recurrence options.

Illustration of event customization with HTML5 JavaScript scheduler

Appearance customization

Change the look and feel of events by customizing their default appearance and style using any HTML or CSS.

Illustration of time zone support of HTML5 JavaScript scheduler

Time zone

Regardless of the system time zone, the JavaScript Scheduler supports setting the required time zone for the control itself, as well as events.


Multiple resources and grouping

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.


Real-time data synchronization

Real-time appointment data accurately synchronizes with our HTML5 JavaScript Scheduler.

Illustration of Google calendar integration with HTML5 JavaScript scheduler

Outlook and Google Calendar integration

Easily synchronize events between our HTML5 JavaScript Scheduler and Google/Outlook Calendar via the Google Calendar API or Microsoft Outlook’s Object library.

Illustration of real-time updates of HTML5 JavaScript scheduler

Incredible real-time updates

Bidirectional data communication conveys the server-side appointment updates made on Scheduler to all the connected clients through SignalR.


Completely customizable UI

Customize the appearance of any part of the Scheduler interface using HTML and CSS styles.

Illustration of date header customization in HTML5 JavaScript scheduler

Date header

Change the default appearance of the header bar by adding any kind of CSS, custom text, or image.

Illustration of complete HTML5 JavaScript scheduler customization

Complete Scheduler UI

A built-in client-side event allows the end users to customize any part of the Scheduler UI before it displays on the page.

Illustration of common header bar in HTML5 JavaScript scheduler

Header bar

Add custom items to the default header bar options. You can hide or show common header bar options.

Illustration of cell customization with HTML5 JavaScript scheduler

Scheduler cells

Out-of-the-box template options allow you to easily customize the scheduler cells by embedding any kind of text, image, or CSS.

Illustration of quick popups in HTML5 JavaScript scheduler

Quick pop-ups

Easily customize pop-ups that open when single-clicking on cells or appointments with your own UI or template design.

Illustration of event editor of JavaScript scheduler

Open event editor externally

The HTML5 JavaScript Scheduler offers a built-in method to open the default event editor window programmatically.


User-friendly interactions

The modern and trendy UI design of the JavaScript Scheduler makes the user interactions simpler and more efficient.

Pop-up displaying event information

Quick event overview

Clicking or tapping on events displays their important details, such as subject and timing, along with edit and delete options.

JavaScript scheduler cell selection

Cell selection

Click and drag the pointer over the scheduler cells for multiple cell selection. You can do the same with keyboard shortcuts.

Event container displayed in month calendar

Event container

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.

Navigation options in JavaScript scheduler

Quick navigation

The HTML5 JavaScript 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.


Globalization and localization

Integrate different date-time formats and cultures. This allows the JavaScript Scheduler to function globally, thus meeting the diverse needs of different regions.

JavaScript scheduler with globalization support

Globalization

The HTML5 JavaScript Scheduler displays the current date and time by following the globalized date and time formats.

JavaScript scheduler with localization support

Localization

Display all the static text, date content, and time mode of the scheduler following the localized language.

JavaScript event calendar displaying from right to left

Right to left (RTL)

Render the event scheduler following the proper right-to-left conventions, thus displaying the layout from right to left.


Accessibility

The HTML5 JavaScript Scheduler is easily accessed by screen readers. Complete keyboard interaction support has also been provided.

Accessibility enabled JavaScript scheduler

Completely accessible

The JavaScript Scheduler has complete WAI-ARIA accessibility support. The Scheduler UI includes high-contrast visual elements, helping visually impaired people to have the best viewing experience. Also, the valid UI descriptions are easily accessible through assistive technologies such as screen readers.

Keyboard interactive JavaScript event calendar

Keyboard interactive

Various keyboard shortcuts are available to perform almost all the scheduler actions, such as multiple cells or events selection and navigating to other views.


Web framework integration

As a pure JavaScript component, our event scheduler integrates easily with any web framework:

JavaScript event calendar illustration for web framework support


Supported web browsers for JavaScript scheduler

Supported browsers

The HTML5 JavaScript 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.


Real-time applications

Many real-time applications use schedulers as an integral part, thus serving 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.

JavaScript event calendar used in real-time applications


Theme illustration for JavaScript scheduler

Built-in and customizable themes

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.


Developer-friendly APIs

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.


70+ JAVASCRIPT UI CONTROLS

Integrates with Top Frameworks

Built-in integration with the most popular third-party frameworks, like Angular 2+, and React.

Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon 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.Close Icon