Scheduler Component Like Google

The Scheduler component is a stand-alone React component, coded in Typescript. It must support responsive resizing, localization, light/dark theme and RTL. All UI strings must be able to be localized, using the useTranslation hook from react-i18next. State should be managed locally using React hooks. Automated tests should be included. Code should be styled using prettier with its default configuration. The main dependency component libraries to be used are: FullCalendar Standard [login to view URL] Mantine UI For small calendar and all other UI components. [login to view URL] react-i18next [login to view URL] Material Design Icons [login to view URL]@mdi/font/6.5.95/ React Final Form (If a form state management library is needed.) [login to view URL] Overview The Scheduler component consists of three display regions: A large main calendar, which can show one of three "views": day, week, or month, very similar to Google Calendar. A small monthly calendar which allows choosing a date, week, or month to be displayed in the large calendar. An "Entities" list, visually similar to the "Calendars" list in the lower-left of Google Calendar. Image of Scheduler example Multiple events may intersect. Intersecting events will be displayed side by side in columns, and will not visually overlap. When the mouse hovers over an event, the event will show an outline, and after a short debounce delay a rich tooltip will be displayed summarizing the event's properties. Recurring events display a "recurring" icon. Total budget is $2500