We all reach for a date library the moment a calendar shows up in a feature request. But underneath every grid is plain JavaScript — counting days, offsetting weekdays, and rolling years over. This challenge drops the library and puts you in charge.
🧩 Overview
The calendar components are already provided, so your job is the logic: render the correct days, highlight today, navigate between months, and handle leap years with plain JavaScript date math.
👉 https://www.reactchallenges.com/challenges/calendar
✅ Requirements
• Render the app title "Calendar" and the weekday header (Mon through Sun).
• Show the current month and year in the header (e.g. August 2026).
• Render the correct number of days for the selected month (28, 29, 30, or 31).
• Place the 1st day of the month in the correct weekday column.
• Fill empty cells with days from the previous and next month so the grid always completes full weeks, dimming those days visually.
• Navigate to the previous and next month.
• Highlight the current day (today) in the grid.
• Change the year correctly when navigating past December or before January.
• Handle leap years correctly (February has 29 days in a leap year, 28 otherwise).
💡 Notes
• new Date(year, month + 1, 0).getDate() returns the number of days in a month — leap years included.
• The week starts on Monday, so the leading offset for the 1st day is (getDay() + 6) % 7.
• new Date(year, month + offset, 1) rolls the year over automatically when navigating past December or January.
🧪 Tests
- renders the app title
- renders the seven weekday labels
- shows the current month and year in the header
- renders the correct number of days for the current month
- places the 1st day on the correct weekday
- fills the grid with days from the previous and next month
- navigates to the next month
- navigates to the previous month
- changes the year when navigating past December
- changes the year when navigating before January
- highlights today's date
- does not highlight any day when viewing another month
- renders 28 days for February in a non-leap year
- renders 29 days for February in a leap year
- renders 30 days for a 30-day month
- uses five weeks when the month fits in five
You'll walk away confident counting days, offsetting weekdays, and handling leap years without a single dependency. 16 tests will tell you exactly where your grid breaks.
Top comments (0)