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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The HTML5/JavaScript (JS) Scheduler, or event calendar, is a full-featured calendar control 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.


Multiple scheduler views

A wide variety of built-in view modes are available: day, week, workweek, month, agenda, month-agenda, year, and timeline. This allows you to easily configure each individual view with different, view-specific options.

Day, week, and workweek 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 events virtually and display them as a list in a sequential order grouped by day. 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.

Year view

Year view displays all the months of a particular year in a calendar view format. In that calendar view, dates containing appointments are highlighted with dots placed under the date. When you click on the date, the event pop-up will be displayed and the events will be listed.


Timeline views

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.


Unique view configurations

Easily configure each individual view mode with different calendar settings. For example, you can enable the grouping feature for the month view and apply event templates to the week view.


Extensible view intervals

Display multiple days, weeks, and months by extending each view mode based on the provided interval count.


Inline appointment

With this feature enabled, users can create and edit appointments inline through a single click on the scheduler cells or on an existing appointment’s subject. Pressing Enter after the new subject text is typed in the inline text box will update and save the appointment appropriately.


Responsive and touch-friendly

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

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.


Block time interval

You can block specific time ranges to prevent the creation of appointments in those time slots.


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 Scheduler appointments by customizing their default appearance and style using any HTML or CSS.

Illustration of time zone support in 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.


Row auto height

Automatically increase the height of the rows in month and timeline views when new concurrent appointments are added.


Context menu

The context menu integrated with JavaScript Scheduler opens when a cell or appointment is right-clicked.


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


Exporting

Export its events in two ways: as an Excel file or as an ICS file.

Illustration of Excel export support in HTML5 JavaScript Scheduler.

Export to Excel

The HTML5 JavaScript Scheduler allows you to export all its events to an Excel document by default. It also provides additional customization options to export custom event data collections.

Illustration of export and import ICS files in HTML5 JavaScript Scheduler.

Export and import ICS

The Scheduler supports exporting all its event data to iCal format, and it supports importing events from an iCal file into the Scheduler.


Feature-rich calendar options

The HTML5 JavaScript Scheduler inherits almost all the calendar-specific features, such as first day of the week and timescale.

Illustration of first day of the week of HTML5 JavaScript Scheduler.

First day of the week

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.

Illustration of setting start and end hours on HTML5 JavaScript Scheduler.

Custom start and end hours

Display the event scheduler layout with specific time durations by hiding the unwanted hours.

Illustration of timescale options of HTML5 JavaScript Scheduler.

Flexible timescale

Customizable timescale options exist to view a timeline of events clearly and allow you to set a different duration.

Illustration of working time of HTML5 JavaScript Scheduler.

Working time

The active cells of the Scheduler (displayed in white) visually represent the work days and working hours.

Illustration of current time highlighting in HTML5 JavaScript Scheduler.

Highlighting current time

Indicates the current date with a highlighted date header, as well as marks accurately the current time on all views.

Illustration of hiding weekend days in HTML5 JavaScript Scheduler.

Hiding weekend days

Hiding weekend days in the Scheduler allows you to display only working days across all views.

Illustration of displaying week numbers in HTML5 JavaScript Scheduler.

Week number display

Display the week number of the current date range beside the date header in day, week, and workweek views. Also, display the same in month view as the first column.


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 user interface.

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 cells by adding any kind of text, image, or CSS.

Illustration of quick pop-ups 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 modes 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.


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 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 these web frameworks:

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: 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: Material, Bootstrap, Fabric, and high contrast.

Simplify theme customization either by overriding the existing SASS styling or creating custom themes 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 complex Scheduler functionalities with ease.




65+ JAVASCRIPT UI CONTROLS

Frequently Asked Questions

Read independent,
authenticated reviews
on G2

Download Now Pricing

What do our customers say about us?

double quotes

We're using the file formats and Windows/JavaScript list controls a lot. They're fast, easy to use, and the documentation is good and contains examples. Tickets with questions or suggestions were answered within a day, so we're happy to use the Syncfusion libraries.
Daniel Persidok

Daniel Persidok

wpd onshore GmbH & Co. KG

double quotes

Using Syncfusion Angular and JavaScript controls makes front-end web development a piece of cake. Each component has many properties that can be configured as per your desire, methods that can be used to interact with the element, and a lot of events that trigger at different stages, which makes modifying your components according to the state of the application an easy task. Also, their support is amazing! They always offer a sample working project, which makes it very simple to solve your question about your code.
Carlos Rodriguez Garcia

Carlos Rodriguez Garcia

Vistatec

Transform your applications today by downloading our free evaluation version Download Free Trial

Awards

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.

Up arrow 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

Live Chat Icon For mobile