The many faces of a calendar (Part 2)

Snapshot of the minimized fifth calendar
The fifth calendar with optional default styling
Snapshots showing the details of the fifth calendar including the newly added month and year selection panels
Details of the fifth calendar with optional default styling
Screenshot of the HTML file to use the imported calendar module
HTML file for the live demo. The holiday song section is an optional module I created to demonstrate the working of the calendar.
  1. Create a <form> element which will be the parent element of the date picker input.
  2. Create a <div> or <section> with a class name of ‘datePicker’. The calendar module will search the document for an element with this class in order to build the calendar.
  3. Create a <button> for the <form>
Screenshot of the app.js module that imports and initializes the calendar module
The app.js module to import and initialize the calendar module. The default styling and holiday song modules are optional and can be removed.
Diagram illustrating the structure of the modular codes developed for the calendar
Illustration of how the calendar module works
Screenshot of the main function of the generator component
Main createCalendarDisplay function in the calendar generator component. Note that the text input field has a ‘readonly’ attribute.
  1. Code readability (reads React-envy): My third calendar was built in the React framework. One of the most talked about, and obvious, advantages of JSX is that it allows the HTML codes to mix in with the JavaScript. Using template literal I was able to recreate to some degree the experience developing codes in the React framework.
  2. Performance: Outputting serialized HTML strings hints at a subsequent use of innerHTML() method. You can skip to the next section for the security considerations of using innerHTML(). As for performance consideration, there are cases to support both sides of the createElement() vs. innerHTML() debate. You can search on Google for it. I did and I found a good article on the topic innerHTML vs createElement/appendChild by Kevin Chi.[1] Another set of tests (follow link to full article) were performed by Peter-Paul Koch of Below are his findings.[2]
Results from the tests performed by Peter-Paul Koch of A score of 100 indicates the fastest method. A higher score indicates a slower method.
Screenshot the main calendar component
The HTML codes for the calendar display is bundled up as a DOM node, which is appended to the calendarContainer element. The innerHTML() method is only used to clear the calendarContainer. For more details, follow this link.
Screenshot of the event handler component showing The ‘Object Interface’ / ‘Revealing Module Pattern’
The ‘Object Interface’ / ‘Revealing Module Pattern’ that I followed in developing the modular codes for the calendar
  1. The anonymous function wraps its local variables in its own closure, and so prevents them from overwriting any existing global variables.
  2. Having an anonymous function also allows us to return as an object all the properties and methods that we wish to make public. All properties and methods are, thus, kept private until we have explicitly returned them to the declared variable (for example, the calendarEventListeners variable in the screenshot above). By exporting only the returned object, we ensure that all internal logics of the component are kept private.
Screenshots of the holiday song selected based on the value of the date picker input. (left) The date value is rendered on th
Screenshots of the holiday song selected based on the value of the date picker input. (left) The date value is rendered on the screen alongside the song title and link to YouTube video. (right) The calendar display showing the yellow-highlighted chosen date (Dec 31).



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Luigi learns to code

Luigi learns to code

I am a physics graduate, a geoscientist, and most recently a humanitarian worker who enjoys all things technology. I am also a Vector robot owner.