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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Overview

The HTML5 JavaScript scheduler is an event calendar that facilitates almost all the basic Outlook and Google Calendar features, allowing users to plan and manage appointments and time efficiently. It features 10 uniquely configurable views, quick mapping of data source fields, easier rescheduling of appointments through drag and drop, and a resize action, as well as clear representation of appointments with more customizable options.


Data binding

Data binds seamlessly with various client-side and remote data sources such as:

  • JSON
  • RESTful services
  • OData services
  • WCF services

The scheduler loads data on demand by default to reduce the transfer and load time.

Data binding options available in HTML5 JavaScript scheduler


Incomparable UI flexibility

There are 10 built-in view types available: Day, Week, Workweek, Month, Timeline Day, Timeline Week, Timeline Workweek, Timeline Month, Agenda, and Month Agenda. Each view can be configured with different view-specific options.

Day, Week, and Workweek views

  • Appointments are displayed across a single day or multiple days.
  • Workdays and work hours are visually represented with active colors.
  • Option to hide weekend days.
  • Options to set a different start hour and first day of the week.
  • The current date is indicated by a highlighted date header, and the current time is accurately marked on the time scale.

Month view

  • Appointments are displayed across multiple weeks.
  • Overflowing events of each day are represented by a text link indicating the number of hidden appointments. Clicking on that text indicator will open an event container listing all the hidden appointment details.
  • Options exist to set a different first day of the week and also to hide weekend days.
  • The current date can be highlighted.

Agenda view

  • Displays the list of events in a sequential order grouped by day.
  • Supports virtual loading of events.
  • Controls the loading of events based on the specified day counts.

Month agenda view

  • A combination of the calendar layout and the event list of the currently selected date is displayed at the bottom of the view.
  • Dates that hold events are marked by a round indicator.
  • Swiping the calendar to the left or right allows the scheduler to navigate to the previous or next month.

Timeline views

  • The appointments are displayed across a horizontal time axis for a single day or multiple days.
  • Preconfigured, available timeline views are Timeline Day, Timeline Week, Timeline Workweek, and Timeline Month.
  • All the basic functionalities available in default views, such as options to hide weekend days, define work hours and days, and set the first day of week are applicable on all timeline views as well.

Timeline header rows

  • The customizable, additional time header rows that are applicable only on timeline views are displayed.
  • By default, the date and time rows are present in the usual timeline views.
  • Additional headers can be defined to display the year, month, and week number text labels on each individual row.
  • Built-in template support is provided to format the content of the header rows.

Clear event representation

Clear representation of appointment data is provided based on the given time interval.

Normal events

Normal events are ones created with specific start and end times on a single date, and do not exceed 24 hours in length.

All-day events

All-day events are ones created for an entire day, such as holiday events, and usually render on an all-day row.

Spanned events

A spanned event spans across multiple days with a time duration greater than 24 hours.

Recurring events

Recurring events are a set of events that repeat on a daily, weekly, monthly, or yearly basis.


Drag and drop

  • Appointments can easily be rescheduled to another time by dragging them onto the required time slots.
  • Built-in options are available to exclude specific target selectors on which the appointments can be prevented from being dropped.
  • Live time updates are available on appointments that are being dragged across the scheduler.

Event drag and drop in JavaScript scheduler


Event resizing in JavaScript scheduler

Appointment resizing

  • An appointment’s time can easily be extended by resizing either its start or end handlers.
  • Live time updates are available on appointments that are being resized over the time slots.

Multiple resources and grouping

Scheduler comes with built-in support for assigning resources to events. Appointments can be grouped based on resources, and the resources themselves can be grouped based on date for a quick overview of each resource’s availability. There are also options to set different working days for each resource.

Horizontal grouping

  • Resources are grouped horizontally with a common time axis displayed at the left extreme, to be shared among all other resources.
  • Each resource will have its own individual date column.
  • The appointments of each individual resource will be displayed on its underlying slots.

Timeline grouping

  • Resources are displayed as rows, whereas the individual time axis for each date is displayed as a column.
  • Multiple resources can be displayed in a hierarchical tree structure based on the grouping levels.
  • The appointments of a resource are arranged horizontally in its appropriate row against the horizontal time axis.

Date-based grouping

  • The resources are grouped under each date column.
  • By default, this kind of grouping is applicable only on the default views Day, Week, Workweek, Month, Agenda, and Month Agenda.
  • Each date column will have the underlying sub columns to display the resources.

Hierarchical grouping

  • Hierarchical grouping is applicable on all ten available view modes.
  • In default grouping, only child resources that are mapped with a specific groupID are grouped under the parent resource, whereas in hierarchical grouping, each and every child resource is mapped to each of the top level parent resources in a one-to-one grouping model.

Shared events among resources

  • A single appointment will be shared by multiple resources.
  • An action that takes place on a single appointment instance will be reflected on other shared instances simultaneously.

Different working days for resources

  • Each resource can have its own set of working days.
  • Opening the scheduler in Workweek view mode will display only the working days of each resource in the UI.
  • In timeline view, the work hours are highlighted only on these working days.

