SchedulerViewItem

By default, the SchedulerViewItem is responsible only for the positioning of the item inside the view.

Extending the positioning

We will cover a simple use-case where we extend the positioning and apply some animations to the default SchedulerViewItem.

The following example demonstrates smooth positioning. Even though it is not the most beautiful transition, we aim to showcase the role of the SchedulerViewItem as a composition layer of the Item and what are the possibilities of extending it.

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

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

const CustomViewItem = (props) => {
    const [mount, setMount] = React.useState(false);

    React.useEffect(() => {
        setMount(true)
    }, [])

    return (<SchedulerViewItem
        {...props}
        style={{
            ...props.style,
            top: (props.dragHint || props.resizeHint) ? undefined : 0,
            left: (props.dragHint || props.resizeHint) ? undefined : 0,
            opacity: mount ? 1 : 0,
            transitionProperty: 'all',
            transitionDuration: (props.dragHint || props.resizeHint) ? '.1s' : '1s',
            transitionTimingFunction: 'ease-in-out'
        }}
    />)
}


const App = () => {
    return (
        <Scheduler
            data={sampleData}
            defaultDate={displayDate}
            viewItem={CustomViewItem}
            defaultView="week"
            editable={true}
        >
            <WeekView />
            <MonthView />
        </Scheduler>
    );
};

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