Payas Days

Overview

Payas Days is a fully client-side web calendar that runs entirely in your browser — no server, no account, and no build step required. Open payas-days/index.html and start scheduling immediately. All data is stored locally using IndexedDB and can be exported as standard ICS or portable Markdown files.

Property	Value
Entry point	payas-days/index.html
Stack	HTML5 · CSS3 · Vanilla JS (ES2022)
Dependencies	Bootstrap 5.3 · Font Awesome 6.5 · Google Fonts
Storage	IndexedDB (persistent) · ICS & Markdown export/import
Views	Month · Week · Day · Agenda
Browser support	Chromium-based · Firefox
Theme	Light and Dark mode (system preference aware)
Responsive	Desktop and mobile

Payas Days follows the Payas design system shared across all Payas web tools (Reader, Editor, Player, Imager, FM, Omi) — using the same colour tokens, typography, and component patterns.

Quick Start

No build or server needed. Just open the entry file:

# Open directly
xdg-open payas-days/index.html          # Linux
open payas-days/index.html              # macOS
start payas-days/index.html             # Windows

# Or serve locally (avoids file:// quirks)
npx serve .
python3 -m http.server 8080

Then navigate to http://localhost:8080/payas-days/index.html.

Calendar Views

Switch between views using the tab bar below the header.

View	Description
Month	Full calendar grid. Up to 3 event chips per cell, +N indicator for overflow.
Week	7-column time grid (24 h vertical axis). Events sized by actual start/end times. Red now line marks the current time.
Day	Single-column time grid identical to Week view column.
Agenda	Events grouped by date for the next 30 days, sorted chronologically.

Use ← / → arrow keys to navigate between periods. Click the date display in the header to jump to today.

Event Management

Creating Events

FAB button (+, bottom-right) — opens a blank event modal defaulting to the current time.
Day cell click (Month view) — opens a modal pre-filled with the clicked date.

Event Fields

Field	Notes
Title	Required. Plain text.
All day	Toggle switch. Switches inputs to date-only pickers.
Start / End	datetime-local inputs.
Description	Multi-line textarea. Supports Markdown.
Location	Free text or URL.
Timezone	IANA timezone dropdown. Defaults to local timezone.
Color	10-colour swatch picker.
Label	Free text tag (e.g. work, personal). Searchable.
Recurrence	Preset dropdown (Daily/Weekly/Monthly/Yearly) + raw RRULE input.
Reminders	Minute offsets before event start. Fires browser notifications.
Attendees	Email address chips.
Attachments	URL chips.

Conflict Detection

When saving, Payas Days checks for overlapping timed events and shows a confirmation dialog listing conflicts before saving.

Settings

Section	Options
Appearance	Light / Dark theme toggle, persisted to IndexedDB.
Notifications	Enable browser notifications via `Notification.requestPermission()`.
Export ICS	Downloads `payas-days.ics` (RFC 5545 — compatible with Google Calendar, Outlook, Apple Calendar).
Export Markdown	Downloads all events as a single `payas-days-events.md` bundle.
Import ICS	File picker or drag-and-drop `.ics` import.
Import Markdown	File picker or drag-and-drop `.md` event import.
Clear all	Deletes every event from IndexedDB (requires confirmation).

Keyboard Shortcuts

Shortcut	Action
`←` Arrow	Navigate backward
`→` Arrow	Navigate forward
`T`	Jump to today
`/`	Open search bar
`Escape`	Close search bar

Storage & Data

All data is stored in an IndexedDB database named payas-days with two object stores:

Store	Purpose
events	Event records, indexed by start date and label
settings	App settings (theme, seeded flag)

Export formats:

ICS — RFC 5545 iCalendar with VALARM reminders and ATTENDEE fields.
Markdown — YAML front-matter per event, Markdown body for description.

Architecture

Payas Days is a multi-file static web app with no build step and no framework.

payas-days/
├── index.html          — markup: header, tab bar, view containers, modals, FAB
├── css/
│   └── styles.css      — all CSS (~600+ lines, Payas design tokens)
├── js/
│   ├── storage.js      — IndexedDB adapter, Markdown serialisation
│   ├── recurrence.js   — RRULE expander (DAILY/WEEKLY/MONTHLY/YEARLY)
│   ├── ics.js          — ICS (RFC 5545) import & export
│   ├── events.js       — CRUD cache, conflict detection, reminders
│   ├── calendar.js     — Month/Week/Day/Agenda renderers
│   └── app.js          — wiring: theme, nav, form, search, popover, init
└── data/               — (reserved for future local data files)

Scripts load in dependency order: storage.js → recurrence.js → ics.js → events.js → calendar.js → app.js. Each file exposes a single namespace object — no ES modules, no bundler.

Get Payas Days

Resource	Link
GitLab Repository	gitlab.com/samanscode/payas-days
Download ZIP	payas-days-main.zip