kendo-react-ui

Disable the KendoReact Calendar Fast Navigation Bar globally


The KendoReact Calendar Fast Navigation Bar is currently broken in all versions of KendoReact that support React 18 as per this GitHub issue.

We are working around the issue by disabling the Calendar Fast Navigation Bar. This is a suitable workaround for simple isolated components such as DatePickers, but unfortunately does nothing to address the issue in for example KendoReact Grid filter menus. See this StackBlitz for a working example of the issue.

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


Solution

  • This can be done using the CalendarPropsContext as described here.

    e.g.

    const calendarProps = React.useCallback(
        (calendarProps: CalendarProps) => ({
          ...calendarProps,
          navigation: false,      
        }),
        []
      );
    
    return (
        <CalendarPropsContext.Provider value={calendarProps}>
          ...
        </CalendarPropsContext.Provider>
      );