React Cal: a hierarchical calendar

React Calendar

Demo&Code

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:

calendar-hier-nav

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.

Advertisements

Published by

mgiulio

Front End Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s