How to change first day of week in Kendo react UI calendar library

Question

Default first day of a week in Kendo React JS's calendar library is Sunday.

Want starting day of a week should be Monday.

Answer 1

It is localized using the IntlProvider, see the documentation in the KendoReact site. In the example the calendar starts from Monday, and not Sunday, since it is using ES culture. The IntlProvider provides the cultures to the DatePicker including the first day of week. You can load the data from CLDR as it is from their repo. Or modify it first to match your needs and then load it. For example: weekData.supplemental.weekData.firstDay.US = 'mon';

Here is such override example with full code:

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

    import { Calendar } from '@progress/kendo-react-dateinputs';
    import { IntlProvider, load } from '@progress/kendo-react-intl';

    import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
    import currencyData from 'cldr-core/supplemental/currencyData.json';
    import weekData from 'cldr-core/supplemental/weekData.json';

    load(likelySubtags, currencyData, weekData);

    weekData.supplemental.weekData.firstDay.US = 'mon';

    class App extends React.Component {
    render() {
        return (
        <IntlProvider locale={'en-US'}>
            <div className="example-wrapper row">
            <Calendar />
            </div>
        </IntlProvider>
        );
    }
    }

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

And here is live version of the above.