Disable Calendar Fast Navigation Bar globally

[David]

Hi,

The Calendar Fast Navigation Bar is currently broken in all versions of KendoReact that support React 18 as per https://github.com/telerik/kendo-react/issues/1566. We are working around the issue by disabling the Calendar Fast Navigation Bar as described here https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/sidebar/.

Unfortunately this does nothing to address the issue in KendoReact Grid filter menus - see this StackBlitz for an example: https://stackblitz.com/edit/react-va2kr1?file=app%2Fmain.tsx.

Is there a way to globally disable the Calendar Fast Navigation Bar so we don't have to do this everywhere and create a custom Grid filter?

 

[David]

This can be done using the CalendarPropsContext as described here.

const calendarProps = React.useCallback(
    (calendarProps: CalendarProps) => ({
      ...calendarProps,
      navigation: false,      
    }),
    []
  );

return (
    <CalendarPropsContext.Provider value={calendarProps}>
      ...
    </CalendarPropsContext.Provider>
  );

[David]

This can be done using the CalendarPropsContext as described here.

const calendarProps = React.useCallback(
    (calendarProps: CalendarProps) => ({
      ...calendarProps,
      navigation: false,      
    }),
    []
  );

return (
    <CalendarPropsContext.Provider value={calendarProps}>
      ...
    </CalendarPropsContext.Provider>
  );

[Vessy]

Thank you for sharing the found solution with the community, David!