What's it?

it's a project for understanding how to develop react interactive calendar without helped from Moment.js or date-fns.

And also to use:

• a forecast weather from open-meteo
• using a toolkit RTK Query from redux-toolkit as service for fetch forecast
• using light/dark themes for UI, from MUI
• multi languages toolkit from i18next

Here's what I've learned while develop an interactive calendar on ReactJs without helped momentJs and date-fns.

Technical stack

• TypeScript
• Eslint (airbnb)
• prettier
• react
• redux
• redux-toolkit
• i18next
• RTK Query
• MUI + styled-component + MUI icons
• MUI themes
• Vite instead of webpack and cra

Project overview

Components

• Calendar - it's component for render Calendar
• Containers - it's styled-components for layouts

Theme

• I use default theme from MUI, but i changed default borderRadius instead and created defaultTheme options.

Features

• ToggleThemeMode - button for controlling theme mode
• ToggleMonth - button for controlling calendar month
• ButtonToday - button for controlling calendar date

Calendar tutorial

• Stage 1: create base utils
• Stage 2: create base constants
• Stage 3: create base calendar
• Stage 4: control current date
• Stage 5: create RTK service

Sources

• RTK Query
  • Utilities
  • Cache Behavior
• react-i18next
• new Date().getDay()
• mui dark/light theme