Built-in event management

There is built-in support for better event handling, such as easier appointment creation and editing functionalities.

Efficient add and edit capabilities

  • A built-in editor easily adds and edits all kinds of appointments.
  • Complete event-related information is displayed in a single window that includes description, all-day, and recurring options.
  • Additional fields can be added and customized easily.
  • Events can be created through a quick event window that pops out on a single click over the required cells.
  • Read-only mode is available to disable the add and edit actions on events.

Editor window of JavaScript scheduler

Recurrence options of appointments

Integrated recurrence options

Complete recurrence-related options are integrated within the default editor and can easily be utilized while adding and editing recurring events.

Customized event editor of JavaScript scheduler

Customizable event editor

The default event editor window can be customized with your own UI to suit application-specific requirements. Additional fields added to it are custom mapped automatically to the event instances.

JavaScript scheduler editor window displayed with validated fields

Data validation

The fields of the event editor have built-in validation support to validate input data.

Multiple event delete option in JavaScript event calendar

Multi-event deletion

Delete multiple selected events at once.


Time zone

Regardless of what time zone the system follows, scheduler supports setting the required time zone value for the entire scheduler as well as for each event, allowing events to be displayed at the exact local time. The event time is also automatically adjusted and displayed accurately on the scheduler based on daylight saving time.

Timezone set for appointments in JavaScript scheduler


Adaptive JavaScript scheduler

Adaptive and touch-friendly

  • The scheduler user interface adapts automatically to mobile and desktop devices. This helps the application scale elegantly across all form factors without any additional effort.
  • Quality user-friendly design and proper touch gestures help achieve the best user experience.

Customizable timescale

  • Easily customizable timescale options exist to view the timeline of the events clearly and also set different durations on scheduler.
  • A single common time scale is displayed vertically on default views such as Day, Week, and Workweek, whereas in the timeline view, the same is displayed on the horizontal axis.
  • Built-in template options are available to customize both the major and minor time slots.
  • The slot interval can be defined to display the number of cells per hour slot.

Week number display

  • The week number of the current date range is displayed beside the date header section.
  • The week number is displayed as the first column in month view, in which each row represents an entire week.
  • The individual header rows can be utilized to view the week numbers in timeline view.

Appearance customization

The appearance and visual presentation of key scheduler elements such as events, date headers, and cells can be customized with built-in template support.

Event template

Customize the look of events by changing their default appearance and style through template options.

Date header template

The default appearance of the dates in the header bar can be customized by adding any kind of style, custom text, or image.

Cell template

The scheduler cells can easily be customized by embedding any kind of text, image, or user-defined style.

Customizable header bar

Users can add custom items to the default header bar options. Options to hide or show the entire header bar are also available.


User-friendly interactions

The great user interface design makes user interactions simple and efficient.

Navigation options in JavaScript scheduler

Easy navigation

Scheduler provides an intuitive way to navigate back and forth between date ranges, and supports flexible navigation between different views. Swiping the scheduler to the left or right also allows date navigation.

Tooltip displayed for appointments

Informative tooltips

Normal and customized tooltips can pop out with event information like subject, start time, and end time on hovering the pointer over an event or tapping and holding an event on mobile devices.

Multiple events selected in JavaScript event calendar

Selection

Select multiple events at once by pressing and holding Ctrl while clicking on events. On mobile devices, the same is done by tapping and holding an event and then single-tapping on the next event to select. Click and drag the pointer over cells for multiple cell selection.

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. Template options are available to customize the header, content, and footer sections of this event pop-up.


Globalization and localization

Integration of different date-time formats and cultures is supported, allowing the scheduler component to function globally to meet the diverse needs of different regions.

JavaScript scheduler with globalization support

Globalization

The globalized date and time formatters are used to access and display the current date and time on the appropriate sections of the scheduler, such as date header, event timing section, and time cells.

JavaScript scheduler with localization support

Localization

All the static text and date content used in scheduler can be localized to any desired language. The scheduler can also be displayed with appropriate time modes and date formats as per the localized language.

JavaScript event calendar displaying from right to left

Right to left (RTL)

The scheduler can render in RTL mode with proper right-to-left conventions, allowing the text direction and layout to be displayed from right to left.


Accessibility

The scheduler component can easily be accessed by screen readers. Complete keyboard interaction support has also been provided.

Accessibility enabled JavaScript scheduler

Completely accessible

The scheduler has complete WAI-ARIA accessibility support. This includes high-contrast visual elements, enabling visually impaired people to easily access them through assistive technologies such as screen readers.

Keyboard interactive JavaScript event calendar

Keyboard interactive

Common actions such as navigating through events; multiple cell selection; adding, editing, and deleting events; and navigating to other views and dates can be performed with a keyboard.


Developer-friendly APIs

Developers have full control over the UI and behavior of the scheduler through its built-in, developer-friendly APIs.


50+ JAVASCRIPT CONTROLS

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