All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Scheduler Overview

The Scheduler displays a set of events—appointments or tasks.

It also enables you to show scheduled events in different views—as a single day, a whole week, or month, or as a list of tasks which needs to be accomplished.

The Scheduler wrapper for React is a client-side wrapper for the Kendo UI Scheduler widget.

Basic Usage

The following example demonstrates the Scheduler in action.

class SchedulerContainer extends React.Component {

    constructor(props) {
            super(props);
            this.startTime = new Date("2013/6/13 07:00 AM")
            this.resiurces = [
                {
                    field: "ownerId",
                    title: "Owner",
                    dataSource: [
                        { text: "Alex", value: 1, color: "#f8a398" },
                        { text: "Bob", value: 2, color: "#51a0ed" },
                        { text: "Charlie", value: 3, color: "#56ca85" }
                    ]
                }
            ]
            this.views = [
                "day",
                { type: "workWeek", selected: true },
                "week",
                "month",
                "agenda",
                { type: "timeline", eventHeight: 50 }
            ]

            this.dataSource = {
                batch: true,
                transport: {
                    read: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks",
                        dataType: "jsonp"
                    },
                    update: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
                        dataType: "jsonp"
                    },
                    create: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
                        dataType: "jsonp"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                schema: {
                    model: {
                        id: "taskId",
                        fields: {
                            taskId: { from: "TaskID", type: "number" },
                            title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                            start: { type: "date", from: "Start" },
                            end: { type: "date", from: "End" },
                            startTimezone: { from: "StartTimezone" },
                            endTimezone: { from: "EndTimezone" },
                            description: { from: "Description" },
                            recurrenceId: { from: "RecurrenceID" },
                            recurrenceRule: { from: "RecurrenceRule" },
                            recurrenceException: { from: "RecurrenceException" },
                            ownerId: { from: "OwnerID", defaultValue: 1 },
                            isAllDay: { type: "boolean", from: "IsAllDay" }
                        }
                    }
                },
                filter: {
                    logic: "or",
                    filters: [
                        { field: "ownerId", operator: "eq", value: 1 },
                        { field: "ownerId", operator: "eq", value: 2 }
                    ]
                }
            }

    }

    render() {
        return (
            <div>
                <Scheduler height={600}
                    views={this.views}
                    dataSource={this.dataSource}
                    date={new Date("2013/6/13")}
                    startTime={this.startTime}
                    resources={this.resources} />
            </div>
        );
     }
    }
ReactDOM.render(
    <SchedulerContainer/>,
    document.querySelector('my-app')
);

Installation

  1. Download and install the package.

    npm install --save @progress/kendo-scheduler-react-wrapper
  2. Once installed, import the Scheduler component from the package.

    import { Scheduler } from '@progress/kendo-scheduler-react-wrapper';
  3. You are required to install one of the Kendo UI themes to style your components.

Dependencies

The Scheduler package requires you to install the following peer dependencies in your application:

  • @progress/kendo-ui

Features and Functionalities

Events

The following example demonstrates basic Scheduler events. You can subscribe to all Scheduler events by the handler name.

class SchedulerContainer extends React.Component {

    constructor(props) {
        super(props);
        this.onDataBound = this.onDataBound.bind(this);
        this.onChange = this.onChange.bind(this);
        this.date = new Date("2013/6/6");
        this.events = this.props.events
    }

    onDataBound = (e) => {
         console.log("event :: dataBound");
         console.log(e);
    }

    onChange = (e) => {
         console.log("event :: change");
         console.log(e);
    }

    render() {
        return (
            <div>
                <Scheduler change={this.onChange}
                    dataBound={this.dataBound}
                    dataSource={this.events}
                    date={this.date}/>
            </div>
        );
    }
}
ReactDOM.render(
    <SchedulerContainer
        events={[{id: 1, start: new Date("2013/6/6 08:00 AM"), end: new Date("2013/6/6 09:00 AM"),title: "Breakfast"},
        {id: 2,start: new Date("2013/6/6 10:15 AM"),end: new Date("2013/6/6 12:30 PM"),title: "Job Interview"}
    ]}/>,
    document.querySelector('my-app')
);
In this article