DEV Community: Elbert Bae

What can developers do to help combat climate change?

Elbert Bae — Fri, 18 Sep 2020 03:25:20 +0000

It's a real issue that we're seeing the effects of world-wide. I'm in Vancouver and the number of fires in our province and down south in America's California and Washington states are definitely significant changes that I've observed over the years.

So what can we do as a developer to help combat climate change?

Creating a React Calendar Component: Part 4

Elbert Bae — Fri, 17 Jul 2020 05:18:00 +0000

Folder structure and code layout is just as important as the actual code itself. Clean code should be readable and easy to understand. The goal should always be for a new person to take a look at your code and be able to understand the purpose without going into the details of the code. Similarly, I like to organize my files and folders in a way that makes it easy to navigate and understand which files are related to each other.

In this part, let us add 2 features that will allow users to easily see which date is selected and the user of the component to be able to access that date and then take a look at the calendar component's folder structure and then

Section 1: Selected Date Indication

One of the most infuriating things a web application (any application for that matter) is the lack of indicators. If the user doesn't know what's selected, loading, disabled, or active, then they will get confused. As most of you know, you can test any web application as much as you want, only to have the user pick it apart by being dumb users. This is a fallacy.

If the web application is not guiding the user to use it properly, then there is a serious lack of UI/UX decisions that were made in its creation. Of course, I am not a UI/UX expert, but having worked with them and QA testers, understand its importance. So, let's take a moment to add an indication on the dates that are selected by our users.

Below is an image of the completed component and what we're going to add now is the circle around the date that is selected.

Here is the code for our DateIndicator:

import React from 'react';
import {
  getDayOfMonth,
  getMonthDayYear,
  getMonth,
  getYear,
} from '../utils/moment-utils';
import { getDatesInMonthDisplay } from '../utils/date-utils';

const DateIndicator = ({ activeDates, selectDate, setSelectDate }) => {
  const changeDate = (e) => {
    setSelectDate(e.target.getAttribute('data-date'));
  };

  const datesInMonth = getDatesInMonthDisplay(
    getMonth(selectDate) + 1,
    getYear(selectDate)
  );

  const monthDates = datesInMonth.map((i, key) => {
    return (
      <div
        className="date-icon"
        data-active-month={i.currentMonth}
        data-date={i.date.toString()}
        key={key}
        onClick={changeDate}
      >
        {getDayOfMonth(i.date)}
      </div>
    );
  });

  return <div className="bae-date-indicator">{monthDates}</div>;
};

export default DateIndicator;

Since all we need to specify a different style on an HTML element using CSS is a style applied to an attribute, we're going to take advantage of a class name called selected. The element in question currently has a class name called date-icon. But there is no rule saying I can't add more!

// We want to add `className="date-icon selected"
<div
  className="date-icon"
  data-active-month={i.currentMonth}
  data-date={i.date.toString()}
  key={key}
  onClick={changeDate}
>
  {getDayOfMonth(i.date)}
</div>

Now the real question is, how do we figure out which date is selected and only apply the selected class name to the correct one? Well... that's simple. We know that the selectDate prop is a state that is tracked by the parent component. Thankfully, this component has access to it. As each of the monthDates are constructed, we can do a match to see if the date icon being constructed matches the selectDate. But, let's think for a moment about what data we actually need to match?

I am hesitant to match on date objects themselves, because you never know if the date object is accurate to the millisecond. Not to mention, I have no clue how date objects will behave as it moves from different timezones to another. For example, if my database is in UTC time, but the end user is in PST, the date object may change according to the timezone. Normally, we would store this information as a string to prevent this, but you never know. So... we're going to take the safe route and use the following function with MomentJs to pull the month, day, and year as a string.

export const getMonthDayYear = (date) => moment(date).format('MM-DD-YYYY');

By utilising this, we can do a match like so.

const selected = getMonthDayYear(selectDate) === getMonthDayYear(i.date) ? 'selected' : '';

The ternary operation states, if the MM-DD-YYYY of selectDate matches the MM-DD-YYYY of another date, then the variable selected will be assigned a string value of selected. Otherwise, it will be an empty string. Note, that we disregard hours, minutes, and seconds, because that is information we do not care about for the purpose of this feature.

Applying this new change, let's take a look at the full component.

import React from 'react';
import {
  getDayOfMonth,
  getMonthDayYear,
  getMonth,
  getYear,
} from '../utils/moment-utils';
import { getDatesInMonthDisplay } from '../utils/date-utils';

const DateIndicator = ({ activeDates, selectDate, setSelectDate }) => {
  const changeDate = (e) => {
    setSelectDate(e.target.getAttribute('data-date'));
  };

  const datesInMonth = getDatesInMonthDisplay(
    getMonth(selectDate) + 1,
    getYear(selectDate)
  );

  const monthDates = datesInMonth.map((i, key) => {
    const selected =
      getMonthDayYear(selectDate) === getMonthDayYear(i.date) ? 'selected' : '';

    return (
      <div
        className={`date-icon ${selected}`}
        data-active-month={i.currentMonth}
        data-date={i.date.toString()}
        key={key}
        onClick={changeDate}
      >
        {getDayOfMonth(i.date)}
      </div>
    );
  });

  return <div className="bae-date-indicator">{monthDates}</div>;
};

export default DateIndicator;

As you can see, the className is now className={date-icon \${selected}}. If the date matches, it will append the string selected and add another class name attribute. From here on, let's quickly add a change to our style file.

.date-icon {
  display: flex;
  justify-content: center;
  justify-self: center;
  align-items: center;
  height: 25px;
  width: 25px;
  padding: 5px;
  cursor: pointer;
  &[data-active-month='false'] {
    color: rgba(0, 0, 0, 0.3);
  }
  &.selected {
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }
}

And in our theme files from Part 2:

.bae-date-indicator {
  .date-icon {
    &.active {
      background-color: $secondaryColor;
      color: $activeTextColor;
    }
    &.selected {
      background-color: $primaryColor;
      color: $activeTextColor;
    }
  }
}

With that, your component is interactive! But what good is an interactive component if you can't get the date selected out as data?

Section 2: Extracting the date data

This is quite a simple one, but if you are not familiar with something called callbacks, then the answer may not be as obvious to you. Of course, most programmers understand callbacks early on in their work as it is used often. What we're going to do is take advantage of a callback to extract the date selected.

The main component file currently uses the React Hook called useState. For our next item, we need to pull in another hook called useEffect.

import React, { useEffect, useState } from 'react';
import { getToday } from './utils/moment-utils';
import './bae-calendar.scss';

import CalendarHeader from './components/calendar-header';
import WeekdayIndicator from './components/weekday-indicator';
import DateIndicator from './components/date-indicator';
import MonthIndicator from './components/month-indicator';
// https://uicookies.com/html-calendar/

import { presetDateTracker } from './utils/date-utils';

const themes = {
  salmon: 'salmon-theme',
  monochrome: 'monochrome-theme',
  rouge: 'rouge-theme',
};

const BaeCalendar = ({ theme, activeDates, onDateSelect }) => {
  const [selectDate, setSelectDate] = useState(getToday());

  return (
    <div className={`bae-calendar-container ${themes[theme]}`}>
      <CalendarHeader selectDate={selectDate} />
      <WeekdayIndicator />
      <DateIndicator
        activeDates={presetActiveDates.current}
        selectDate={selectDate}
        setSelectDate={setSelectDate}
      />
      <MonthIndicator selectDate={selectDate} setSelectDate={setSelectDate} />
    </div>
  );
};

export default BaeCalendar;

