I think one of the most important parts of ensuring that good habits become second nature is being able to schedule them in an organized manner — reducing cognitive load and making it easier to execute those habits on a recurring basis.
Recently I’ve created a simple webpage that acts as a weekly calendar of recurring habits, that I’m able to customize, deploy (using Netlify), and view on my mobile phone on any given day. In this blog post I’ll go over the steps and scaffolding needed to quickly create such a calendar.
If you’re impatient, there’s a Demo Repository that contains the HTML that you can immediately use.
Creating the Layout
There are many popular CSS frameworks for prototyping layouts in a few minutes. For this project I chose to use Bootstrap. The provided boilerplate on the Bootstrap website is all that’s needed, since we’ll be using Bootstrap via CDN
Below is a trimmed down version that just includes the CSS:
I won’t go into using Bootstrap itself, but any Bootstrap layout basically observes the following logical hierarchy as a best-practice:
Of course, Bootstrap isn’t that semantic out of the box; instead opting for CSS utility classes to achieve its structure.
Since we’ll be creating a weekly calendar, the goal is to have seven columns that will align differently based on device viewport (e.g., single-column on mobile) within a single row, encapsulated in a single container resulting a clean, neat layout.
Below is an example of the markup to be placed within the boilerplate’s
A few notes on the above Bootstrap classes:
container-fluidis used for a container with more full-width viewport spacing out of the box
row p-3sets the overall row padding using Bootstrap’s spacing utility classes on the sole row that is being used
col-lg-3 p-3sets the overall column padding, and matches Bootstrap’s breakpoint for large screens to display four (4) columns on desktop, and single-column on smaller screen sizes
class="card"uses Bootstrap’s card element with accompanying list group structure
Also important to note is that we’ve added an
idto each card element corresponding to the day of the week (e.g.
Highlighting the Current Day
It would be nice if the current day could be highlighted. At least this was my thought process after creating the layout — since I would be accessing this almost exclusively from my phone — thus being able to automatically scroll and have the current day of the week visually indicated would be a plus.
id that was created in the HTML markup):
Date() constructor and
getDay() method to assign a value that matches the current day.
In the below expression, the variable
d is assigned the value of the current date, as generated by calling the
Date() constructor with the
getDay() method can be called on the recently created object
d that contains today’s date. When this is done,
getDay() will return an integer from
0 - 6 that matches the numerical value of whatever day of the week it is:
Then, the variable
day is assigned the value of whatever index of the array
daysOfWeek is when using the index number that’s returned by
daysOfWeek will be
daysOfWeek will be
wednesday and so on, matching the current day. More importantly, the variable
day now matches the
id value that each card element possesses.
Now that we a variable that holds the value of the current day, we find and manipulate the corresponding HTML element as needed:
In the above expression, the variable
dayCard is assigned the value of the HTML card element whose
id matches the current day.
We can then add some handy Bootstrap classes to make the day stand out, such as a red border:
Further, we can make the title of the curent day stand out as well:
In the above snippet,
previousElementSibling gets the previous element in the same tree level (the sibling), i.e. the previous
<p> element that contains the day’s title. This element’s value is assigned to
dayTitle, and then the necessary classes are simply added.
Finally, it would be extremely handy on a mobile device if the page can automatically scroll to the current day. While this isn’t necessarily useful on desktop screens, as I mentioned earlier I primarily use this weekly habit calendar on my phone.
This is easily done using the
scrollIntoView() web API:
Putting it all together, the complete markup is as follows:
It’s important to place this
scripttag and content below the closing Bootstrap container
divtag; since the HTML will need to be rendered before each day’s
At this point, simply entering details into each list group item and viewing the webpage will show a neat calendar already populated, that can be deployed to any static host such as Netlify, Amazon S3, Vercel, etc.
You can check out a Live Demo at the following URL: weekly-habit-calendar.netlify.app
- Bootstrap Framework - getbootstrap.com
- Netlify - netlify.com
- Weekly Habit Calendar Demo Repository - github.com/paramdeo/weekly-habit-calendar