My First CodePen: A JavaScript Calendar

I recently signed up for a new adventure with a really exciting program called Chingu.io.

In a nutshell, Chingu (Korean for 'friend') is an opportunity for aspiring developers to collaborate with other developers in a simulated production environment. Participating developers have to submit a solo project which will be used to assign a role in a 6-week collaborative project. It's meant to simulate a real working environment, provide relevant experience, and add to the developer's portfolio.

For my solo project, I decided to create a calendar. To give my project some sort of future-proofing, I coded it in React using hooks. At the time of writing this post, the calendar exists as a front end project. Soon, I'll code a backend to persist the user selections in Node.js.

The example here is coded in Javascript with CSS and HTML. The calendar scrolls from month to month when the directional arrows are clicked.

There were several points during coding where date calculations were necessary. I opted to use the basic Javascript date object instead of a library like moment.js. You can read about why I made that decision in a previous article.

JS Date vs Moment.js: A Really Simple Comparison

Clark Johnson ・ Jun 15 '20 ・ 2 min read

I'm very excited about my first CodePen entry and I look forward to many more. Happy coding!

Cover photo by Estée Janssens on Unsplash