The hook useEffect is similar to componentDidMount and componentDidUpdate in class based react. Looking at the component code above, let's do a little experiment. We're going to add useEffect and console.log the selectDate.

const BaeCalendar = ({ theme, activeDates, onDateSelect }) => {
  const [selectDate, setSelectDate] = useState(getToday());

  useEffect(() => {
    console.log(selectDate);
  }, []);

  return (
    <div className={`bae-calendar-container ${themes[theme]}`}>
      <CalendarHeader selectDate={selectDate} />
      <WeekdayIndicator />
      <DateIndicator
        activeDates={presetActiveDates.current}
        selectDate={selectDate}
        setSelectDate={setSelectDate}
      />
      <MonthIndicator selectDate={selectDate} setSelectDate={setSelectDate} />
    </div>
  );
};

export default BaeCalendar;

Great! We see that the date is logged on the browser console. However, you'll quickly notice as you play with the component that subsequent date selections are not re-logging the newly selected date data. What's going on here?

Well, useEffect has the second argument which is currently an empty array. The items that go into this array is typically a state that we want to track. For example, if I add the following below, we now see that selecting dates triggers a log as we want it to.

const BaeCalendar = ({ theme, activeDates, onDateSelect }) => {
  const [selectDate, setSelectDate] = useState(getToday());

  useEffect(() => {
    console.log(selectDate);
  }, [selectDate]);

  return (
    <div className={`bae-calendar-container ${themes[theme]}`}>
      <CalendarHeader selectDate={selectDate} />
      <WeekdayIndicator />
      <DateIndicator
        activeDates={presetActiveDates.current}
        selectDate={selectDate}
        setSelectDate={setSelectDate}
      />
      <MonthIndicator selectDate={selectDate} setSelectDate={setSelectDate} />
    </div>
  );
};

export default BaeCalendar;

Essentially, you need to subscribe the useEffect to listen to changes to certain states. You can create more than one useEffect hook in one component to track multiple states if needed. For our purpose, since we're only tracking one, we only need to have one useEffect hook with selectDate added to the array of the second argument. Now it should behave like this.

This is great. Now we know that there is a way to track the state changes to get the data. Now, how do we give programs access to this information outside of the component? This is where callbacks come in.

Thankfully, we can add as many props to our components as we want. So, let's add a prop called onDateSelect to our parent component like so.

const BaeCalendar = ({ theme, activeDates, onDateSelect }) => {
  const presetActiveDates = useRef(presetDateTracker(activeDates || []));
  const [selectDate, setSelectDate] = useState(getToday());

  useEffect(() => {
    if (onDateSelect) {
      onDateSelect(selectDate);
    }
  }, [selectDate]);

  return (
    <div className={`bae-calendar-container ${themes[theme]}`}>
      <CalendarHeader selectDate={selectDate} />
      <WeekdayIndicator />
      <DateIndicator
        activeDates={presetActiveDates.current}
        selectDate={selectDate}
        setSelectDate={setSelectDate}
      />
      <MonthIndicator selectDate={selectDate} setSelectDate={setSelectDate} />
    </div>
  );
};

As you can see, inside of our useEffect hook, we now have an if statement that calls the onDateSelect prop function if it is a truthy (e.g. exists). Please note, that in normal circumstances, you may need to be more specific here as a user could pass in true to this prop which would break the component. However, let's take a look at how the component is used elsewhere.

<BaeCalendar
  theme="salmon"
  onDateSelect={(date) => {
    console.log(`The callback is accessing the date: ${date}`);
    return date;
  }}
  activeDates={null}
/>

As you can see, the callback function passed in can be defined outside of the component and console.log the date data giving us the following in our browser logs. Simple right? Now the component is ready to use in a form for date selections, calendars, or whatever creative things you want to create. Before we wrap things up, as developers we know that changes are inevitable. So let's take a look at how the component folders and files are organized in-case we need to modify or add more features later on.

Section 3: Folder structure of the component

There are many ways of designing a folder structure and often-times, when you start at a company, it is one of the first things you should figure out. A design pattern that is maintained by the team is an agreement that all team members sign off on (even if you weren't there when the decision was made). That being said, there is no right answer on what structure to use. In most cases, the best designs or conventions to use are dependent on the project and its requirement.

For the purpose of this small component, the folder structure is quite simple. We know that there is a index.js file holding the root component along with 4 sub-components:

CalendarHeader
WeekdayIndicator
DateIndicator
MonthIndicator

The folder structure I decided to use is one of many that are recommended on the React documentations and stems from a design methodology called Atomic Design. The basic premise of Atomic Design is that similar files are grouped together. In this case, all files related to the calendar component are grouped together.

Take a few minutes to look at the folder structure in the image.

As you can see, the root of the component folder an index.js and bae-calendar.scss files. Inside of it, there is another component folder that contains the sub-components of the calendar. Next to them are the related style files. Aside from this, there are 3 folders called constants, themes, and utils. Let's take a moment to discuss why I prefer to structure my component files like this.

Organization by responsibility

Sub-components are technically still components. They each have their own responsibilities. Looking further, it should be easy to see what file / folder is responsible for what. The themes folder only contains style files. It's responsibility is clearly the styling of the separate themes we added in Part 3 of this series. The constants is the enumerated data-sets that I don't expect to change dynamically. The utils is the reusable code that can be pulled into any of the components to use. Take a moment to think about what might be inside of the utils files. Consider back in Part 1 and Part 2 when we created some logic and date-formatting.

Easy to find

If at any point, I need to make modifications to a sub-component or its related style, it is easy to locate where the changes need to take place. The name of the files and its proximity to the related files mean less clicking and searching.

Easy to move

In the future, if I decide to reuse this code or decide that I no longer need it and delete the code, I only need to do it in one place. This entire folder contains only code related to the calendar. This means that I can delete or move the folder without any risk of the component breaking. We are ensuring one of the rules of programming which is do not create side-effects (whenever possible).

Can you think of any similar patterns to this? One of them is something called duck filing which is recommended by redux. I won't go into the details, but if interested, you can read more about Atomic Design or Duck Filing.

Wrapping things up

First of all, if you've read the series and found this information helpful, please let me know and thank you for taking a peek into the process. Programming is a crazy journey with tons of information, but grasping little amounts at a time make it easier for us to continue to learn. One challenge I want you to consider is to add a feature to your calendar component which allows others to give it pre-selected dates. An example would be if the programmer knows that a person has 10 events in 2020, how will you show that on the calendar?

It's been an interesting experience writing these for the series and I hope that this information benefits you to some degree. If there is anything else you would like to know, please don't hesitate to leave a commment below.

Creating a React Calendar Component: Part 3

Elbert Bae — Sun, 12 Jul 2020 20:24:00 +0000

Creating an appealing visual component can be an effective way to draw someone towards a part of your web application. In part 1 and part 2 of this series, we explored the logic behind the dates to display and the React code that used a set of dates to render a visible component in the browser. In this next part, we will explore the code that gives our component the visual appeal.

When I first began coding, I never enjoyed CSS as much as the other aspects of development. My first job had a singular CSS file controlling the entire web application's styling. Having limited experience with CSS at the time, this was an absolute nightmare. However, that experience is what drove me to further explore the best way to structure my CSS code moving forward and in future projects. Much like other parts of development, CSS has its own design patterns and practices which were further enabled by technologies such as SASS and Styled Components.

Before we begin, the following examples will be in SASS which is a superset of CSS. SASS is compiled into CSS, but allows functionality which make organizing styling code easier. My 3 favorite aspects of SASS is that it allows nesting of CSS for specificity, creating variables for reusability, and importability of SASS files into each other. Let's do a breakdown of what we'll be taking a look at today:

Styling the calendar header using Flexbox
Styling the month indicators using Flexbox
Styling the weekday indicators using Grid CSS
Styling the date indicators using Grid CSS
Adding in themes

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;
}

