Month Marker

Month Marker is a Svelte web app that makes yearly planning easy. You’re able to mark out vacations, holidays, or anything else with custom labels. All app data is saved locally, so there are no accounts or passwords to worry about. It really shines as a desktop app, but can be used on mobile as well.

I wanted a quick way to track how many vacation days I’m using throughout the year, and in this case I decided to build something myself. I was much more motivated while coding an app that would help me with a real-world issue.

Svelte as a framework is still holding strong, even with increased complexity for this project. Specifically, their writable stores form the backbone of all data management in the app. For example, here’s some of the setup code that manages label data:

// store/labels.ts

import { writable } from 'svelte/store';

// Declare the Label interface
export interface Label {
  id: number;
  text: string;
  color: number;
}

let initialLabels: Label[] = [{
    id: 1,
    text: "Default",
    color: 2,
}];

// I wrote utility functions (getItem, setItem) that make working with local storage easier
let localLabels = getItem(labelKey);
if (localLabels) {
  initialLabels = JSON.parse(localLabels);
}

// Create the store with an array of default or saved data
export const labels = writable(initialLabels);

It’s that easy! The labels variable is now a reactive array that can be imported and read from any other file in the project. Now we just need some functions that will interact with our label data:

// Create functions to add, update, or delete label data
export const updateLabel = (l: Label, id: number) => {
  labels.update(currentLabels => {
    let index = labelIndex(currentLabels, id);
    if (index >= 0) {
      currentLabels[index] = l;
      setItem(labelKey, currentLabels);
    }
    return currentLabels;
  });
};

These functions could be extended in the future to save data to other places, like a database.

Here’s a list of a few other things I might add:

• More transitions between open / closed states for the editing forms
• An import / export feature, so that app data can be moved between devices
• Navigation between multiple years, right now it just shows the current year

I also enjoyed making this app customizable. There are several different themes to choose from, and limitless label color combinations. If you’re especially tech savvy, you could even override the default theme and color options because they all use CSS custom properties.

This was a fun project, I really enjoyed building something that I’ll re-use for years to come.