SchedulerViewItem

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

Extending the Positioning

By default, an item is taking the entire height of the slot it fits it. We will cover a simple use-case where we extend the positioning to apply proportional height depending on the SchedulerViewItem duration.

The following example demonstrates proportional positioning.

import React from "react";
import ReactDOM from "react-dom";
import {
    Scheduler,
    AgendaView,
    TimelineView,
    DayView,
    WeekView,
    MonthView
} from "@progress/kendo-react-scheduler";
import { ProportionalViewItem } from "./proportional-view-item.jsx";

const displayDate = new Date("2011-06-09T09:00:00.000Z");

export const data = [
    {
        id: 0,
        title: "Room 1, Person 1",
        start: new Date("2011-06-09T09:15:00.000Z"),
        end: new Date("2011-06-09T11:45:00.000Z"),
        roomId: 1,
        personId: 1
    },
    {
        id: 1,
        title: "Room 1, Person 2",
        start: new Date("2011-06-09T06:15:00.000Z"),
        end: new Date("2011-06-09T11:45:00.000Z"),
        roomId: 1,
        personId: 2
    },
    {
        id: 2,
        title: "Room 2, Person 1",
        start: new Date("2011-06-09T09:25:00.000Z"),
        end: new Date("2011-06-09T11:35:00.000Z"),
        roomId: 2,
        personId: 1
    },
    {
        id: 3,
        title: "Room 2, Person 2",
        start: new Date("2011-06-09T08:55:00.000Z"),
        end: new Date("2011-06-09T11:00:00.000Z"),
        roomId: 2,
        personId: 2
    }
];

const App = () => {
    return (
        <Scheduler
            data={data}
            defaultDate={displayDate}
            editable={false}
            defaultView={"day"}
            timezone={"Etc/UTC"}
            height={"800px"}
        >
            <AgendaView />
            <TimelineView
                slotDuration={30}
                slotDivisions={1}
                viewItem={ProportionalViewItem}
            />
            <DayView
                slotDuration={30}
                slotDivisions={1}
                viewItem={ProportionalViewItem}
            />
            <WeekView
                slotDuration={30}
                slotDivisions={1}
                viewItem={ProportionalViewItem}
            />
            <MonthView slotDuration={30} slotDivisions={1} />
        </Scheduler>
    );
};

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