Great! Let's move on using the same flex tricks to our month indicators.

Section 2: Styling the month indicators using Flexbox

Similar to the CalendarHeader component, the MonthIndicator is a div element with 3 block elements inside.

<div className="bae-month-indicator">
  <h4 data-date={monthSet.prev} onClick={changeDate}>
    {monthsFull[getMonth(monthSet.prev)]}
  </h4>
  <h3>{monthsFull[getMonth(monthSet.current)]}</h3>
  <h4 data-date={monthSet.next} onClick={changeDate}>
    {monthsFull[getMonth(monthSet.next)]}
  </h4>
</div>

Here's how it looks with no styling...

And what we want to achieve...

It looks like we can apply similar flex properties so let's add the same things we did to the header.

.bae-month-indicator {
  display: flex;
  justify-content: space-between;
}

It looks pretty good so far. However, let me show you one thing. Although you can't tell, these 3 elements are not perfectly centered. This is a case where it probably doesn't matter too much, but it's fairly simple to ensure that all elements are centered vertically with one simple rule.

.bae-month-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

The property align-items is similar to justify-content. While the flex is in a row format, while justify-content works horizontally, align-items work vertically. A quick trick to center any item is to provide the parent a display: flex and justify-content: center with align-items: center and you ensure the item is centered inside of the parent element.

Knowledge of Flexbox can be incredibly useful. One of the best ways to learn Flexbox is through an interactive game which you can checkout here!

Section 3: Styling the weekday indicators using Grid CSS

Now that we've taken the time to see how Flexbox is applied to the calendar component, let's spend some time and explore the basics of Grid CSS. Similar to Flexbox, Grid is used to create the layout of the visual components in a web application. There are some differences between Flexbox and Grid, but for the most part, it is possible to achieve a similar layout result with both.

In my experience, I have some to utilise Flexbox and Grid for different scenarios. I use Flexbox primarily for positioning individual elements, but when it comes to repeated and predictable layouts, I prefer to use Grid. Let's explore this as we style the WeekdayIndicator.

Referring back to part 2 of the series, here is how the WeekdayIndicator looks as React code:

const weekdays ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

const WeekdayIndicator = () => {
  const weekdayIcons = weekdays.map((day, key) => {
    return (
      <div className="weekday-indicator-icon" key={key}>
        {day}
      </div>
    );
  });
  return <div className="bae-weekday-indicators">{weekdayIcons}</div>;
};

Which translates to the following HTML:

<div className="bae-weekday-indicators">
  <div className="weekday-indicator-icon">
    Sun
  </div>
  <div className="weekday-indicator-icon">
    Mon
  </div>
  <div className="weekday-indicator-icon">
    Tue
  </div>
  <div className="weekday-indicator-icon">
    Wed
  </div>
  <div className="weekday-indicator-icon">
    Thu
  </div>
  <div className="weekday-indicator-icon">
    Fri
  </div>
  <div className="weekday-indicator-icon">
    Sat
  </div>
</div>

Without any styling, here is what these elements look like with their natural block behaviors.

And here is what we want it to look like after styling it.

While Flexbox can certainly be used to achieve this outcome, we are going to use a combination of Grid to get the weekdays horizontal and evenly distributed while using Flexbox to center the text inside of each div.weekday-indicator-icon elements.

Let's start with the Grid using two properties called grid-template-columns and grid-template-rows.

.bae-weekday-indicators {
  display: grid;
  grid-template-columns: repeat(7, minmax(auto, 1fr));
  grid-template-rows: 1;
  padding: 15px // To keep padding consistent with the other components so far
}

In grid-template-columns, the value repeat(7, minmax(auto, 1fr)) is saying create 7 columns with inner elements with its minimum size to auto (change to fit) and maximum size to 1fr (1/7 of the total container size). As an example, you could make it have only 3 columns whereby it will override the grid-template-rows by overflowing and creating new rows to fit the number of inner elements inside of the parent container resulting in this.

Let's switch it back and move on. As you can see, the weekday indicator icons are not centered which we'll work on next by using the Flexbox concepts we used above. Since the grid lays out each of the containers wrapping the weekday texts, we need to add some styling to elements with the class name weekday-indicator-icon.

.bae-weekday-indicators {
  display: grid;
  grid-template-columns: repeat(7, minmax(auto, 1fr));
  grid-template-rows: 1;
  padding: 15px;
  .weekday-indicator-icon {
    height: 25px;
    width: 25px;
    display: flex;
    justify-self: center;
    justify-content: center;
    align-items: center;
    padding: 5px;
    font-weight: bold;
    cursor: pointer;
  }
}

As you can see, I applied the Flexbox trick of centering using justify-content: center and align-items: center. This ensures that the elements internal to the div.weekday-indicator-icon are centered. But, what is justify-self doing? In this case, we're applying a horizontal CSS property, but to the element by referring to itself. Here is an example of how the elements look without justify-self: center and below that, with it.

Section 4: Styling the date indicators using Grid CSS

Now that we have the grid example above with the WeekdayIndicator component, let's apply those same changes to the DateIndicator to achieve this.

As a quick refresher, here's the DateIndicator component.

const DateIndicator = ({ activeDates, selectDate, setSelectDate }) => {
  const changeDate = (e) => {
    setSelectDate(e.target.getAttribute('data-date'));
  };

  const datesInMonth = getDatesInMonthDisplay(
    getMonth(selectDate) + 1,
    getYear(selectDate)
  );

  const monthDates = datesInMonth.map((i, key) => {
    const selected = getMonthDayYear(selectDate) === getMonthDayYear(i.date) ? 'selected' : '';

    return (
      <div
        className=`date-icon ${selected}`
        data-active-month={i.currentMonth}
        data-date={i.date.toString()}
        key={key}
        onClick={changeDate}
      >
        {getDayOfMonth(i.date)}
      </div>
    );
  });

  return <div className="bae-date-indicator">{monthDates}</div>;
};

There are two things we want to do here. One is setup the grid using the same principles above using Grid CSS. The other, is visually distinguishing between the active dates in the current month, versus the overflow dates of the previous and following months. The grid part should be simple, so here's what we'll add.

.bae-date-indicator {
  display: grid;
  grid-template-columns: repeat(7, minmax(auto, 1fr));
  grid-template-rows: repeat(6, minmax(35px, 1fr));
  grid-gap: 5px;
  padding: 0 15px;
  .date-icon {
    display: flex;
    justify-content: center;
    justify-self: center;
    align-items: center;
    height: 25px;
    width: 25px;
    padding: 5px;
    cursor: pointer;
  }
}

Now, we want to fade out the overflow dates. Looking at the component code, we can see that the data attribute data-active-month={i.currentMonth} is applied. This can either be data-active-month="true" or data-active-month="false", providing us with a simple way to identify what is the current month or not in our CSS with the following change to target elements with the specificity .bae-date-indicator .date-icon[data-active-month="false"].

.bae-date-indicator {
  display: grid;
  grid-template-columns: repeat(7, minmax(auto, 1fr));
  grid-template-rows: repeat(6, minmax(35px, 1fr));
  grid-gap: 5px;
  padding: 0 15px;
  .date-icon {
    display: flex;
    justify-content: center;
    justify-self: center;
    align-items: center;
    height: 25px;
    width: 25px;
    padding: 5px;
    cursor: pointer;
    &[data-active-month='false'] {
      color: rgba(0, 0, 0, 0.3);
    }
  }
}

