• Home
  • Blog
  • Projects
  • Bookshelf
  • About
← Back to all posts

Calendar

Published 📅: ....
Last modified 📝: ....

Share this post on BlueskySee 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.

Tags:

CalendarWeb Development

Loading...

Related Posts

Web Development

Onboarding Your New AI Teammate

Published: ....

Are we reinventing the wheel when it comes to onboarding new AI agents to a codebase, when we already have primitives available for onboarding humans?

Quick Tip - Theme Aware Images

Published: ....

Have you ever found the need to change the image you render on a web page based on the current preferred color scheme of your theme?

Async Class Creation In JavaScript

Published: ....

Have you ever wanted to create a class in JavaScript or TypeScript but also have the initialization be async? Here's a quick tip on a pattern that I've used in the past!

Website Redesign v10

Published: ....

I recently launched a rewrite and redesign of this personal website, I figured I'd talk a bit about the changes and new features that I added along the way!

Server Side Rendering Compatible CSS Theming

Published: ....

A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!

Podcasting By Hand

Published: ....

A brief overview on how we launched The Bikeshed Podcast, including a deep dive in our recording and distribution workflows!

Quick Tip - Specific Local Module Declarations

Published: ....

A quick tip outlining how to provide specific TypeScript type definitions for a local module!

On File-System Routing Conventions

Published: ....

Some rough thoughts on building a file-system routing based web application

You're Building Software Wrong

Published: ....

Slicing software: why vertical is better than horizontal.

Single File Web Apps

Published: ....

What if you could author an entire web application in a single file?

Resetting Controlled Components in Forms

Published: ....

A quick way to handle resetting internal state in components when a parent form is submitted!

A Quick Look at Import Maps

Published: ....

A brief look at Import Maps and package.json#imports to support isomorphic JavaScript applications!

Recommended Tech Talks

Published: ....

A collection of tech talks that I regularly re-watch and also recommend to everyone!

Request for a (minimal) RSC Framework

Published: ....

Some features and functionality that I'd like within a React Server Component compatible framework.

Bluesky Tips and Tools

Published: ....

A (running) collection of Bluesky tips, tools, packages, and other misc things!

The Bookkeeping Pattern

Published: ....

A quick look at a small but powerful pattern I've been leveraging as of late!

TSLite

Published: ....

A proposal for a minimal variant of TypeScript!

Monorepo Tips and Tricks

Published: ....

Sharing a few core recommendations when working within monorepos to make your life easier!

Next.js with Deno v2

Published: ....

This is a quick post noting that Next.js should now work with Deno v2!

Don't Break the Implicit Prop Contract

Published: ....

React components have a fundamental contract that is often unstated in their implementation, and you should know about it!

A Better useSSR Implementation

Published: ....

Replace that old useState and useEffect combo for a new and better option!

My Current Dev Setup

Published: ....

A quick look at the applications and tools that I (generally) use day to day for web development!

There Is No Standard Markdown

Published: ....

There are a variety of different markdown "standards" out there, and sometimes they're not all that consistent

Abstract Your API

Published: ....

Proposing a solution for sharing core "business" logic across services!

Tip: Request and Response Headers

Published: ....

There's a common gotcha when creating Web Request and Response instances with Headers!

Using Feature Toggles to De-risk Refactors

Published: ....

Feature toggles are often underused by most software development teams, and yet offer so much value during not only feature development but also refactors

Hohoro

Published: ....

A quick introduction to my new side project, hohoro. An incremental JS/TS library build tool!

Custom Favicon Recipes

Published: ....

Two neat tricks for enhancing your site's favicon!

Corporate Sponsored OSS

Published: ....

The various risks and pitfalls of open source software run by corporations.

The Library-Docs Monorepo Template

Published: ....

A monorepo template for managing a library and documentation together.

Building Better Beacon

Published: ....

How we solved an almost show-stopping production bug, and how you can avoid it in your own projects.

Project Deep Dive: Tails

Published: ....

A(nother) deep dive into one of my recent side projects; tails - a plain and simple cocktail recipe app.

Churn Anxiety

Published: ....

When did semver major changes become so scary?

Service Monitors and Observability

Published: ....

Leveraging service monitors properly to improve service observability.

On Adopting CSS-in-JS

Published: ....

A brief recap of how Wayfair changed it's CSS approach not once but twice in the span of 5 years!

Project Deep Dive: Microfibre

Published: ....

A deep dive into one of my recent side projects; microfibre - a minimal text posting application

Pair Programming

Published: ....

Pair programming can be good sometimes - but not all the time

Suspense Plus GraphQL

Published: ....

A few thoughts on using Suspense with GraphQL to optimize application data loading

You've Launched, Now What?

Published: ....

A few thoughts on what to do after you launch a new project

Taking a Break

Published: ....

A few quick thoughts on burn out and taking a break

Managing Complex UI Component State

Published: ....

A few thoughts on managing complex UI component state within React

Understanding React 16.3 Updates

Published: ....

A quick overview of the new lifecycle methods introduced in React 16.3

CSS in JS

Published: ....

A few thoughts and patterns for using styled-jsx or other CSS-in-JS solutions

Redesign v6

Published: ....

A few thoughts on the redesign of my personal site, adopting Next.js and deploying via Now

JavaScript Weirdness

Published: ....

A few weird things about JavaScript