All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

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