May 21, 2015
Mehul Harry (DevExpress)

DevExtreme HTML5 Widgets - Scheduler Calendar (Coming soon in v15.1)

Check out the new DevExpress HTML5 Scheduler widget that's coming out in the DevExtreme v15.1 release:

DevExtreme HTML5 Scheduler Widget

That's the dark theme but there's a light theme too.

Powerful HTML5 Scheduler

The new Scheduler widget is a client-side JavaScript widget which provides powerful scheduling features to manage your appointments and resources.

Features

  • group appointments by resources (screenshot)
  • recurring appointments
  • use drag-drop to change appointment day/time
  • re-size the appointment change duration (works on touch too!)
  • all-day appointments support
  • bind to any DevExtreme data source with field mapping
  • 4 built-in views: day, week, work week, month
  • appointment coloring and templates
  • date navigator (arrows + popup calendar)
  • Accessibility features
    • RTL (right-to-left)
    • Web-ARIA
    • keyboard support

The new HTML5 Scheduler widget allows your end-users to create and manage appointments from a local or remote storage to be scheduled and then displayed in a timetable. With this widget, you can create different types of appointments - recurrent/nonrecurrent, time-limited/all-day, with/without resources. The appointments can be shown using one of predefined views - 'day', 'week', 'work week' or 'month'.

AngularJS, jQuery, KnockoutJS, etc.

The new Scheduler widget has support for AngularJS (directive), jQuery, and KnockoutJS. In fact, all DevExtreme widgets provide support for the popular JS frameworks mentioned previously. And you can bind to local or remote data.

Calendar Enhancements

The DevExtreme Calendar widget has been enhanced with new features for the v15.1 release:

  • New quarter and year views are added
  • Calendar cells can be displayed using a custom template
  • Calendar size can be specified in widget configuration

Scheduler images

Browse the screenshot gallery of the new DevExtreme Scheduler widget and then drop me a line below with how you will use this new widget in your websites:

Thanks!