Dates

The MultiViewCalendar enables you to handle the configuration of its focused and selected dates, and control the partial date selection.

Focused Dates

The MultiViewCalendar always displays a focused date and, by default, the focused date is today's date. To change the initial focused date, use the focusedDate property by setting it to a specific Date value. The Date value has to be a valid JavaScript Date object.

class App extends React.Component {
    render() {
        return <MultiViewCalendar
            focusedDate={new Date(2010, 10, 10)}
        />;
    }
}

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

Selected Dates

By default, the selected date is not set and the MultiViewCalendar displays only the focused date. To define the selected date, use the value property.

The MultiViewCalendar accepts the following values that you can set as selected:

Single Dates

To set a single date as selected, pass the JavaScript Date object as a value.

class App extends React.Component {
    render() {
        return (
            <MultiViewCalendar
                value={new Date(2010, 10, 10)}
            />
        );
    }
}

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

Multiple Dates

To set multiple dates as selected, pass an array of JavaScript Date objects as a value.

class App extends React.Component {
    render() {
        return <MultiViewCalendar
            value={[
                new Date(2010, 10, 10),
                new Date(2010, 10, 11),
                new Date(2010, 10, 12)
            ]}
        />;
    }
}

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

Range Date Selections

To set a range of dates as selected, pass an object with start and end keys which represent the selected range.

class App extends React.Component {
    render() {
        return <MultiViewCalendar
            value={{
                start: new Date(2010, 10, 10),
                end: new Date(2010, 10, 20)
            }}
        />;
    }
}

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

In this article