Week View

The Week and WorkWeek views display events in a familiar calendar layout with a pre-defined number of days and navigation step.

The Week and WorkWeek views are rendering a DayView component with a pre-configured date range, step and numberOfDays properties.

Getting Started

The Week and WorkWeek views provide the following common settings:

  • workWeekStart—The first visible day of the week.
  • workWeekEnd—The last visible day of the week.

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

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

import { Scheduler, WeekView, WorkWeekView } from '@progress/kendo-react-scheduler';
import { sampleData, displayDate } from './events-utc.js';
import { Day } from '@progress/kendo-date-math';

const App = () => {
    return (
        <Scheduler
            data={sampleData}
            defaultDate={displayDate}
        >
            <WorkWeekView
                title="Work Week"

                workWeekStart={Day.Monday}
                workWeekEnd={Day.Thursday}
            />
            <WeekView
                title="Full Week"

                workWeekStart={Day.Monday}
                workWeekEnd={Day.Thursday}
            />
        </Scheduler>
    )
}

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

Grouping by Resource

You can configure the Week and WorkWeek views to display events that are grouped by a resource.

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

import { Scheduler, WeekView, WorkWeekView } from '@progress/kendo-react-scheduler';
import { Day } from '@progress/kendo-date-math';
import { sampleDataWithResources, displayDate } from './events-utc.js';

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

    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'
                    }]}
            >
                <WorkWeekView
                    title="Work Week"

                    workWeekStart={Day.Monday}
                    workWeekEnd={Day.Wednesday}
                />
                <WeekView
                    title="Full Week"

                    workWeekStart={Day.Monday}
                    workWeekEnd={Day.Wednesday}
                />
            </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.

 /