Customization

The Calendar enables the user to render custom components instead of the default ones and, in this way, to customize most of the child Calendar components which are otherwise inaccessible.

The user can replace the following default Calendar components with custom ones:

Cells inside the View

You can customize or completely replace each individual cell inside the Calendar view with a custom component by passing a cell property to the Calendar. The cell property accepts either a Class or a Function React Component. Both Class and Function receive relevant information about the state of the cell through the [props of the Calendar](% slug api_dateinputs_calendarcellprops %).

Modifying the Cells

To modify an individual cell inside the Calendar view, use the CalendarCell component from the @progress/kendo-date-dateinputs package. CalendarCell will acquire custom behavior and will modify only some of the cells.

For the CalendarCell component to work properly, pass back all properties.

import { Calendar, CalendarCell } from '@progress/kendo-react-dateinputs';
const customCell = (props) => {
    const style = props.isWeekend ? { opacity: '.7' } : { fontWeight: 'bold' };

    return (
        <CalendarCell {...props} style={style} />
    )
}

class App extends React.Component {
    render() {
        return (
            <Calendar cell={customCell} />
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Overriding the Default Properties

The cell property allows you to pass any <td /> element as a CalendarCell. This approach is useful for gaining full control over the cell because the CalendarCell component will render additional elements for the default styling.

For the custom cell to allow date selection, manually pass or handle the onClick event.

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

import { Calendar } from '@progress/kendo-react-dateinputs';
import { Tooltip } from '@progress/kendo-react-tooltip';
import { classNames } from '@progress/kendo-react-common';

class CustomCell extends React.Component {
    title = "We're closed on the weekends!"
    handleClick = () => {
        if (!this.props.isWeekend) {
            this.props.onClick(this.props.value);
        }
    }

    render() {
        const style = {
            cursor: 'pointer',
            opacity: this.props.isWeekend ? .6 : 1
        };

        const className = classNames({
            'k-state-selected': this.props.isSelected,
            'k-state-focused': this.props.isFocused
        });

        return (
            <td
                onClick={this.handleClick}
                className={className}
                style={style}
            >
                <span className="k-link" title={this.props.isWeekend && this.title}>
                    {this.props.children}
                </span>
            </td>
        );
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: null
        };
    }

    handleChange = (event) => {
        const dayOfWeek = event.value.getDay();

        // 0 = Sunday, 6 = Saturday
        if (dayOfWeek !== 0 && dayOfWeek !== 6) {
            this.setState({ value: event.value });
        }
    }

    render() {
        return (
            <Tooltip anchorElement="target" position="top">
                <Calendar
                    cell={CustomCell}
                    value={this.state.value}
                    onChange={this.handleChange}
                />
            </Tooltip>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Other Child Components

Similar to the cell property, the Calendar allows you to modify or override other child element through its weekCell, headerTitle, and navigationItem properties.

import {
    CalendarCell,
    CalendarWeekCell,
    CalendarHeaderTitle,
    CalendarNavigationItem
} from '@progress/kendo-react-dateinputs';

Cells inside the Week Column

The CalendarWeekCell component represents the week number. CalendarWeekCell is only visible in the month view of the Calendar and if the weekNumber property is set to true. CalendarWeekCell will receive relevant information about its state through the CalendarWeekCellProps.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Calendar } from '@progress/kendo-react-dateinputs';
import { CustomWeekCell } from './customWeekCell.jsx';

class App extends React.Component {
    min = new Date(2019, 0, 1);
    max = new Date(2019, 1, 1);

    render() {
        return (
            <Calendar
                weekNumber={true}
                weekCell={CustomWeekCell}

                min={this.min}
                max={this.max}
            />
        );
    }
}

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

Items in the Side Navigation

The CalendarNavigationItem component represents a list item in the side navigation which provides fast navigation in the current view of the Calendar. CalendarNavigationItem will receive relevant information about its state through the CalendarNavigationItemProps.

For the CalendarNavigationItem component to work properly, pass back all properties.

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

import { Calendar } from '@progress/kendo-react-dateinputs';
import { CustomNavigationItem } from './customNavigationItem.jsx';

class App extends React.Component {
    render() {
        return (
            <Calendar navigationItem={CustomNavigationItem} />
        );
    }
}

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

Titles of Current Views

The CalendarHeaderTitle component represents the title of the current Calendar view and also functions as a button for changing the current view. CalendarHeaderTitle will receive relevant information about its state through the CalendarHeaderTitleProps

For the CalendarHeaderTitle component to work properly, pass back all properties.

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

import { Calendar } from '@progress/kendo-react-dateinputs';
import { CustomHeaderTitle } from './customHeaderTitle.jsx';

class App extends React.Component {
    render() {
        return (
            <Calendar headerTitle={CustomHeaderTitle} />
        );
    }
}

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