Easy Calendar

A lightweight year-view calendar web app built with Preact and Vite. Load your events via a JSON environment variable and view them month by month.

Features

• Month-by-month calendar view with colored event cells
• Hover/click to see event details in a tooltip
• Search events by name, click to jump to that date
• Filter by event type (focused type highlights, others dim)
• Dark mode / light mode (respects system preference)
• Spanish / English language toggle (Spanish default)
• Mobile-friendly layout

Getting Started

npm install
npm run dev

Set your events with the VITE_CALENDAR_DATA environment variable. Optionally set a custom title with VITE_CALENDAR_TITLE:

VITE_CALENDAR_TITLE="My Calendar" VITE_CALENDAR_DATA='[{"name":"Meeting","date":"15/01/2026","type":"meeting"}]' npm run dev

Or load the included sample data:

VITE_CALENDAR_DATA="$(cat sample-data.json)" npm run dev

Without the env var, sample-data.json is used by default.

Event JSON Format

Each event is an object with three fields:

[
  {
    "name": "Team Standup",
    "date": "15/01/2026",
    "type": "meeting",
    "time": "09:00"
  },
  {
    "name": "Project Deadline",
    "date": "28/02/2026",
    "type": "deadline",
    "time": "17:00"
  }
]

Field	Format	Description
name	string	Event name (displayed in tooltip)
date	dd/mm/yyyy	Day/month/year, zero-padded
type	string	Category name (determines color)
time	hh:mm (optional)	Time of day, 24h format; events sort by time in tooltip

Event types get deterministic colors from their name hash. Each type appears as a filter button in the UI.

Build

npm run build

Output is in dist/.

Tech Stack

• Preact (3kB React alternative)
• Vite (fast dev server and bundler)
• Vanilla CSS with CSS custom properties for theming