Improvements and Configurability for Weekly View: “Agenda – Weekly” and new “Agenda – Weekly – With Notes”

src/lib/components/AgendaDay.svelte

@@ -1,12 +1,19 @@
-<div class="day">
+<script lang="ts">
+	let {
+		twentyFourHourFormat = false,
+    } = $props();
+</script>
+
+<div class="day" class:twenty-four-hour-format={twentyFourHourFormat} >
 	{#each new Array(24) as _, i (i)}
 		<div class="hour-label">
-			{#if i > 0}
-				{i === 12 ? 12 : i % 12}
-				<small>{i < 12 ? 'AM' : 'PM'}</small>
+			{#if twentyFourHourFormat}
+				{i}
 			{:else}
-				12
-				<small>AM</small>
+				{#if i !== 24}
+					{i === 12 ? 12 : i % 12}
+					<small>{i < 12 ? 'AM' : 'PM'}</small>
+				{/if}
 			{/if}
 		</div>
 	{/each}
@@ -19,6 +26,9 @@
 	.day {
 		display: grid;
 		grid-template-columns: 2.5rem 1fr;
+		&.twenty-four-hour-format {
+			grid-template-columns: 2rem 1fr;
+		}
 		grid-template-rows: repeat(24, 1fr);
 		width: 100%;
 		height: 100%;

src/lib/components/AgendaWeek.svelte

@@ -1,18 +1,34 @@
 <script lang="ts">
 	import { formatToString, getFirstDayOfWeek, type Timeframe } from '$lib';
+	import Grid from './Grid.svelte';
+	import type { PageTemplate } from '../state/collection';
 
-	let { timeframe = {} as Timeframe, startWeekOnSunday = false } = $props();
+	let {
+		timeframe = {} as Timeframe,
+		startWeekOnSunday = false,
+		showNotes = false,
+		agendaStart = 0,
+		agendaEnd = 24,
+		twentyFourHourFormat = false,
+		noteTemplate = 'dotted' as PageTemplate,
+	} = $props();
 
 	const weekStart = $derived(
 		new Date(getFirstDayOfWeek(timeframe.start, startWeekOnSunday)),
 	);
 </script>
 
-<div class="week">
+<div
+	class="week"
+	class:with-notes={showNotes}
+	class:twenty-four-hour-format={twentyFourHourFormat}
+	style="--rows: {agendaEnd - agendaStart};">
 	<div class="hour-label"></div>
-	{#each new Array(24) as _, i (i)}
+	{#each Array.from({ length: agendaEnd - agendaStart + 1 }, (_, i) => i + agendaStart) as i (i)}
 		<div class="hour-label">
-			{#if i > 0}
+			{#if twentyFourHourFormat}
+				{i}
+			{:else if i !== 24}
 				{i === 12 ? 12 : i % 12}
 				<small>{i < 12 ? 'AM' : 'PM'}</small>
 			{/if}
@@ -32,7 +48,7 @@
 				{date.toLocaleString('default', { weekday: 'short', timeZone: 'UTC' })}
 			</div>
 		{/if}
-		{#each new Array(24) as _, i (i)}
+		{#each Array.from({ length: agendaEnd - agendaStart }, (_, i) => i + agendaStart) as i (i)}
 			<div
 				class="hour"
 				class:active={timeframe.month === date.getUTCMonth() + 1 &&
@@ -41,22 +57,35 @@
 		{/each}
 	{/each}
 </div>
+{#if showNotes}
+	<div class="notes">
+		<Grid display={noteTemplate} />
+	</div>
+{/if}
 
 <style lang="scss">
 	.week {
 		display: grid;
 		grid-template-columns: 2.5rem repeat(7, 1fr);
-		grid-template-rows: 1.5rem repeat(24, 1fr);
+		&.twenty-four-hour-format {
+			grid-template-columns: 2rem repeat(7, 1fr);
+		}
+		grid-template-rows: 1.5rem repeat(var(--rows), 1fr) 0rem;
 		width: 100%;
 		height: 100%;
 		justify-items: stretch;
 		align-items: stretch;
 		grid-auto-flow: column;
 		padding: 0 1rem 0 0;
+		&.with-notes {
+			height: 50%;
+			padding: 0 1rem 1rem 0;
+		}
 	}
 	.day {
 		font-size: 0.9em;
 		text-align: center;
+		grid-row: 1 / span 1;
 		font-weight: var(--font-weight-light);
 
 		:global(.ordinal) {
@@ -65,7 +94,7 @@
 		}
 	}
 	.hour {
-		border-top: solid 1px var(--outline);
+		border-bottom: solid 1px var(--outline);
 		border-left: solid 1px var(--outline);
 		&.active {
 			background-color: rgba(0, 0, 0, 0.04);
@@ -74,43 +103,25 @@
 	.day ~ .day ~ .day ~ .day ~ .day ~ .day ~ .day ~ .hour {
 		border-right: solid 1px var(--outline);
 	}
-	.day
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour
-		+ .hour {
-		border-bottom: solid 1px var(--outline);
+	.day + .hour {
+		border-top: solid 1px var(--outline);
 	}
 	.hour-label {
 		text-align: center;
 		grid-column: 1;
 		font-weight: var(--font-weight-light);
 		font-size: 0.7em;
 		color: var(--text-low);
-		margin-top: -0.5rem;
+		margin-top: -0.3rem;
 		small {
 			color: currentColor;
 			font-size: 0.6em;
 		}
 	}
+	.notes {
+		text-align: center;
+		width: 100%;
+		height: 50%;
+		padding: 0;
+	}
 </style>

src/lib/components/NotesDay.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
 	import Grid from './Grid.svelte';
+
+	let {
+		twentyFourHourFormat = false,
+    } = $props();
 </script>
 
 <div class="day">
@@ -8,8 +12,14 @@
 			{@const hour = i + 5}
 			<div class="hour">
 				<span>
-					{hour % 12 === 0 ? 12 : hour % 12}
-					<small>{hour < 12 ? 'AM' : 'PM'}</small>
+					{#if twentyFourHourFormat}
+						{hour}
+					{:else}
+						{#if hour !== 24}
+							{hour === 12 ? 12 : hour % 12}
+							<small>{hour < 12 ? 'AM' : 'PM'}</small>
+						{/if}
+					{/if}
 				</span>
 			</div>
 		{/each}

src/lib/components/Page.svelte

@@ -61,10 +61,17 @@
 			)}
 			startWeekOnSunday={settings.date.startWeekOnSunday}
 			{settings} />
-	{:else if display === 'agenda-week'}
-		<AgendaWeek {timeframe} startWeekOnSunday={settings.date.startWeekOnSunday} />
+	{:else if display === 'agenda-week' || display === 'agenda-week-with-notes'}
+		<AgendaWeek
+			{timeframe}
+			startWeekOnSunday={settings.date.startWeekOnSunday}
+			twentyFourHourFormat={settings.design.twentyFourHourFormat}
+			showNotes={display === 'agenda-week-with-notes'}
+			noteTemplate={settings.weekPage.noteTemplate}
+			agendaStart={settings.weekPage.agendaStart}
+			agendaEnd={settings.weekPage.agendaEnd} />
 	{:else if display === 'agenda-day'}
-		<AgendaDay />
+		<AgendaDay twentyFourHourFormat={settings.design.twentyFourHourFormat} />
 	{:else if display === 'notes-quarter'}
 		<NotesQuarter
 			months={settings.months.filter(
@@ -95,7 +102,7 @@
 			startWeekOnSunday={settings.date.startWeekOnSunday}
 			display="rows" />
 	{:else if display === 'notes-day'}
-		<NotesDay />
+		<NotesDay twentyFourHourFormat={settings.design.twentyFourHourFormat} />
 	{:else if display === 'habit-year-by-week'}
 		<HabitsYear
 			{timeframe}

src/lib/state/collection.ts

@@ -29,6 +29,7 @@ export type PageTemplate =
 	| 'calendar-month'
 	| 'calendar-month-with-notes'
 	| 'agenda-week'
+	| 'agenda-week-with-notes'
 	| 'agenda-day'
 	| 'notes-year'
 	| 'notes-quarter'

src/lib/state/planner-settings.svelte.ts

@@ -133,6 +133,7 @@ export class PlannerSettings {
 		colorText = $state('#424242');
 		colorLines = $state('#e2e2e2');
 		colorDots = $state('#454545');
+		twentyFourHourFormat = $state(false);
 	})();
 
 	/** Settings for changing the dates of the planner (like start & end dates) */
@@ -203,6 +204,9 @@ export class PlannerSettings {
 	readonly weekPage = new (class WeekPageSettings {
 		disable = $state(false);
 		template = $state('agenda-week' as PageTemplate);
+		agendaStart = $state(0);
+		agendaEnd = $state(24);
+		noteTemplate = $state('dotted' as PageTemplate);
 		notePagesTemplate = $state('dotted' as PageTemplate);
 		notePagesAmount = $state(0);
 		useWeekSinceYear = $state(true);
@@ -495,6 +499,7 @@ export class PlannerSettings {
 				colorText: this.design.colorText,
 				colorLines: this.design.colorLines,
 				colorDots: this.design.colorDots,
+				twentyFourHourFormat: this.design.twentyFourHourFormat,
 			},
 			date: {
 				timezoneOffset: this.date.timezoneOffset,
@@ -542,6 +547,9 @@ export class PlannerSettings {
 			},
 			weekPage: {
 				disable: this.weekPage.disable,
+				agendaStart: this.weekPage.agendaStart,
+				agendaEnd: this.weekPage.agendaEnd,
+				noteTemplate: this.weekPage.noteTemplate,
 				notePagesTemplate: this.weekPage.notePagesTemplate,
 				notePagesAmount: this.weekPage.notePagesAmount,
 				useWeekSinceYear: this.weekPage.useWeekSinceYear,
@@ -587,6 +595,8 @@ export class PlannerSettings {
 			this.design.colorLines = state.design.colorLines;
 		if (state?.design?.colorDots !== undefined)
 			this.design.colorDots = state.design.colorDots;
+		if (state?.design?.twentyFourHourFormat !== undefined)
+			this.design.twentyFourHourFormat = state.design.twentyFourHourFormat;
 
 		// Date Settings
 		if (state?.date?.timezoneOffset !== undefined)
@@ -664,6 +674,12 @@ export class PlannerSettings {
 			this.weekPage.disable = state.weekPage.disable;
 		if (state?.weekPage?.notePagesTemplate !== undefined)
 			this.weekPage.notePagesTemplate = state.weekPage.notePagesTemplate;
+		if (state?.weekPage?.noteTemplate !== undefined)
+			this.weekPage.noteTemplate = state.weekPage.noteTemplate;
+		if (state?.weekPage?.agendaStart !== undefined)
+			this.weekPage.agendaStart = state.weekPage.agendaStart;
+		if (state?.weekPage?.agendaEnd !== undefined)
+			this.weekPage.agendaEnd = state.weekPage.agendaEnd;
 		if (state?.weekPage?.notePagesAmount !== undefined)
 			this.weekPage.notePagesAmount = state.weekPage.notePagesAmount;
 		if (state?.weekPage?.useWeekSinceYear !== undefined)

src/routes/planner/+page.svelte

@@ -40,6 +40,7 @@
 		{ name: 'Calendar - With Notes', value: 'calendar-month-with-notes' },
 		{ name: 'Agenda - Daily', value: 'agenda-day' },
 		{ name: 'Agenda - Weekly', value: 'agenda-week' },
+		{ name: 'Agenda - Weekly - With Notes', value: 'agenda-week-with-notes' },
 		{ name: 'Notes - Yearly', value: 'notes-year' },
 		{ name: 'Notes - Quarterly', value: 'notes-quarter' },
 		{ name: 'Notes - Weekly', value: 'notes-week' },
@@ -87,6 +88,29 @@
 		});
 	}
 
+	const gridTemplates = pageTemplates.filter((t) => {
+		return [
+			'blank',
+			'grid',
+			'grid-small',
+			'grid-large',
+			'dotted',
+			'dotted-small',
+			'dotted-large',
+			// The lined styles have hard-coded line counts, so they
+			// don’t work well on half pages currently:
+			// 'lined',
+			// 'lined-small',
+			// 'lined-large',
+			// 'numbered',
+			// 'numbered-small',
+			// 'numbered-large',
+			// 'todo',
+			// 'todo-small',
+			// 'todo-large',
+		].includes(t.value);
+	});
+
 	let customTimeframe = $state(false);
 	let showHelp = $state(page.url.searchParams.get('help') !== '0');
 	let showMenu = $state(true);
@@ -453,6 +477,36 @@
 							{/each}
 						</select>
 					</fieldset>
+					{#if settings.weekPage.template === 'agenda-week' || settings.weekPage.template === 'agenda-week-with-notes'}
+						<fieldset>
+							<label for="agendaWeekStart">Agenda from</label>
+							<input
+								type="number"
+								id="agendaWeekStart"
+								min="0"
+								max={settings.weekPage.agendaEnd}
+								step="1"
+								bind:value={settings.weekPage.agendaStart} />
+							<label for="agendaWeekEnd">to</label>
+							<input
+								type="number"
+								id="agendaWeekEnd"
+								min={settings.weekPage.agendaStart}
+								max="24"
+								step="1"
+								bind:value={settings.weekPage.agendaEnd} />
+						</fieldset>
+					{/if}
+					{#if settings.weekPage.template === 'agenda-week-with-notes'}
+						<fieldset>
+							<label for="weekNoteTemplate">Notes Template</label>
+							<select id="weekNoteTemplate" bind:value={settings.weekPage.noteTemplate}>
+								{#each gridTemplates as template (template.value)}
+									<option value={template.value}>{template.name}</option>
+								{/each}
+							</select>
+						</fieldset>
+					{/if}
 					<fieldset>
 						<label for="weekNotePagesAmount">Additional Note Pages</label>
 						<input
@@ -558,6 +612,13 @@
 				{/if}
 
 				<h3>Design</h3>
+				<div class="checkbox">
+					<input
+						type="checkbox"
+						id="twentyFourHourFormat"
+						bind:checked={settings.design.twentyFourHourFormat} />
+					<label for="twentyFourHourFormat">Use 24-hour format</label>
+				</div>
 				<fieldset>
 					<label for="designFont">Font</label>
 					<select id="designFont" bind:value={settings.design.font}>