SchedulerItem

The SchedulerItem component is responsible for the visual part of an Item.

To expend the default SchedulerItem, set the item property to either the Scheduler or a specific view, to a modified version of the SchedulerItem component.

Customizing the item styles

To customize the styles of the SchedulerItem, we recommend using either style or className properties.

The following examples demonstrates customizing the background to a gradient one, based on the items orientation.

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

    SchedulerItem
} from '@progress/kendo-react-scheduler';

const sampleData = [{
    id: 0,
    title: 'KendoReact Release Webinar',
    start: new Date("2020-01-23T09:30:00.000Z"),
    end: new Date("2020-01-23T10:30:00.000Z"),
    image: 'https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/release_webinar_kui_1920x440_lp.png?sfvrsn=23989f80_0'
}]

const displayDate = new Date("2020-01-23T09:30:00.000Z");

const CustomItem = (props) => (
    <SchedulerItem
        {...props}
        style={{
            ...props.style,
            background: `url(${props.dataItem.image})`
        }}
    />)


const App = () => {
    return (
        <Scheduler
            timezone="Etc/UTC"
            data={sampleData}
            defaultDate={displayDate}
            item={CustomItem}
        >
            <DayView />
        </Scheduler>
    );
};

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

Attaching callback handlers

The SchedulerItem expose various callbacks like onClick and onKeyDown. Those callbacks can be used to attach custom functionality.

Providing a callback without calling the default one from the props, will prevent the default logic from executing.

The following example demonstrates attaching an onFocus and onBlur handlers and showing a custom Popup next an item. We will be calling the default props.onFocus and props.onBlur callbacks to not brake anything.

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

    SchedulerItem
} from '@progress/kendo-react-scheduler';
import { Popup } from '@progress/kendo-react-popup';
import { useInternationalization } from '@progress/kendo-react-intl';

const sampleData = [{
    id: 0,
    title: 'KendoReact Release Webinar',
    start: new Date("2020-01-23T09:30:00.000Z"),
    end: new Date("2020-01-23T10:30:00.000Z"),
    image: 'https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/release_webinar_kui_1920x440_lp.png?sfvrsn=23989f80_0'
}]
const displayDate = new Date("2020-01-23T09:30:00.000Z");

const CustomItem = (props) => {
    const ref = React.useRef(null);
    const intl = useInternationalization();
    const [show, setShow] = React.useState(false);

    const handleFocus = React.useCallback(
        (event) => {
            setShow(true)

            // Call the default `onFocus` handler
            if (props.onFocus) {
                props.onFocus(event)
            }
        },
        [setShow, props.onFocus]
    )
    const handleBlur = React.useCallback(
        (event) => {
            setShow(false)

            // Call the default `onBlur` handler
            if (props.onBlur) {
                props.onBlur(event)
            }
        },
        [setShow, props.onBlur]
    )

    return (
        <React.Fragment>
            <SchedulerItem
                {...props}
                style={{
                    ...props.style,
                    background: `url(${props.dataItem.image})`
                }}
                ref={ref}
                onFocus={handleFocus}
                onBlur={handleBlur}
            />
            <Popup
                show={show}
                anchorAlign={{
                    horizontal: 'center',
                    vertical: 'top'
                }}
                popupAlign={{
                    horizontal: 'center',
                    vertical: 'bottom'
                }}
                anchor={ref.current && ref.current.element}
            >
                <div className="rounded" style={{ overflow: 'hidden' }}>
                    <img className="image-fluid" src={props.dataItem.image} style={{ width: 400, height: 'auto' }} />
                    <div className="p-1">
                        <h5>{props.title}</h5>
                        <div>
                            Start: {intl.formatDate(props.zonedStart, 't')}
                        </div>
                        <div>
                            End: {intl.formatDate(props.zonedEnd, 't')}
                        </div>
                    </div>
                </div>
            </Popup>
        </React.Fragment>
    )
}


const App = () => {
    return (
        <Scheduler
            timezone="Etc/UTC"
            data={sampleData}
            defaultDate={displayDate}
            item={CustomItem}
            editable={{ select: true }}
        >
            <DayView />
        </Scheduler>
    );
};

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