Day View

The Day view displays events in a familiar calendar layout.

Getting Started

The Day view provides the following common settings:

  • startTime—The first visible hour of the day.
  • endTime—The last visible hour of the day.
  • showWorkHours—Determines whether to show only working hours or the interval that is defined by the startTime and endTime options.

The following example demonstrates how to set common properties of the Day view of the Scheduler. For the full list of configuration options, refer to the API reference of the DayView properties.

import React from 'react';
import ReactDOM from 'react-dom';

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

const App = () => {
    return (
        <Scheduler
            data={sampleData}
            defaultDate={displayDate}
        >
            <DayView
                title="Two-Day-View"

                numberOfDays={2}

                slotDuration={60}
                slotDivisions={2}

                startTime={"07:00"}
                endTime={"19:00"}

                workDayStart={"08:00"}
                workDayEnd={"18:00"}
            />
        </Scheduler>
    )
}

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

Grouping by Resource

You can configure the Day view to display events that are grouped by a resource.

import React from 'react';
import ReactDOM from 'react-dom';

import { Scheduler, DayView } from '@progress/kendo-react-scheduler';
import { sampleDataWithResources, displayDate } from './events-utc.js';

const App = () => {
    const [orientation, setOrientation] = React.useState('horizontal');

    const handleOrientationChange = React.useCallback(
        (event) => { setOrientation(event.target.value) },
        [setOrientation]
    );

    return (
        <div>
            <div className="example-config">
                <label>
                    Horizontal &nbsp;
                    <input type="radio" value="horizontal" checked={orientation === 'horizontal'} onChange={handleOrientationChange} />
                </label>
                &nbsp;
            <label>
                    Vertical &nbsp;
                    <input type="radio" value="vertical" checked={orientation === 'vertical'} onChange={handleOrientationChange} />
                </label>
            </div>
            <Scheduler
                data={sampleDataWithResources}
                defaultDate={displayDate}
                group={{
                    resources: ['Rooms', 'Persons'],
                    orientation
                }}
                resources={[
                    {
                        name: 'Rooms',
                        data: [
                            { text: 'Meeting Room 101', value: 1 },
                            { text: 'Meeting Room 201', value: 2, color: 'green' }
                        ],
                        field: 'roomId',
                        valueField: 'value',
                        textField: 'text',
                        colorField: 'color'
                    },
                    {
                        name: 'Persons',
                        data: [
                            { text: 'Peter', value: 1, color: 'red' },
                            { text: 'Alex', value: 2 }
                        ],
                        field: 'personId',
                        multiple: true,
                        valueField: 'value',
                        textField: 'text',
                        colorField: 'color'
                    }]}
            >
                <DayView
                    title="Two-Day-View"

                    numberOfDays={2}

                    slotDuration={60}
                    slotDivisions={2}

                    startTime={"07:00"}
                    endTime={"19:00"}

                    workDayStart={"08:00"}
                    workDayEnd={"18:00"}
                />
            </Scheduler>
        </div>
    )
}

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

Setting the First Weekday

The first day of the week is determined by the current locale. For an example on how to change the locale, refer to the article about globalization.

Future releases will include an option for overriding the first day of the week through the properties of the component.

 /