Creating a React Calendar Component: Part 3
By: Elbert Bae
Tags: Web Development, CSS, React, Sass

Section 1: Styling the calendar header using Flexbox

Before we begin, let’s add some CSS to the main BaeCalendar component so we can see it on the browser and normalize some HTML element styles.

.bae-calendar-container {

box-sizing: border-box;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);

height: 100%;

width: 100%; h1,

h2,

h3,

h4,

h5,

h6,

p {

padding: 0;

margin: 0;

line-height: 1;

font-family: 'Varela Round', sans-serif;

}

}

As you can see, elements with a class called bae-calendar-container is given a 100% height and width of its parent element. This allows any users importing the component to wrap it in a different container so they can specify the height and width themselves. For now, it will take on the body element's height and width property so we can see it on the browser.

Aside from this, you’ll notice that we are taking advantage of SASS’s capability of nesting to style the h1, h2, h3... elements to normalize its default styles. Without going into great detail, nesting will translate this into a CSS code that will look like this:

.bae-calendar-container h1, .bae-calendar-container h2 {

padding: 0;

margin: 0;

line-height: 1;

font-family: 'Varela Round', sans-serif;

}

// And so on...

Above is the component with no styling that we will transform into the following.

Let’s take a moment to look at the HTML layout of the CalendarHeader component.

<div className="bae-calendar-header">

<div className="left-container">

<h1>{getReadableWeekday(selectDate)}</h1>

<h1>{getReadableMonthDate(selectDate)}</h1>

</div>

<div className="right-container">

<h3>{getYear(selectDate)}</h3>

</div>

</div>

All of the elements we see here are block elements which by definition is an element that starts a new line. So how do we end up with 2 columns? Thankfully, flexbox is a very useful CSS property we can take advantage of.

.bae-calendar-header {

display: flex;

}

The display: flex property defines an element to act like a flex element. A flex element acts differently. Essentially, the outer element is still a block element, but any inner elements take on a more fluid form. Unless display: flex is specified, we're not able to apply any other flex based CSS properties.

Here is an example of the component with display: flex .

Notice how the inner elements are no longer acting as block elements? The container itself wrapping the contents will maintain its block behavior, but this gives us freedom to control the layout of the inner elements. Let's make it so that the readable dates and the years end up on opposite sides by adding justify-content: space-between .

.bae-calendar-header {

display: flex;

justify-content: space-between;

}

Self-explanatory right? When flex is in a row format (e.g. left-container and right-container ), justify-content modifies the horizontal layout. Keep in mind, that if you are working with a flex element in a column format, justify-content will follow the new change and affect the vertical layout. The option we provide space-between does exactly what the name states. It provides an even spacing between all elements, but no spacing on the edges.

We’re making progress, but let’s see if we can provide some space to the edges and a border to show where the CalendarHeader component ends.

.bae-calendar-header {

padding: 15px;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

display: flex;

justify-content: space-between;

}