goyban/whattodo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add week and month views to the calendar

Browse Source 
The calendar now opens in a week view: the day timeline as seven columns
lined up with the week strip. A month grid is also available, and the
chosen view is remembered.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
goyban
2026-10-13 10:31:53 +02:00
parent 0ed1bc4a0e
commit 119b8a0205
4 changed files with 252 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/style.css
+57 -1
View File
@@ -251,7 +251,9 @@ input:disabled { opacity: 0.5; }
.day-preview li.clash .day-time { color: inherit; }
/* Calendar */
.cal-nav { display: flex; gap: 8px; padding: 0 24px 8px; align-items: center; }
.cal-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 8px; align-items: center; }
.cal-nav .segmented { margin-left: auto; }
.cal-nav .segmented button { padding: 6px 12px; }
.cal-nav input[type="date"] { max-width: 180px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
.week-day {
@@ -297,10 +299,64 @@ input:disabled { opacity: 0.5; }
border-radius: 50%; background: var(--overdue);
}
/* Week view: the strip, the untimed row and the day columns share one grid */
.week-row {
display: grid; grid-template-columns: 36px repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 6px;
}
.all-day .day-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hour-gutter { position: relative; }
.hour-gutter .hour-label { left: auto; right: 0; }
.timeline.compact { border-radius: 10px; }
.timeline.compact.today { border-color: var(--accent); }
.timeline.compact .block { padding: 2px 4px; font-size: 12px; border-left-width: 3px; }
.timeline.compact .block-title { overflow-wrap: anywhere; }
.timeline.compact .block.short .block-time { display: none; }
.timeline.compact .now-line { left: 0; }
.mini {
display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-align: left; padding: 2px 5px; font-size: 12px; line-height: 1.3; cursor: pointer;
background: var(--accent-weak); border: 1px solid var(--border); border-left: 3px solid var(--accent);
border-radius: 5px;
}
.mini:hover { border-color: var(--accent); }
.mini.done { opacity: 0.55; text-decoration: line-through; }
.mini.projected { background: transparent; border-style: dashed; border-left-style: solid; }
/* Month view */
.month-title { margin-top: 10px; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.month-head { margin-bottom: 4px; font-size: 12px; color: var(--muted); text-align: center; }
.month-cell {
display: flex; flex-direction: column; gap: 2px; min-height: 104px; min-width: 0; padding: 4px;
background: var(--panel); border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.month-cell:hover, .month-cell.active { border-color: var(--accent); }
.month-cell.active { box-shadow: inset 0 0 0 1px var(--accent); }
.month-cell.other { background: none; }
.month-cell.other .month-num { color: var(--muted); font-weight: 400; }
.month-num {
align-self: flex-start; min-width: 24px; padding: 1px 4px; border: none; background: none;
border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.month-num:hover { background: var(--panel-2); }
.month-cell.today .month-num { background: var(--accent); color: var(--accent-text); }
.month-more { border: none; background: none; padding: 0 2px; text-align: left; font-size: 11px; color: var(--muted); cursor: pointer; }
.month-more:hover { color: var(--text); }
@media (max-width: 800px) {
.cal-nav { padding: 0 16px 8px; }
.cal-nav input[type="date"] { max-width: none; flex: 1; }
.cal-nav .segmented { flex-basis: 100%; }
.week-strip { gap: 4px; }
.week-row { grid-template-columns: 28px repeat(7, minmax(0, 1fr)); gap: 3px; }
.hour-gutter .hour-label { font-size: 10px; }
.timeline.compact .block { padding: 1px 2px; font-size: 11px; }
.timeline.compact .block-time { display: none; }
.timeline.compact .block-title { overflow-wrap: normal; }
.mini { padding: 1px 3px; font-size: 10px; border-left-width: 2px; }
.month-grid { gap: 2px; }
.month-cell { min-height: 72px; padding: 2px; border-radius: 6px; }
}
.block.short .block-time { order: 2; }