That's it! The last thing we're going to add is the styling for elements with the selected class name which we will use to improve our UI by making it clear to our users which date is currently selected on the calendar.

.bae-date-indicator {
  display: grid;
  grid-template-columns: repeat(7, minmax(auto, 1fr));
  grid-template-rows: repeat(6, minmax(35px, 1fr));
  grid-gap: 5px;
  padding: 0 15px;
  .date-icon {
    display: flex;
    justify-content: center;
    justify-self: center;
    align-items: center;
    height: 25px;
    width: 25px;
    padding: 5px;
    cursor: pointer;
    &[data-active-month='false'] {
      color: rgba(0, 0, 0, 0.3);
    }
    &.selected {
      border-radius: 50%;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    }
  }
}

At this point, putting our components together with styling should look like this.

Section 5: Adding in themes

Now that we have the layout in place for our component, let's add a little bit of life to it by adding colors. Color matching and design is definitely not my strong suite which is why I want to make this as easy to modify as possible. To apply our themes, we're going to take advantage of CSS specificity rules by using nesting in SASS. Here is our root bae-calendar.sass file.

.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;
  }
  &.salmon-theme {
    @import './themes/salmon.sass';
  }

  @import './components/calendar-header.sass';
  @import './components/weekday-indicator.sass';
  @import './components/date-indicator.sass';
}

As you can see, this root SASS file imports multiple SASS files consisting of the styling for each of our individual sub-components that we styled above. You also see that there is a new file under a class name salmon-theme imported with the & selector to apply styles on elements with .bar-calendar-container.salmon-theme. Here is where we will outline the theme styles for our calendar component.

Inside of our salmon.sass file, we have the following:

$primaryColor: #fa8072;
$secondaryColor: #ffa98f;
$highlightTextColor: #d95e39;
$activeTextColor: #f8f8ff;

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $activeTextColor;
}

.bae-calendar-header {
  background-color: $primaryColor;
}

.bae-weekday-indicators {
  .weekday-indicator-icon {
    color: $highlightTextColor;
    &.active {
      background-color: $primaryColor;
      color: $activeTextColor;
    }
  }
}

.bae-date-indicator {
  .date-icon {
    &.active {
      background-color: $secondaryColor;
      color: $activeTextColor;
    }
    &.selected {
      background-color: $primaryColor;
      color: $activeTextColor;
    }
  }
}

.bae-month-indicator {
  background-color: $primaryColor;
}

Without going into much detail, can you see how we utilise SASS variable names and the organization of the theme file? Easy to understand right? All of our texts will apply the color: $activeTextColor and we see some other changes in the background-color properties as well. Here's how the component looks with this style.

Easy right? Can you see how we can take advantage of the way this has been organized? All we need to do now is select the colors we want for the following variables:

$primaryColor: #fa8072;
$secondaryColor: #ffa98f;
$highlightTextColor: #d95e39;
$activeTextColor: #f8f8ff;

For example, monochrome-theme uses the following variables.

$primaryColor: #646e78;
$secondaryColor: #8d98a7;
$highlightTextColor: #6d7c90;
$activeTextColor: #f8f8ff;

Once we change these variables, we can copy it to a new file and import it again like this.

.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;
  }
  &.salmon-theme {
    @import './themes/salmon.scss';
  }
  &.monochrome-theme {
    @import './themes/monochrome.scss';
  }

  @import './components/calendar-header.scss';
  @import './components/weekday-indicator.scss';
  @import './components/date-indicator.scss';
}

To make things easier for our users, we can create preset themes and allow them to use the components by specifying which class names to append to the main element. As an example, our calendar component can do something like this to accept a prop called theme which translates to a specific className.

import React, { useState } from 'react';
import { getToday } from './utils/moment-utils';
import './bae-calendar.scss';

import CalendarHeader from './components/calendar-header';
import WeekdayIndicator from './components/weekday-indicator';
import DateIndicator from './components/date-indicator';
import MonthIndicator from './components/month-indicator';
// https://uicookies.com/html-calendar/

import { presetDateTracker } from './utils/date-utils';

// preset themes that are available
const themes = {
  salmon: 'salmon-theme',
  monochrome: 'monochrome-theme',
  rouge: 'rouge-theme',
};

const BaeCalendar = ({ theme, activeDates, onDateSelect }) => {
  const presetActiveDates = useRef(presetDateTracker(activeDates || []));
  const [selectDate, setSelectDate] = useState(getToday());

  // Add the theme name to the main container `${themes[theme]}`
  return (
    <div className={`bae-calendar-container ${themes[theme]}`}>
      <CalendarHeader selectDate={selectDate} />
      <WeekdayIndicator />
      <DateIndicator
        activeDates={presetActiveDates.current}
        selectDate={selectDate}
        setSelectDate={setSelectDate}
      />
      <MonthIndicator selectDate={selectDate} setSelectDate={setSelectDate} />
    </div>
  );
};

export default BaeCalendar;

This can then be imported as such...

<BaeCalendar
  theme="monochrome"
/>

And that's it! Hope this information provide some insight in how you can organize the styling for your components. Style files require just as much organization and design as other areas of code so make sure you don't skip out on careful planning when you are creating your next front-end projects. In the next part, I'll show you how the component files were structured and add a few features that will allow our component users to get the date they select back to use within their own programs as well as pass in pre-selected dates.

Creating a React Calendar Component: Part 2

Elbert Bae — Fri, 10 Jul 2020 02:24:00 +0000

Looking at a new framework in web development can be daunting. Technology moves quickly in this industry and learning new skills is a necessity. Thankfully, new skills don’t mean the we need to learn a new framework every time we start a new project. Diving deeper into an existing one or even revisiting it after some time to stay up to date with new changes are just as important.

In part one of this series, we explored the logic behind creating the dates for us to display on our React calendar component. Now, we will dive into React itself and how the calendar component takes shape in the world of JSX using the function getDatesInMonthDisplay we created in part 1. If you are not familiar with how we created this function and want to know, check out part one of the series.

Before we begin, I will not be doing a deep dive into how React works with the assumption that you, my readers, understand the basic concepts of React’s rendering engine and how it is controlled by state and props . If you are not familiar with React, I recommend creating a simple project to understand the fundamental concepts with their official get started page. Otherwise, read on!

Here is the completed React component and today, we will be pulling this apart into 4 parts.

Calendar header component
Weekday indicator component
Date indicator component
Month indicator component

Throughout each part, we will spend time on state management as we discuss the reasons behind why

Section 1: Calendar header

React is most commonly used in single page applications and if coded correctly, can be incredibly efficient in re-rendering parts of the web or application as data changes. This is done through something called state whereby the code looks for changes in data for defined states we want to track.

Since the calendar component wants to display one month at a time, let’s get it to show the month of the date the user selects.

import React, { useState } from 'react';  
import moment from 'moment'  
import './bae-calendar.scss';

const BaeCalendar = () => {  
  const [selectDate, setSelectDate] = 
  useState(moment().toDate());

  return (  
    <div className="bae-calendar-container">  
      Hello World  
    </div>  
  );  
};

export default BaeCalendar;

Using React’s useState hook, we create a state called selectDate like this and set an initial state by using MomentJs to call moment().toDate() to get today’s date object (e.g. 2020–07–08T00:00:00.000Z ).

...  
const [selectDate, setSelectDate] = useState(moment().toDate());  
...

Now that we have a date object to work with, let’s take a look at our calendar header. The calendar, in my view, has 4 logical components and the header was the easiest place to start. Here is the full component and how the sub-component called CalendarHeader is pulled into the BaeCalendar component which will be the root file index.js of the folder.

