The many faces of a calendar (part 1)
TLDR; A date picker was created using JavaScript during the course of the writer’s web development bootcamp. The calendar, being built from accessible HTML elements, is fully customizable and offers date and time picking functionalities and more.
The journey
Before this turns into a sales pitch, I want to talk about the journey that I took, not only to create my own date picker with its many looks, but also to become a web developer.
I created my first calendar, complete with date and time picking functionalities, roughly 3 weeks into the immersive web development bootcamp offered by Juno College of Technology. I decided to enroll in a bootcamp after finishing a course in Algorithms taught in Java on Coursera. Content-wise, learning algorithms was very challenging for a person with limited programming experience. I had to read up on Java while coping to understand the algorithms being taught.
The main challenge with teaching oneself programming, however, was that I was alone — not ideal for a newcomer in a new country. No, scrap that! For anyone anywhere in any situation! I found at Juno two of the things I needed the most: a supportive community and a dedicated bootcamp outcome department, and Juno offers both to an excellent degree.
The first calendar
I built my first calendar in jQuery and styled it using Sass for a web application that I called ‘My Timer’.
Here the minimized calendar is an interactive calendar icon that also shows the current date. When the user opens the calendar, they can navigate to different months, pick a date, then the app will prompt them to also set a time for the countdown.
The second calendar
I was paired up with the amazing web developer Prachi Gujar for my next bootcamp project. Together we made a web application that allows the user to select a restaurant, make a booking for a specific date and time, then save the reservations to their calendar, which they can use to retrieve them later.
This restaurant reservation calendar, like the first one, was built using jQuery and styled using Sass. Together we expanded the functionalities of the calendar to accommodate more complex user interactions such as adding the particulars of a restaurant and the timing of the reservation to a calendar date, highlighting the dates with reservations, and allowing the user to retrieve their reservations for a particular day.
The third calendar
It was the end of week 6 of the bootcamp and we just finished the introduction to the React framework, and also it was time to build our first React applications. The theme that I chose was ‘Today in History’, which is an application to display the historical events that happened today throughout history.
It was suggested to me, however, that I should expand the idea to allow the user to choose any day they want. Taking it as a sign, I made my first React calendar and below is the outcome.
Styling the calendar as a scroll with the calendar navigation buttons as bronze arrows, I wanted to evoke as much a sense of history as possible for the user. This was done with relative ease because my React calendar was constructed with nothing other than <div>’s, <input:radio>’s, and <button>’s.
The fourth calendar
There are just so many things one can do with a calendar. To tell a story of how one copes with Covid for instance. I developed this idea into a section to be featured in my portfolio. Below is its current look.
I built this calendar using modular vanilla JavaScript. With its current implementation, the calendar offers a detailed view that displays all of my daily activities and a minimized view. The calendar is tied to the ‘My Story’ timeline above as well as the ‘Live Journal’ section beside it, which offers a different story depending on the milestone of the timeline as well as the detailed explanation of my daily activities.
If you think the design needs decluttering, I’d fully agree with you. And if you wonder where I got the inspiration from, here is a photo of my home / office.
What you see is the result of juggling a full-time course and a full-time job and volunteering every Thursday and having daily conversations with a mother overseas, all of which are done online. At least I got these two to keep me company.
Part 2 link
