LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Major new version (#2)

Browse Source 
Release Notes

Architecture
- Component refactor: removed monoliths (`Calendar.vue`, `CalendarGrid.vue`); expanded granular view + header/control components.
- Dialog system introduced (`BaseDialog`, `SettingsDialog`).

State & Data
- Store redesigned: Map-based events + recurrence map; mutation counters.
- Local persistence + undo/redo history (custom plugins).

Date & Holidays
- Migrated all date logic to `date-fns` (+ tz).
- Added national holiday support (toggle + loading utilities).

Recurrence & Events
- Consolidated recurrence handling; fixes for monthly edge days (29–31), annual, multi‑day, and complex weekly repeats.
- Reliable splitting/moving/resizing/deletion of repeating and multi‑day events.

Interaction & UX
- Double‑tap to create events; improved drag (multi‑day + position retention).
- Scroll & inertial/momentum navigation; year change via numeric scroller.
- Movable event dialog; live settings application.

Performance
- Progressive / virtual week rendering, reduced off‑screen buffer.
- Targeted repaint strategy; minimized full re-renders.

Plugins Added
- History, undo normalization, persistence, scroll manager, virtual weeks.

Styling & Layout
- Responsive + compact layout refinements; header restructured.
- Simplified visual elements (removed dots/overflow text); holiday styling adjustments.

Reliability / Fixes
- Numerous recurrence, deletion, orientation/rotation, and event indexing corrections.
- Cross-browser fallback (Firefox week info).

Dependencies Added
- date-fns, date-fns-tz, date-holidays, pinia-plugin-persistedstate.

Net Change
- 28 files modified; ~4.4K insertions / ~2.2K deletions (major refactor + feature set).
This commit is contained in:
LeoVasanko
2025-08-26 03:58:24 +00:00
parent 86a06acccb
commit dbe4c99b07
28 changed files with 4465 additions and 2207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/colors.css
+130 -42
View File
@@ -20,6 +20,10 @@
--label-bg: #fafbfe;
--label-bg-rgb: 250, 251, 254;
/* Holiday colors */
--holiday: #da0;
--holiday-label: var(--strong);
/* Input / recurrence tokens */
--input-border: var(--muted-alt);
--input-focus: var(--accent);
@@ -34,28 +38,68 @@
}
/* Month tints (light) */
.dec { background: hsl(220 50% 95%) }
.jan { background: hsl(220 50% 92%) }
.feb { background: hsl(220 50% 95%) }
.mar { background: hsl(125 60% 92%) }
.apr { background: hsl(125 60% 95%) }
.may { background: hsl(125 60% 92%) }
.jun { background: hsl(45 85% 95%) }
.jul { background: hsl(45 85% 92%) }
.aug { background: hsl(45 85% 95%) }
.sep { background: hsl(18 78% 92%) }
.oct { background: hsl(18 78% 95%) }
.nov { background: hsl(18 78% 92%) }
.dec {
background: hsl(220 50% 95%);
}
.jan {
background: hsl(220 50% 92%);
}
.feb {
background: hsl(220 50% 95%);
}
.mar {
background: hsl(125 60% 92%);
}
.apr {
background: hsl(125 60% 95%);
}
.may {
background: hsl(125 60% 92%);
}
.jun {
background: hsl(45 85% 95%);
}
.jul {
background: hsl(45 85% 92%);
}
.aug {
background: hsl(45 85% 95%);
}
.sep {
background: hsl(18 78% 92%);
}
.oct {
background: hsl(18 78% 95%);
}
.nov {
background: hsl(18 78% 92%);
}
/* Light mode — gray shades and colors */
.event-color-0 { background: hsl(0, 0%, 85%) } /* lightest grey */
.event-color-1 { background: hsl(0, 0%, 75%) } /* light grey */
.event-color-2 { background: hsl(0, 0%, 65%) } /* medium grey */
.event-color-3 { background: hsl(0, 0%, 55%) } /* dark grey */
.event-color-4 { background: hsl(0, 70%, 70%) } /* red */
.event-color-5 { background: hsl(90, 70%, 70%) } /* green */
.event-color-6 { background: hsl(230, 70%, 70%) } /* blue */
.event-color-7 { background: hsl(280, 70%, 70%) } /* purple */
.event-color-0 {
background: hsl(0, 0%, 85%);
} /* lightest grey */
.event-color-1 {
background: hsl(0, 0%, 75%);
} /* light grey */
.event-color-2 {
background: hsl(0, 0%, 65%);
} /* medium grey */
.event-color-3 {
background: hsl(0, 0%, 55%);
} /* dark grey */
.event-color-4 {
background: hsl(0, 70%, 70%);
} /* red */
.event-color-5 {
background: hsl(90, 70%, 70%);
} /* green */
.event-color-6 {
background: hsl(230, 70%, 70%);
} /* blue */
.event-color-7 {
background: hsl(280, 70%, 70%);
} /* purple */
/* Color tokens (dark) */
@media (prefers-color-scheme: dark) {
@@ -69,7 +113,7 @@
--muted: #7d8691;
--muted-alt: #5d646d;
--accent: #3b82f6;
--accent-soft: rgba(59,130,246,0.15);
--accent-soft: rgba(59, 130, 246, 0.15);
--accent-hover: #2563eb;
--danger: #ef4444;
--danger-hover: #dc2626;
@@ -85,32 +129,76 @@
--pill-bg: #222a32;
--pill-active-bg: var(--accent);
--pill-active-ink: #fff;
--pill-hover-bg: rgba(255,255,255,0.08);
--pill-hover-bg: rgba(255, 255, 255, 0.08);
/* Vue component color mappings (dark) */
--bg: var(--panel);
--border-color: #333;
/* Holiday colors (dark mode) */
--holiday: #ffc107;
--holiday-label: #fff8e1;
}
.dec { background: hsl(220 50% 8%) }
.jan { background: hsl(220 50% 6%) }
.feb { background: hsl(220 50% 8%) }
.mar { background: hsl(125 60% 6%) }
.apr { background: hsl(125 60% 8%) }
.may { background: hsl(125 60% 6%) }
.jun { background: hsl(45 85% 8%) }
.jul { background: hsl(45 85% 6%) }
.aug { background: hsl(45 85% 8%) }
.sep { background: hsl(18 78% 6%) }
.oct { background: hsl(18 78% 8%) }
.nov { background: hsl(18 78% 6%) }
.dec {
background: hsl(220 50% 8%);
}
.jan {
background: hsl(220 50% 6%);
}
.feb {
background: hsl(220 50% 8%);
}
.mar {
background: hsl(125 60% 6%);
}
.apr {
background: hsl(125 60% 8%);
}
.may {
background: hsl(125 60% 6%);
}
.jun {
background: hsl(45 85% 8%);
}
.jul {
background: hsl(45 85% 6%);
}
.aug {
background: hsl(45 85% 8%);
}
.sep {
background: hsl(18 78% 6%);
}
.oct {
background: hsl(18 78% 8%);
}
.nov {
background: hsl(18 78% 6%);
}
.event-color-0 { background: hsl(0, 0%, 50%) } /* lightest grey */
.event-color-1 { background: hsl(0, 0%, 40%) } /* light grey */
.event-color-2 { background: hsl(0, 0%, 30%) } /* medium grey */
.event-color-3 { background: hsl(0, 0%, 20%) } /* dark grey */
.event-color-4 { background: hsl(0, 70%, 40%) } /* red */
.event-color-5 { background: hsl(90, 70%, 30%) } /* green - darker for perceptional purposes */
.event-color-6 { background: hsl(230, 70%, 40%) } /* blue */
.event-color-7 { background: hsl(280, 70%, 40%) } /* purple */
.event-color-0 {
background: hsl(0, 0%, 50%);
} /* lightest grey */
.event-color-1 {
background: hsl(0, 0%, 40%);
} /* light grey */
.event-color-2 {
background: hsl(0, 0%, 30%);
} /* medium grey */
.event-color-3 {
background: hsl(0, 0%, 20%);
} /* dark grey */
.event-color-4 {
background: hsl(0, 70%, 40%);
} /* red */
.event-color-5 {
background: hsl(90, 70%, 30%);
} /* green - darker for perceptional purposes */
.event-color-6 {
background: hsl(230, 70%, 40%);
} /* blue */
.event-color-7 {
background: hsl(280, 70%, 40%);
} /* purple */
}
src/assets/layout.css
+50 -49
View File
@@ -1,53 +1,62 @@
/* Layout variables */
:root {
/* Layout */
--row-h: 2.2em;
--label-w: minmax(4em, 8%);
--cell-w: 1fr;
--cell-h: clamp(4em, 8vh, 8em);
--overlay-w: minmax(3rem, 5%);
--week-w: 3rem;
--day-w: 1fr;
--month-w: 2rem;
--row-h: 15vh;
}
* {
box-sizing: border-box;
}
/* Layout & typography */
* { box-sizing: border-box }
html,
body {
height: 100%;
}
body {
margin: 0;
font: 500 14px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
font:
500 14px/1.2 ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Inter,
Arial;
background: var(--bg);
color: var(--ink);
overflow: hidden;
}
header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: .75rem;
margin-bottom: 0.75rem;
flex-shrink: 0;
}
.header-controls {
display: flex;
align-items: center;
gap: .75rem;
.today-date {
cursor: pointer;
}
.today-date { cursor: pointer }
.today-date::first-line { color: var(--today) }
.today-button:hover { opacity: .8 }
/* Header row */
.calendar-header, #calendar-header {
.today-date::first-line {
color: var(--today);
}
.today-button:hover {
opacity: 0.8;
}
.calendar-header,
#calendar-header {
display: grid;
grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
border-bottom: .2em solid var(--muted);
grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
border-bottom: 0.2em solid var(--muted);
align-items: last baseline;
flex-shrink: 0;
width: 100%;
}
/* Main container */
.calendar-container, #calendar-container {
.calendar-container,
#calendar-container {
flex: 1;
overflow: hidden;
position: relative;
@@ -56,7 +65,8 @@ header {
}
/* Viewports (support id or class) */
.calendar-viewport, #calendar-viewport {
.calendar-viewport,
#calendar-viewport {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
@@ -65,37 +75,27 @@ header {
scrollbar-width: none;
}
.calendar-viewport::-webkit-scrollbar,
#calendar-viewport::-webkit-scrollbar { display: none }
.jogwheel-viewport, #jogwheel-viewport {
position: absolute;
top: 0; right: 0; bottom: 0;
width: var(--overlay-w);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
z-index: 20;
cursor: ns-resize;
#calendar-viewport::-webkit-scrollbar {
display: none;
}
.calendar-content,
#calendar-content {
position: relative;
}
.jogwheel-viewport::-webkit-scrollbar,
#jogwheel-viewport::-webkit-scrollbar { display: none }
.jogwheel-content, #jogwheel-content { position: relative; width: 100% }
.calendar-content, #calendar-content { position: relative }
/* Week row: label + 7-day grid + jogwheel column */
.week-row {
display: grid;
grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
position: relative;
overflow: visible;
height: var(--cell-h);
height: var(--row-h);
scroll-snap-align: start;
width: 100%;
}
/* Label cells */
.year-label, .week-label {
.year-label,
.week-label {
display: grid;
place-items: center;
width: 100%;
@@ -105,7 +105,7 @@ header {
}
.week-label {
height: var(--cell-h);
height: var(--row-h);
}
/* 7-day grid inside each week row */
.week-row > .days-grid {
@@ -130,7 +130,8 @@ header {
z-index: 15;
overflow: visible;
position: absolute;
top: 0; right: 0;
top: 0;
right: 0;
width: 100%;
}
.month-name-label > span {