import React, { useState } from 'react';  
import moment from 'moment'  
import './bae-calendar.scss';

import CalendarHeader from './components/calendar-header';

const BaeCalendar = () => {  
  const [selectDate, setSelectDate] = 
  useState(moment().toDate());

  return (  
    <div className={`bae-calendar-container ${themes[theme]}`}>  
      <CalendarHeader selectDate={selectDate}/>  
    </div>  
  );  
};

export default BaeCalendar;

Here is how the CalendarHeader looks on it’s own!

Let’s take a look at the header component file that utilizes MomentJs to format the date object into what we need. Simple right? MomentJs’s formatting capabilities are top knotch and if you want to learn more, check out the documentation on what the MMMM do and dddd do in their official documentation.

import React from 'react';  
import moment from 'moment'

const CalendarHeader = ({ selectDate }) => {  
  return (  
    <div className="bae-calendar-header">  
      <div className="left-container">  
        <h1>{moment(selectDate).format('dddd')}</h1>  
        <h1>{moment(selectDate).format('MMMM Do')}</h1>  
      </div>  
      <div className="right-container">  
        <h3>{moment(selectDate).year()}</h3>  
      </div>  
    </div>  
  );  
};

export default CalendarHeader;

You’ll also notice here that somehow, our CalendarHeader component has access to a state we created in the main BaeCalendar parent component. This is done by passing in what we call props . Here is how it looks in the main component as it passes in the props:

<CalendarHeader selectDate={selectDate}/>

And accessed in the CalendarHeader component:

const CalendarHeader = ({ selectDate }) => {  
  ...  
}

Now this component has access to this data! Props can be anything and does not have to be strictly state data, so get creative. If you’re still not sure how props work, check out React’s official get started page and create a small project to play around.

Now.. this is a great start, but there’s something we can improve. We are going to be doing a lot of formatting throughout the calendar component and duplicate code is bad. So, let’s take a moment here and create a utility file called moment-utils.js which will handle the formatting for us. Below is all of the various formats we’ll end up using in our component and we will use this moving forward.

import moment from 'moment';

export const getSpecificDate = (month, dayOfMonth, year) => {  
  return moment(`${month}-${dayOfMonth}-${year}`, 'MM-DD-YYYY').toDate();  
};

export const getDayOfMonth = (date) => moment(date).date();

export const getMonth = (date) => moment(date).month();

export const getYear = (date) => moment(date).year();

export const getToday = () => moment().toDate();

export const getReadableWeekday = (date) => moment(date).format('dddd');

export const getReadableMonthDate = (date) => moment(date).format('MMMM Do');

export const getMonthDayYear = (date) => moment(date).format('MM-DD-YYYY');

So our CalendarHeader will now look like this.

import React from 'react';  
import {  
  getReadableMonthDate,  
  getReadableWeekday,  
  getYear,  
} from '../utils/moment-utils';

const CalendarHeader = ({ selectDate }) => {  
  return (  
    <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>  
  );  
};

export default CalendarHeader;

Section 2: Weekday indicator component

Now the next section we’ll tackle is the weekday indicator showing the [Sunday — Saturday] representation in our component.

import React, { useState } from 'react';  
import { getToday } from './utils/moment-utils';  
import './bae-calendar.scss';

import CalendarHeader from './components/calendar-header';  
import WeekdayIndicator from './components/weekday-indicator';

const BaeCalendar = () => {  
  const [selectDate, setSelectDate] = useState(moment().toDate());  
  return (  
    <div className={`bae-calendar-container ${themes[theme]}`}>  
      <CalendarHeader selectDate={selectDate}/>  
      <WeekdayIndicator />  
    </div>  
  );  
};  

export default BaeCalendar;

The WeekdayIndicator is quite simple. For all intents and purposes, we don’t actually need to pass any state or props to it. In fact, it’s responsibility is singular which is to display the days of the week.

import React from 'react';

const WeekdayIndicator = () => {  
  return (  
    <div className="bae-weekday-indicators">  
      <div className="weekday-indicator-icon">  
        Sun  
      </div>  
      <div className="weekday-indicator-icon">  
        Mon  
      </div>  
      <div className="weekday-indicator-icon">  
        Tue  
      </div>  
      <div className="weekday-indicator-icon">  
        Wed  
      </div>  
      <div className="weekday-indicator-icon">  
        Thu  
      </div>  
      <div className="weekday-indicator-icon">  
        Fri  
      </div>  
      <div className="weekday-indicator-icon">  
        Sat  
      </div>  
    </div>;  
  )  
};

export default WeekdayIndicator;

Technically this works, but what a pain typing it out! Let’s re-do this in the “Ways of React”.

import React from 'react';

const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

const WeekdayIndicator = () => {  
  const weekdayIcons = weekdays.map((day, key) => {  
    return (  
      <div className="weekday-indicator-icon" key={key}>  
        {day}  
      </div>  
    );  
  });  
  return <div className="bae-weekday-indicators">{weekdayIcons}</div>;  
};

export default WeekdayIndicator;

First, by creating an array of the weekdays, we can utilise JavaScript's .map iterator method to create React JSX code. Since .map returns a new array, this new array assigned to the variable weekdayIcons which returns the following per iteration…

<div className="weekday-indicator-icon" key={key}>  
  {day}  
</div>

You’ll notice a few things here. Why does every element have a key prop passed into it and what is {...} doing?

When creating multiple elements using a loop, React expects you to pass a key prop of unique values. Otherwise, it will complain with a warning which is always annoying to see in our web consoles. As for the curly braces, React automatically assumes any data put inside of it can be a variable. Of course, you can pass in a string value, but that defeats the purpose of its use.

This allows us to pass the weekdayIconsinto the wrapping div element to have the same result as typing out each element individually like this.

...  
return <div className="bae-weekday-indicators">{weekdayIcons}</div>  
...

Here’s where we are at now!

Section 3: Date indicator

Thankfully in the previous post (calendar date display logic), we did the bulk of the work to create the date indicators.

import React, { useState } from 'react';  
import { getToday } from './utils/moment-utils';  
import './bae-calendar.scss';

import CalendarHeader from './components/calendar-header';  
import WeekdayIndicator from './components/weekday-indicator';  
import DateIndicator from './components/date-indicator';

const BaeCalendar = () => {  
  const [selectDate, setSelectDate] = useState(moment().toDate());  
  return (  
    <div className={`bae-calendar-container ${themes[theme]}`}>  
      <CalendarHeader selectDate={selectDate}/>  
      <WeekdayIndicator />  
      <DateIndicator  
        selectDate={selectDate}  
        setSelectDate={setSelectDate}  
      />  
    </div>  
  );  
};  

export default BaeCalendar;

You’ll notice we’re passing in two props to the DateIndicator component, but for this part of the series, ignore the second one called setSelectDate and focus on how we will useselectDate. Let’s take a look!

import React from 'react';  
import {  
  getDayOfMonth,  
  getMonthDayYear,  
  getMonth,  
  getYear,  
} from '../utils/moment-utils';  
import { getDatesInMonthDisplay } from '../utils/date-utils';

const DateIndicator = ({ selectDate, setSelectDate }) => {  
  const datesInMonth = getDatesInMonthDisplay(  
    getMonth(selectDate) + 1,  
    getYear(selectDate)  
  );

  const monthDates = datesInMonth.map((i, key) => {  
    return (  
      <div  
        className="date-icon"}  
        data-active-month={i.currentMonth}  
        data-date={i.date.toString()}  
        key={key}  
        onClick={changeDate}  
      >  
        {getDayOfMonth(i.date)}  
      </div>  
    );  
  });

return <div className="bae-date-indicator">{monthDates}</div>;  
};

