cal

A plain JavaScript full-year calendar inspired by the Unix cal command, with named date selections, date calculations, live counters, themes, persistence, and shareable views.

Live site: https://sri.github.io/cal/

Features

• Full-year calendar with previous/next year navigation, direct year editing, and a shortcut back to the current year
• Multiple color-coded, named selections for individual dates and date ranges
• Editable selection dates and names, with changes saved when an editor loses focus
• A focused Selected Dates view with detail cards and a prominent live countdown display
• Four themes: Light, Dark, Matrix, and Brownish
• Responsive layouts for desktop and mobile, with consistent month-card heights
• Copy buttons for calculated values, including their labels
• Browser persistence through localStorage for selections, metadata, theme, view, and displayed year
• Shareable URLs that restore the theme, view, year, selection panel state, completed selections, names, date-info fields, hidden automatic fields, and function arguments

Date info

Each selection can display and copy additional calculated information:

• Days since or remaining
• Duration in days, hours, minutes, seconds, or weeks
• Days since the start or end
• Days until the start or end
• Past, future, active, and contains-today status
• Day of year and weekday for the start date
• Live count up and live countdown values
• Anniversary dates or ranges across configurable From and To years

Relevant date info is added automatically for a selection and can be hidden. More fields can be added with the Select Date Info picker.

Using the app

1. Select a date, or select a start and end date to create a range.
2. Optionally give the selection a name and add date-info fields.
3. Continue selecting to create additional color-coded selections.
4. Open settings to change the theme or switch between Calendar and Selected Dates views.
5. Choose Copy App URL in settings to copy a link to the current configured view.

Opening a shared URL loads the state encoded in the link instead of the browser's saved local state. Only completed selections are included in shared URLs.

Run locally

Requires a current Node.js release supported by Vite.

npm install
npm run dev

Create and preview a production build with:

npm run build
npm run preview

Tech

• Plain JavaScript, HTML, and CSS
• Vite for local development and production builds
• GitHub Pages deployment
• No runtime dependencies

Selection state is stored under the multical-local-state key in browser localStorage.