🚀 New React Challenge: Calendar

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

1. renders the app title
2. renders the seven weekday labels
3. shows the current month and year in the header
4. renders the correct number of days for the current month
5. places the 1st day on the correct weekday
6. fills the grid with days from the previous and next month
7. navigates to the next month
8. navigates to the previous month
9. changes the year when navigating past December
10. changes the year when navigating before January
11. highlights today's date
12. does not highlight any day when viewing another month
13. renders 28 days for February in a non-leap year
14. renders 29 days for February in a leap year
15. renders 30 days for a 30-day month
16. 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.

🔥 Start the Challenge Now