Tasks Overview

The KendoReact Scheduler components transforms the provided data collection into Task components when current active view is AgendaView.

The Scheduler component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Importing the Default Tasks

The default task, viewTask and editTask are contained in the @progress/kendo-react-scheduler package:

// ES2015 module syntax
import { SchedulerTask, SchedulerViewTask, SchedulerEditTask } from '@progress/kendo-react-scheduler';
// CommonJS format
const { SchedulerTask, SchedulerViewTask, SchedulerEditTask } = require('@progress/kendo-react-scheduler');

Task Composition

The Task composition is really close in terms of structure to the Item Composition and all rules from the Item apply here.

Providing Custom Task

To customize a specific part of the Task tree, provide the corresponding task, viewTask or editTask property to either the Scheduler or the AgendaView.

Currently the tasks support only the remove editing method, but we will be increasing the number of editing methods for the SchedulerEditTask component.

The following example demonstrates basic customization of the SchedulerTask component.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Scheduler,
    AgendaView,

    SchedulerTask
} from '@progress/kendo-react-scheduler';
import { sampleData, displayDate } from './events-utc.js';

const CustomTask = (props) => {
    return (<SchedulerTask
        {...props}
        style={{
            ...props.style,
            backgroundColor: props.isAllDay ? '#ccccff' : '#ffcccc',
            borderRadius: '8px',
            height: 32
        }}
    />)
}


const App = () => {
    return (
        <Scheduler
            data={sampleData}
            defaultDate={displayDate}
        >
            <AgendaView task={CustomTask} />
        </Scheduler>
    );
};

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