Calendar

Published: ....
Last modified: ....

Share this post on Bluesky See discussion on Bluesky

I want to start a semi-live blog post about building a simple calendar web application.

I have tried this kind of thing before, or at least something similar for a few other projects but they have never really actually played out well.

This time I will try to keep it short and to the point.

First lets start with the goal of the project:

Reminders

I have about 6 things that I have to keep in mind to pay off every month, some of these are loans, others include utilities and rent. However one of the problems I have encountered has been visiting the site to pay off a bill only to find out that I payed it off earlier in the month.

I have no idea why my memory is so bad, but it just is.

Events

I use a random mixture of pen and paper, todo lists, and some reminders on my phone to keep up on events and other things happening in my life but I haven't settled on a good calendar app that satisfies all my needs.

Starting Off:

So of course instead of doing a fresh install of react and all the other tools I need in another directory, I decided to boot up a codepen and just start with some code.

I have written about this before, but Codepen is a pretty great tool to just poc some ideas.

After I got set up with some simple styles, i jumped into the javascript to render out some days in my calendar.

After about an hour of tinkering around and finding a really odd bug with some of my code which you can read about here: Javascript Weirdness, I finally had a suitable graphical demo of what I was going for.

Next steps:

After my initial mock up on code pen I am finally ready to boot up a new directory with Next.js, React, ReactDOM, and styled-jsx-postcss. This is my new go to install command:

yarn add next@2.0.0 react react-dom styled-jsx-postcss

First before installing all that I need to determine a good name for the project. im thinking Months.

Two Days Later:

Ok so I have the rough draft up and working locally, there are however some changes that I might need to make to get this working the way I want it.

Lets document them down here in this post:

Performance is terrible even on a mildly spec'd macbook pro (what happens when you render out 365(6) elements)
I want a scroll indicator somewhere saying what month you are scrolled on
I want the sidebar to represent the current selected day (reminders + event info there)

Yet another day later:

So Today I split out each day as a separate component, adding some content and styles.

I also added some logic to scroll to the element, highlight it if it is the current day and a few other things.

Still have no idea how to implement the proper rendering of items to be more efficient and improve performance.

Going to stop updates on this project until I get back from my trip. The next week will be spent working on getting a really basic website set up for tracking photos, memories, videos etc from my trip to New Zealand.

Calendar

Starting Off:

Next steps:

Two Days Later:

Yet another day later:

Tags:

Related Posts

Web Development