KendoReact Scheduler Overview

The KendoReact Scheduler provides out-of-the-box support for timezone conversion, resources visualization, grouping, editing and recurring events.

Each feature of Scheduler is supported by all of its built-in views which includes:

Demo Preview

The following demo implements most of the features that are available in the Scheduler.

import React from 'react';
import ReactDOM from 'react-dom';

import { guid } from '@progress/kendo-react-common';
import { timezoneNames } from '@progress/kendo-date-math';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { IntlProvider, load, LocalizationProvider, loadMessages } from '@progress/kendo-react-intl';
import { Scheduler, TimelineView, DayView, WeekView, MonthView, AgendaView } from '@progress/kendo-react-scheduler';

import weekData from 'cldr-core/supplemental/weekData.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';

import numbers from 'cldr-numbers-full/main/es/numbers.json';
import dateFields from 'cldr-dates-full/main/es/dateFields.json';
import currencies from 'cldr-numbers-full/main/es/currencies.json';
import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';

import '@progress/kendo-date-math/tz/Etc/UTC';
import '@progress/kendo-date-math/tz/Europe/Sofia';
import '@progress/kendo-date-math/tz/Europe/Madrid';
import '@progress/kendo-date-math/tz/Asia/Dubai';
import '@progress/kendo-date-math/tz/Asia/Tokyo';
import '@progress/kendo-date-math/tz/America/New_York';
import '@progress/kendo-date-math/tz/America/Los_Angeles';

import esMessages from './es.json';
import { sampleDataWithCustomSchema, displayDate, customModelFields } from './events-utc.js'

load(
    likelySubtags, currencyData, weekData, numbers,
    currencies, caGregorian, dateFields, timeZoneNames
);
loadMessages(esMessages, 'es-ES');

const App = () => {
    const timezones = React.useMemo(() => timezoneNames(), []);
    const locales = [{ language: 'en-US', locale: 'en' }, { language: 'es-ES', locale: 'es' }]

    const [view, setView] = React.useState('day');
    const [date, setDate] = React.useState(displayDate);
    const [locale, setLocale] = React.useState(locales[0])
    const [timezone, setTimezone] = React.useState('Etc/UTC');
    const [orientation, setOrientation] = React.useState('horizontal');
    const [data, setData] = React.useState(sampleDataWithCustomSchema);


    const handleViewChange = React.useCallback(
        (event) => { setView(event.value) },
        [setView]
    )

    const handleDateChange = React.useCallback(
        (event) => { setDate(event.value) },
        [setDate]
    )

    const handleLocaleChange = React.useCallback(
        (event) => { setLocale(event.target.value) },
        [setLocale]
    )

    const handleTimezoneChange = React.useCallback(
        (event) => { setTimezone(event.target.value) },
        [setTimezone]
    )

    const handleOrientationChange = React.useCallback(
        (event) => { setOrientation(event.target.getAttribute('data-orientation')) },
        []
    )

    const handleDataChange = React.useCallback(
        ({ created, updated, deleted }) => {
            setData(old => old
                .filter((item) => deleted.find(current => current.TaskID === item.TaskID) === undefined)
                .map((item) => updated.find(current => current.TaskID === item.TaskID) || item)
                .concat(created.map((item) => Object.assign({}, item, { TaskID: guid() }))))
        },
        [setData]
    )

    return (
        <div>
            <div className="example-config">
                <div className="row">
                    <div className="col">
                        <h5>Timezone:</h5>
                        <DropDownList
                            value={timezone}
                            onChange={handleTimezoneChange}
                            data={timezones}
                        />
                    </div>
                    <div className="col">
                        <h5>Locale:</h5>
                        <DropDownList
                            value={locale}
                            onChange={handleLocaleChange}
                            data={locales}
                            textField="language"
                            dataItemKey="locale"
                        />
                    </div>
                    <div className="col">
                        <h5>Orientation:</h5>
                        <input
                            type="radio"
                            name="orientation"
                            id="horizontal"
                            data-orientation="horizontal"
                            className="k-radio"
                            checked={orientation === 'horizontal'}
                            onChange={handleOrientationChange}
                        />
                        <label className="k-radio-label" htmlFor="horizontal">Horizontal</label>
                        <br />
                        <input
                            type="radio"
                            name="orientation"
                            id="vertical"
                            data-orientation="vertical"
                            className="k-radio"
                            checked={orientation === 'vertical'}
                            onChange={handleOrientationChange}
                        />
                        <label className="k-radio-label" htmlFor="vertical">Vertical</label>
                    </div>
                </div>
            </div>
            <LocalizationProvider language={locale.language}>
                <IntlProvider locale={locale.locale} >
                    <Scheduler
                        data={data}
                        onDataChange={handleDataChange}

                        view={view}
                        onViewChange={handleViewChange}

                        date={date}
                        onDateChange={handleDateChange}

                        editable={true}
                        timezone={timezone}
                        modelFields={customModelFields}

                        group={{
                            resources: ['Rooms', 'Persons'],
                            orientation
                        }}
                        resources={[{
                            name: 'Rooms',
                            data: [
                                { text: 'Meeting Room 101', value: 1 },
                                { text: 'Meeting Room 201', value: 2, color: '#FF7272' }
                            ],
                            field: 'RoomID',
                            valueField: 'value',
                            textField: 'text',
                            colorField: 'color'
                        }, {
                            name: 'Persons',
                            data: [
                                { text: 'Peter', value: 1, color: '#5392E4' },
                                { text: 'Alex', value: 2, color: '#54677B' }
                            ],
                            field: 'PersonIDs',
                            valueField: 'value',
                            textField: 'text',
                            colorField: 'color'
                        }]}
                    >
                        <TimelineView />
                        <DayView />
                        <WeekView />
                        <MonthView />
                        <AgendaView />
                    </Scheduler>
                </IntlProvider>
            </LocalizationProvider>
        </div>
    )
}

ReactDOM.render(<App />, document.querySelector('my-app'));

Features

Among the features, which the KendoReact Scheduler delivers are:

  • Resources—You can visualize an event by coloring it depending on a field value.
  • Grouping—The events of the Scheduler can be grouped based on their resources and field values.
  • Editing—The Scheduler enables the user to edit its events by dragging them to different slots, change their duration by resizing, and update any of their fields with the advanced edit form.
  • Recurring events—Displaying occurrences of recurring events is based on the recurrenceRule and recurrenceExceptions properties of the component.
  • Timezones conversion—The Scheduler can use the timezone of the client machine or a predefined timezone, and can also convert all events to the desired timezone.
  • Globalization—By using the available globalization options in KendoReact, you can translate the Scheduler messages by adapting them to specific culture locales.

Trial Version and Commercial License

This React Scheduler component is part of KendoReact, a commercial UI library. You are welcome to explore its full functionality and get technical support from the team when you register for a free 30-day trial. To use it commercially, you need to purchase a license. Feel free to review the KendoReact License Agreement to get acquainted with the full terms of use.

Support Options

For any issues you might encounter while working with the KendoReact Scheduler, use any of the available support channels:

  • KendoReact license holders and active trialists can take advantage of our outstanding customer support delivered by the developers building the library. To submit a support ticket, use the KendoReact dedicated support system.
  • KendoReact forums are part of the free support you can get from the community and from the KendoReact team on all kinds of general issues.
  • KendoReact feedback portal and KendoReact roadmap provide information on the features in discussion and also the planned ones for release.
  • KendoReact uses GitHub Issues as its bug tracker and you can submit any related reports there. Also, check out the closed list.
  • You may still need a tailor-made solution for your project. In such cases, go straight to Progress Services.
 /