export default DateIndicator;

By utilizing MomentJs and the helper functions getMonth and getYear , we can get an array of objects with properties date and currentMonth using the selectDate prop! So whichever date the selectDate represents, the DateIndicator is able to use getDatesInMonthDisplay to pull every single date in any month and year.

First, aren’t you glad that we already went through the logic of determining how many dates in the month we need for the display in the getDatesInMonthDisplay function before?

Similar to how we created each day of the week in the WeekIndicator component, we utilize the .map iterator here as well. Rightfully so, because if we had to type this out 42 times… well let me go get some beer first.

const monthDates = datesInMonth.map((i, key) => {  
  return (  
    <div  
      className="date-icon"  
      data-active-month={i.currentMonth}  
      data-date={i.date.toString()}  
      key={key}  
    >  
      {getDayOfMonth(i.date)}  
    </div>  
 );  
});

Let’s break down how we are utilising each item in the array which represents an object with the properties date (date object) and currentMonth (boolean).

First, the div element has a inner content using getDayOfMonth(i.date) which is making use of moment(_date_).date() returning the numerical day of the month. If we didn’t do this and simply passed i.date.toString() (.toString() because we can’t pass a date object into HTML)… well, here’s the chaos that would have any UX/UI designer screaming at you.

Ew…

However, this date object is incredibly useful even if it is not friendly to see on the UI of the component which is why we pass it into the data-attribute called data-date as a string. Here is how the element looks in the web console.

Simply by using vanilla Javascript, we could do something to have access to the date object of a specific element which we will utilise later on like this.

document.querySelector('.selected[data-date]').getAttribute('data-date')  
// Fri Jul 10 2020 00:00:00 GMT-0700 (Pacific Daylight Time)

Finally, data-active-month={i.currentMonth} provides a "true" or "false" to the data attribute. Can you guess what it’s used for? If you are not sure, make sure you follow up for the third part of this series where I will discuss it further.

Given where we are now, we have enough to make our component interactive. As you can see in a few of the photos, there is a circle highlight that represents the selected date by a user. Let’s see how that works with the useState React hook called setSelectDate .

import React from 'react';  
import {  
  getDayOfMonth,  
  getMonthDayYear,  
  getMonth,  
  getYear,  
} from '../utils/moment-utils';  
import { getDatesInMonthDisplay } from '../utils/date-utils';

const DateIndicator = ({ activeDates, selectDate, setSelectDate }) => {

  // EVENT HANDLING CALLBACK  
  const changeDate = (e) => {  
    setSelectDate(e.target.getAttribute('data-date'));  
  };

  const datesInMonth = getDatesInMonthDisplay(  
    getMonth(selectDate) + 1,  
    getYear(selectDate)  
  );

  const monthDates = datesInMonth.map((i, key) => {  
    const selected =  
      getMonthDayYear(selectDate) === getMonthDayYear(i.date) ? 'selected' : '';  
    const active =  
      activeDates && activeDates[getMonthDayYear(i.date)] ? 'active' : '';

    return (  
      <div  
        className={`date-icon ${selected} ${active}`}  
        data-active-month={i.currentMonth}  
        data-date={i.date.toString()}  
        key={key}

        // EVENT HANDLER  
        onClick={changeDate}  
      >  
        {getDayOfMonth(i.date)}  
      </div>  
    );  
  });

  return <div className="bae-date-indicator">{monthDates}</div>;  
};

export default DateIndicator;

Taking a look at the code above, find setSelectDate and you will notice that it is used inside of a function called changeDate . Javascript by nature is a browser language and event handling is its specialty. If you are not familiar with events in Javascript, read about it in MDN, it is the bread and butter of the browser language.

Following where changeDate is used, you’ll notice that each date-icon element has a prop called onClick that passes in the changeDate as a callback function. This means that when any of the date-icon elements are clicked, it will trigger the function setting off the setSelectDate . The value it passes as the argument to setSelectDate utilises what I showcased above using the data attribute data-date .

The code below responds to the click event which is represented by e . By accessing the target and the data-date attribute, we can grab the new date we want to select and change the state called selectDate .

(e) => e.target.getAttribute('data-date')

By now, you can change the function changeDate to the following to see the new selected date be console logged into the web console, but since you have not yet applied any styling, you won’t see the changes in the icon. However, since the state is still changing, you should see the CalendarHeader component’s data update as it re-renders any components utilising the state selectDate !

