React Scheduler

  • The React Scheduler brings the functionality of Outlook's Calendar to a single UI component that can be added to any React app.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    The KendoReact Scheduler component provides a calendar experience similar to Outlook or Google Calendar for any React application with minimal setup. With support for time zone conversions, resource visualization, grouping, editing and recurring events, the React Scheduler component can be responsible for complex requirements around scheduling with just a few lines of code.

    See React Scheduler Overview demo

    React Scheduler - Overview, KendoReact UI Library
  • Day View

    The Day View of the KendoReact Scheduler showcases all available events in a single day. Developers have full control over the start and end of each day, so hours can be limited to just the work day, and an “all day” slot can be displayed at the top of the day to show events happening that block the entire day.

    See React Scheduler Day View demo

    React Scheduler - Day View, KendoReact UI Library
  • Week and Workweek Views

    With the Week View of the KendoReact Scheduler, users can see all events available during their week. With the predefined Workweek View, only a limited set of days will be displayed. Which day starts and which day ends each week can be customized to fit any scheduling needs.

    See React Scheduler Week and Workweek Views demo

    React Scheduler - Week and Workweek Views, KendoReact UI Library
  • Month View

    The Month View of the React Scheduler showcases an entire month worth of events, highlighting a few events for each day with a clear indication for when certain days have more events than are currently displayed.

    See React Scheduler Month View demo

    React Scheduler - Month View, KendoReact UI Library
  • Timeline View

    The Timeline View of the KendoReact Scheduler shifts the scheduler from showcasing time in a vertical fashion to showing events in a horizontal fashion.

    See React Scheduler Timeline View demo

    React Scheduler - Timeline View, KendoReact UI Library
  • Agenda View

    With the Agenda View, the KendoReact Scheduler can showcase all upcoming events in a more compact view, showing each event as an agenda item while scrolling horizontally. Popularized by calendar applications found on mobile devices, the Agenda View can be used to quickly grasp all upcoming events without needing to see all available time slots in a day.

    See React Scheduler Agenda View demo

    React Scheduler - Agenda View, KendoReact UI Library
  • Multiple Event Selection

    The KendoReact Scheduler supports the ability to select multiple events. After events have been selected, they can be rearranged, deleted or edited as a group through the available API methods.

    See React Scheduler Selection demo

    React SchedulerComponent Selection
  • Data Binding

    The KendoReact Scheduler contains built-in logic for handling all available functionality, which requires certain fields on the underlying data model to be available. Rather than enforce a strict data model, the React Scheduler is flexible enough to let developers connect to any object and simply indicate what fields should be used to represent the needed information.

    See React Scheduler Data Binding demo

  • Events

    Events are at the core of the KendoReact Scheduler as they are responsible for displaying what has been added to the calendar. Events can be static, resized with a resize handler, dragged to change their location, as well as edited.

    React Scheduler - Events, KendoReact UI Library
  • Recurrence

    The KendoReact Scheduler has a recurrence editor built-in, allowing any events to occur on a daily, weekly, monthly and annual basis. It also allows for exceptions from these recurrence rules, ensuring that any requirements around recurrence can be fulfilled.

    See React Scheduler Recurrence demo

    React Scheduler - Recurrence, KendoReact UI Library
  • Resources

    Resources within the React Scheduler allows for the categorization of events to give them a unique appearance from other events on the calendar. These resources can be individuals, rooms or any type of group that should have a common look and feel.

    See React Scheduler Resources demo

    React Scheduler - Resources, KendoReact UI Library
  • Tasks

    Tasks within the KendoReact Scheduler are responsible for displaying information in the Agenda View. The Scheduler component will automatically transform the provided data collection into Task components when the current active view is the Agenda View.

    See React Scheduler Tasks demo

    React Scheduler - Tasks, KendoReact UI Library
  • Slots

    The Slots component within the KendoReact Scheduler is responsible for showing each individual hour, day or month slot throughout the scheduler, giving developers granular control over how to display items within the calendar.

    See React Scheduler Slots demo

    React Scheduler - Slots, KendoReact UI Library
  • Editing

    The KendoReact Scheduler has the ability for users to edit singular events or recurring events by interacting with events either through double-clicking with a mouse or via keyboard navigation. The built-in editor provides applicable form components for any field that is tied to the selected event.

    See React Scheduler Editing demo

    React Scheduler - Editing, KendoReact UI Library
  • Custom Editor Form

    Out of the box, the KendoReact Scheduler provides a pre-built Editor Form for editing calendarevents. Use the Custom Editor Form feature to add more fields and options for customization, such as reminders and links to join events online. This allows React developers to utilize a custom renderer to represent the form that appears when an event is edited, giving you full control over the rendering of the event edit form.

    See React Scheduler Custom Editor Form demo

    React Scheduler Component Custom Editor Form
  • Grouping

    The grouping feature of the KendoReact Scheduler allows for the grouping of any resource together within a view. This provides a quick comparison between two different resources and what each of their schedules look like for the day.

    See React Scheduler Grouping demo

    React Scheduler - Grouping, KendoReact UI Library
  • Time Zones

    The KendoReact Scheduler provides built-in support for displaying events in different time zones. By default, the Scheduler component will utilize the local time zone of the browser to display events as they are occurring in the user’s time zone, but a fixed time zone across all users can also be set.

    See React Scheduler Time Zones demo

  • Custom Rendering

    Many of the building blocks of the KendoReact Scheduler are built up by components, and many of these components accept custom renderers. This ensures that developers can take granular control over the look and feel of the React Scheduler. Customizations can vary from simply updating the appearance to inserting custom components, where applicable.

    React Scheduler - Custom Rendering, KendoReact UI Library
  • Adaptive Slot Height

    By default, the KendoReact Scheduler component adapts to fit all items inside the view slot. However, sometimes your user may have more scheduled items than their current view can fit, or no items scheduled at all. This is where the React Scheduler's adaptive slot height feature comes in, enabling you to set the minimum height of a scheduler slot to prevent the slot from disappearing when there are no scheduled events - and also extend its height to accommodate all scheduled items for the day, if needed.

    See React Scheduler Adaptive Slot Height demo

  • Auto Item Height

    The Auto Item Height feature deals with the same ability to auto-adjust or have a defined event height when events are displayed horizontally. This includes the TimelineView and the MonthView, plus the allDay section of the Day, Week and WorkWeek views.

    See React Scheduler Auto Item Height demo

  • Current Time Marker

    When enabled, the Current Time Marker feature of the KendoReact Scheduler shows a line across the Scheduler interface with the user’s machine current time. This provides a point of reference for users as they navigate through the currently scheduled events.

    See React Scheduler Current Time Marker demo

    React Scheduler Component Current Time Marker
  • Globalization

    Being responsible for handling data relying on time, as well as containing several built-in strings for displaying information, localization, and globalization in the KendoReact Scheduler, are extremely important. With this in mind, any message in the Scheduler can be localized to any language and the component can also be rendered in Right-to-Left mode.

    See React Scheduler Globalization demo

    React Scheduler - Globalization, KendoReact UI Library
  • Keyboard Navigation

    The KendoReact Scheduler component provides keyboard navigation out of the box. This helps users traverse and interact with any element of the React Scheduler by simply using their keyboard.

    See React Scheduler Keyboard Navigation demo

  • Accessibility

    Accessibility is a core aspect of the KendoReact UI library. With this in mind, the KendoReact Scheduler is compliant with Section 508 and WAI-ARIA standards and is AA rated with WCAG 2.0.

    See React Scheduler Accessibility demo

    React Accessibility - KendoReact

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.