A break from React Trello. Well, not really, because probably I’ll reuse this code to implement a calendar to view cards with due dates for that project.
Indeed, this is a React component to render a calendar to browse registered events(or more generally, every kind of information with an assigned date).
The calendar can be browsed in a hierarchical way, following its year-month-day tree-like structure:
So when in the month view the user can see the days of the month, with the relative events if any, and the navigation options are:
- Previous month: navigation bar(navbar) left arrow
- Next month: navbar right arrow
- Go up to the year view: navbar up arrow. So, if we are on the october 2015 month page, clicking this button takes us to the 2015 year page
- Go to a day view: click on a day cell to do down to the relative day view
In the day view there are the events of that day, if any and user can navigate to the sibling days or climbs up to the relative month.
The year view is unfinished, so at the moment it just displays the month labels. Once again, the navigation is hierarchical, so it is possible to watch previous and next months or go down to a month view.
Additionally in the navbar is present a Today button that teleports the user to the current day, month or year, depending on the view level.
No external date libraries have been used, just the native Date object.
Flexbox is used in several parts, like in the rendering of the day cells of the month view.
mgiulio 