const changeDate = (e) => {  
  console.log(e.target.getAttribute('data-date');  
  setSelectDate(e.target.getAttribute('data-date'));  
}

Almost there… Section 4: Month indicators

By now, you should have a functioning calendar component that can change the CalendarHeader data with new selected dates and even change the month’s display by clicking one of the overflow dates. Let’s wrap up part 2 of this series by adding in the MonthIndicator component!

import React, { useState } from 'react';  
import { getToday } from './utils/moment-utils';  
import './bae-calendar.scss';  
import CalendarHeader from './components/calendar-header';  
import WeekdayIndicator from './components/weekday-indicator';  
import DateIndicator from './components/date-indicator';  
import MonthIndicator from './components/month-indicator';

const BaeCalendar = () => {  
  const [selectDate, setSelectDate] = useState(moment().toDate());  
  return (  
    <div className={`bae-calendar-container ${themes[theme]}`}>  
      <CalendarHeader selectDate={selectDate}/>  
      <WeekdayIndicator />  
      <DateIndicator  
        selectDate={selectDate}  
        setSelectDate={setSelectDate}  
      />  
      <MonthIndicator   
        selectDate={selectDate}   
        setSelectDate={setSelectDate}  
      />  
    </div>  
  );  
};  

export default BaeCalendar;

Last sub-component to do, let’s get in there take a look at how it’s constructed.

import React from 'react';  
import { getMonth } from '../utils/moment-utils';  
import { getMonthSet } from '../utils/date-utils';  
import './month-indicator.scss';

import { monthsFull } from '../constants/dates';

const MonthIndicator = ({ selectDate, setSelectDate }) => {  
  const changeMonth = (e) => {  
    setSelectDate(e.target.getAttribute('data-date'));  
  };

  const monthSet = getMonthSet(selectDate);

  return (  
    <div className="bae-month-indicator">  
      <h4 data-date={monthSet.prev} onClick={changeMonth}>  
        {monthsFull[getMonth(monthSet.prev)]}  
      </h4>  
      <h3>{monthsFull[getMonth(monthSet.current)]}</h3>  
      <h4 data-date={monthSet.next} onClick={changeMonth}>  
        {monthsFull[getMonth(monthSet.next)]}  
      </h4>  
    </div>  
  );  
};

export default MonthIndicator;

We see two props again here (selectDate and setSelectDate ). By now, it’s clear why we need selectDate . Using the current selected date, we can pull out the current, previous, and following month. Can you think of any challenges we might have determining the previous and following months based on the current one?

Two months immediately come to mind which are December and January . By design, we want these elements to be clickable to change the month on display. If we only took the current month and used moment to subtract or add a month, it obviously would not work for all cases. Going from January to December means that the year changes with the same logic applied in reverse.

So… let’s create a little helper function to handle this for us!

const getMonthSet = (selectDate) => {  
  const month = getMonth(selectDate) + 1;  
  const result = {  
    current: selectDate,  
    prev: getSpecificDate(month - 1, 1, getYear(selectDate)),  
    next: getSpecificDate(month + 1, 1, getYear(selectDate)),  
  };

  if (month === 1) {  
    result.prev = getSpecificDate(12, 1, getYear(selectDate) - 1);  
  }

  if (month === 12) {  
    result.next = getSpecificDate(1, 1, getYear(selectDate) + 1);  
  }

  return result;  
};

Straightforward right? By getting the month of the currently selected date (+1 since months return in indexed form), we can use MomentJs to construct the prev and next month’s date objects. If the month is 1 for January, we will grab the year and subtract one. If the month is 12 for December, do the opposite and add one.

Similar to the date-icons in the DateIndicator component, this one adds the data-attribute data-date to the previous and following month elements.

...  
<div className="bae-month-indicator">  
  <h4 data-date={monthSet.prev} onClick={changeMonth}>  
    {monthsFull[getMonth(monthSet.prev)]}  
  </h4>  
  <h3>{monthsFull[getMonth(monthSet.current)]}</h3>  
  <h4 data-date={monthSet.next} onClick={changeMonth}>  
    {monthsFull[getMonth(monthSet.next)]}  
  </h4>  
</div>  
...

As you can see, these two elements also appear to have a onClick event listener calling the function changeMonth . Simlar to the callback function in the DateIndicator , it’s changing the state selectDate by calling setSelectDate .

Bit problematic though. The name changeMonth seems a bit misleading, because we’re technically changing the whole date of the selectDate state and this code is duplicated! Moments like these are where you should consider refactoring this to reduce duplicated code and change names of functions to be more accurate with its intended behavior.

For now, let’s change the name to changeDate and leave it in the component. In cases like these, there are many opinions on whether to refactor the duplicate code. However, for a small project, I prefer to keep callback functions in the component where they are used. This is something that should be reconsidered as a project gets larger over time, but this should be fine for now.

Component with Styling

Not bad right? By now you should have a functioning React calendar component that changes dates in the CalendarHeader and MonthIndicator as you click the dates.

If you want to take a look at the code for the entire component, take a look at the Github repository.

In the last and final part of this series, we will add some features to the component that makes it usable for others, show selected dates, as well as the styling. Some concepts we will touch upon is component re-usability, style sheet organisation, and general CSS/SASS tricks using Flex and Grid.

Hope you enjoyed reading and found it useful to inspire you to continue developing your skills with fun mini-projects!

Creating a React Calendar Component: Part 1

Elbert Bae — Fri, 10 Jul 2020 02:04:00 +0000

In a recent discussion with a colleague of mine, we touched upon the subject of projects for our portfolios. The conversation eventually touched upon the idea that you don’t need to create huge functioning programs to showcase your knowledge. Mini-projects are more than enough to showcase a specific skill-set, something I kept in mind as I worked on my next item.

In my everyday work, I am primarily a back-end developer working with NodeJs and serverless frameworks. Every once in a while, I’ll work on front-end code, but always find myself struggling to grasp the latest changes that my colleagues put out into our product. With this in mind, I set about creating my own components while brushing up on my knowledge with React. So in this 4 part series, I will show how I went about creating a calendar component in React.

Please note, that I will not be going deep into the setup of the project and going straight into the process. If you want more knowledge or an easy way to start your own React App, check out Create React App.

Created using React, Javascript, and MomentJs

In this post (part 1), we will strictly look at the logic that went into generating the days of the month and the overflow dates of the previous and following month. Having come across little “gotcha” moments, I hope that this post will provide some knowledge and an interesting read for you if you choose to create your own components in the future.

At a quick glance, a calendar seems simple and straightforward. Let’s grab a bunch of dates and slap it on a screen! Of course, things aren’t as simple as we want them to be and a few things had to be considered before writing any code:

How do I get the number of days in a given month?
How do I know the first day of the week for a given month?
How do I get the overflow dates of the previous/following months?

Before moving forward, I encourage you to take a moment and think about how you would go about this. After all, mental exercise keeps you fit!

Challenge 1: How do I get the number of days in a given month?

Dates are a tricky thing in programming and the Javascript and NodeJs community have a special place in their hearts for MomentJs. This challenge is simple with the amazing functionality this library provides which we will be taking advantage of by installing the package in our project root with npm install --save moment .

MomentJs has the function daysInMonth() . Problem solved! Let’s see what it gives when you give it a month.

import moment from 'moment';

const getDaysInMonth = (month) => {  
  return moment(month, 'MM').daysInMonth();  
}

// '01' = January...  
console.log(getDaysInMonth('01'))

The console should spit back 31 as the result. Simple right? This works, but this has a few challenges. Moment by default assumes any missing information by getting it from the current date which means that this is getting the days of the month of January 2020 even though we don’t pass in the year directly. Of course 2020 is a unique year… which you guessed, a leap year!

This function would work if I passed in getDaysInMonth('02') // 29 , but what if I want the days of February in 2019? Thankfully, MomentJs has functionality to handle that for us.

import moment from 'moment';

const getDaysInMonth = (month, year) => {  
  return moment(\`${month}-${year}\`, 'MM-YYYY').daysInMonth();  
}

console.log(getDaysInMonth(2, 2019))

Ta da! Challenge solved. The function can now accept the month and the year as its arguments and correctly determine the number of days in the month of a specific year.

Challenge 2: How do I know the first day of the week for a given month?

This challenge is a relatively simple one, so I won’t spend too much time on this. However, let’s take some time to figure out why we want this information. If you’ve seen most date objects in Javascript, you’ll see something like this:

new Date() // 2020-07-07T05:00:00:000Z

There are two ways to do this. First, lets take a look at the vanilla Javascript way:

const getFirstWeekdayOfMonth = (month, year) => {  
  return new Date(year, month, 1).getDay()  
}

// Note, the month and result is 0-indexed  
console.log(getFirstWeekdayOfMonth(0, 2020))

The month is represented as 0 which equals January so the first weekday of January in 2020 was Wednesday which is indexed at 3. If you’re confused about the indexing, [0, 1, 2, 3, 4, 5, 6] = Sunday — Saturday. The solution is simple and for the most part will work, but working with dates is a pain and little caveats here and there cause some challenges. Still, it is good to know so if you are interested, learn more about Javascript Dates.

Now, let’s take advantage of MomentJs to do the same thing!

const getFirstWeekdayOfMonth = (month, year) => {  
  return moment(  
    \`${month}-${year}\`,   
    'MM-YYYY'  
  ).startOf('month').weekday()  
}

// Note, since we use MomentJs's formatting, we do not index the month. This is getting the first weekday of the month for January 2020. Result is 0-indexed  
console.log(getFirstWeekdayOfMonth(1, 2020))

Simple, result is the same with 3!

Challenge 3: How do I get the overflow dates of the previous/following months?

The last challenge is to figure out exactly how many days we need to show in the overflow of the previous and following months. Looking at this picture of the finished component, we want the information regarding the dates that are greyed out.

But before we begin, let’s do some quick logic.

We know that there can be anywhere from 28–31 days in a given month. In one week, there are 7 days. Assuming that the first day of the month can be on any given weekday, we want to know how many weeks a given month can be a part of. Taking a look at the picture above, we know that July 2020 lands on 5 weeks. But, wait… what if the first day of the month is Saturday?

If the first day of the month is Saturday, a month can be a part of 6 weeks. Given that 31 days is the maximum number of days in a month, 6 weeks is the most any given month can be a part of. This is considering no new date conventions arise in our lifetimes. I hope that I won’t be around when developers need to start working with dates across multiple planets!

Since we know that 6 weeks is the maximum number of weeks any given month can be a part of, let’s say that our calendar needs to show a total of 42 dates (7 * 6 = 42).

Now, let’s figure out the previous month’s overflow dates. To do so, we need to know the current month and first weekday to display using the functions we created above. First, let’s add the first month into an array after constructing the date using MomentJs.

const getDatesInMonthDisplay = (month, year) => {  
  const daysInMonth = getDaysInMonth(month, year);  
  const firstWeekday = getFirstWeekdayOfMonth(month, year);  
  const result = \[\];

  for (let i = 1; i <= daysInMonth; i++) {  
    result.push(  
      moment(\`${month}-${i}-${year}\`, 'MM-DD-YYYY').toDate()  
    )  
  }

  return result;  
}

// July 2020

// Note, since we use MomentJs's formatting, we do not index the month. This is getting the first weekday of the month for January 2020. Result is 0-indexed

console.log(getDatesInMonthDisplay(7, 2020))

The result should consist of an array of date objects representing each day of the month of July 2020.

[ 
  2020-07-01T07:00:00.000Z,  
  2020-07-02T07:00:00.000Z,  
  2020-07-03T07:00:00.000Z,  
  2020-07-04T07:00:00.000Z,  
  2020-07-05T07:00:00.000Z,  
  ...  
]

Taking a look at the firstWeekday variable, we can determine how many days of the previous month we need in our overflow. For July 2020, the first weekday, as we determined above, is Wednesday or an index number of 3. Therefore, we know that we need 3 days of the previous month to complete a full week at the start of the month display… [0, 1, 2…].

First, let’s add two quick helper functions to determine the previous/following month and years!

const getPrevMonthYear = (month, year) => {  
  // If it is January... prev month is Dec of the previous year  
  if (month === 1) {   
    return {  
      month: 12,  
      year: year - 1  
    }  
  }

  // Otherwise, same year, but month - 1  
  return {  
    month: month - 1,  
    year  
  }  
}

const getNextMonthYear = (month, year) => {  
  // If it is January... prev month is Dec of the previous year  
  if (month === 1) {   
    return {  
      month: month + 1,  
      year  
    }  
  }

// Otherwise, same year, but month - 1  
  return {  
    month: 12,  
    year: year + 1  
  }  
}

Now, using the helper function…

const getDatesInMonthDisplay = (month, year) => {  
  const daysInMonth = getDaysInMonth(month, year);  
  const firstWeekday = getFirstWeekdayOfMonth(month, year);  
  const result = \[\];

  const prev = getPrevMonthYear(month, year);  
  const prevDaysInMonth = getDaysInMonth(  
    prev.month,   
    prev.year  
  );

  // Add prev overflow dates...   
  for (let j = firstWeekday - 1; j >= 0; j--) {  
    result.push(  
      moment(  
        \`${prev.month}-${prevDaysInMonth - j}-${prev.year}\`,   
        'MM-DD-YYYY'  
      ).toDate()  
    )  
  }

  // Add current month's dates  
  for (let i = 1; i <= daysInMonth; i++) {  
    result.push(  
      moment(\`${month}-${i}-${year}\`, 'MM-DD-YYYY').toDate()  
    )  
  }

  return result;  
}

// July 2020

// Note, since we use MomentJs's formatting, we do not index the month. This is getting the first weekday of the month for January 2020. Result is 0-indexed

console.log(getDatesInMonthDisplay(7, 2020))

Now we should have the array correctly start with the previous month’s days leading up to the first weekday of the current active month on display. Let’s fill up the rest with the next month’s overflow dates!

Using the helper getNextMonthYear …

const getDatesInMonthDisplay = (month, year) => {  
  const daysInMonth = getDaysInMonth(month, year);  
  const firstWeekday = getFirstWeekdayOfMonth(month, year);  
  const result = \[\];

const prev = getPrevMonthYear(month, year);  
  const prevDaysInMonth = getDaysInMonth(  
    prev.month,   
    prev.year  
  );

  // Add prev overflow dates...   
  for (let j = firstWeekday - 1; j >= 0; j--) {  
    result.push(  
      moment(  
        \`${prev.month}-${prevDaysInMonth - j}-${prev.year}\`,   
        'MM-DD-YYYY'  
      ).toDate()  
    )  
  }

  // Add current month's dates  
  for (let i = 1; i <= daysInMonth; i++) {  
    result.push(  
      moment(\`${month}-${i}-${year}\`, 'MM-DD-YYYY').toDate()  
    )  
  }

  // Overflow dates for next month to meet 42 days per month display   requirement  
  if (result.length < 42) {  
    const daysToAdd = 42 - result.length;  
    const next = getNextMonthYear(month, year);

    for (let k = 1; k <= daysToAdd; k++) {  
      result.push(  
        moment(  
          \`${next.month}-${k}-${next.year}\`,   
          'MM-DD-YYYY'  
        ).toDate()  
      )  
    }  
  }

  return result;  
}

// July 2020

// Note, since we use MomentJs's formatting, we do not index the month. This is getting the first weekday of the month for January 2020. Result is 0-indexed

console.log(getDatesInMonthDisplay(7, 2020))

And… viola! We have the total number of days in date objects to pass into the month display in our calendar component including the current month and the previous and following overflow dates! This result.length is 42 ensuring that the first index is a Sunday and the last index is a Saturday.

[ 
  2020-06-28T07:00:00.000Z,  
  2020-06-29T07:00:00.000Z,  
  ...,  
  2020-08-07T07:00:00.000Z,  
  2020-08-08T07:00:00.000Z 
]

Before we wrap up, let’s add some quick information to make it easier to determine which dates are a part of the current month on display.

const getDatesInMonthDisplay = (month, year) => {  
  const daysInMonth = getDaysInMonth(month, year);  
  const firstWeekday = getFirstWeekdayOfMonth(month, year);  
  const result = \[\];

const prev = getPrevMonthYear(month, year);  
  const prevDaysInMonth = getDaysInMonth(  
    prev.month,   
    prev.year  
  );

  // Add prev overflow dates...   
  for (let j = firstWeekday - 1; j >= 0; j--) {  
    result.push({  
      date: moment(  
        \`${prev.month}-${prevDaysInMonth - j}-${prev.year}\`,   
        'MM-DD-YYYY'  
      ).toDate(),  
      currentMonth: false  
    })  
  }

  // Add current month's dates  
  for (let i = 1; i <= daysInMonth; i++) {  
    result.push({  
      date:moment(\`${month}-${i}-${year}\`, 'MM-DD-YYYY').toDate(),  
      currentMonth: true  
    })  
  }

  // Overflow dates for next month to meet 42 days per month display   requirement  
  if (result.length < 42) {  
    const daysToAdd = 42 - result.length;  
    const next = getNextMonthYear(month, year);

for (let k = 1; k <= daysToAdd; k++) {  
      result.push({  
        date: moment(  
          \`${next.month}-${k}-${next.year}\`,   
          'MM-DD-YYYY'  
        ).toDate(),  
        currentMonth: false  
      })  
    }  
  }

  return result;  
}

// July 2020

// Note, since we use MomentJs's formatting, we do not index the month. This is getting the first weekday of the month for January 2020. Result is 0-indexed

console.log(getDatesInMonthDisplay(7, 2020))

Minor details like this make it easier when we pass it to the component and they help more than you’d think. Here’s an example of the new result.

[ 
  { date: 2020-06-28T07:00:00.000Z, currentMonth: false },  
  { date: 2020-06-29T07:00:00.000Z, currentMonth: false },  
  { date: 2020-06-30T07:00:00.000Z, currentMonth: false },  
  { date: 2020-07-01T07:00:00.000Z, currentMonth: true },  
  ...,  
  { date: 2020-08-07T07:00:00.000Z, currentMonth: false },  
  { date: 2020-08-08T07:00:00.000Z, currentMonth: false } 
]

Next up in part 2, we will take a look at the rendering logic of React using this function to construct the dates to display for us.