Adds three days view to Calendar

This commits creates a new view to Calendar, adding three day view and
change the icon for Week View, making it easier to recognize both views.

Author: mup

src/calendar-app/calendar/gui/CalendarGuiUtils.ts

@@ -122,6 +122,19 @@ function weekTitle(date: Date, weekStart: WeekStart): string {
 	}
 }
 
+function shortWeekTitle(date: Date, weekStart: WeekStart): string {
+	const lastDate = incrementDate(new Date(date), 2)
+
+	if (date.getMonth() !== lastDate.getMonth()) {
+		if (date.getFullYear() !== lastDate.getFullYear()) {
+			return `${lang.formats.monthShortWithFullYear.format(date)} - ${lang.formats.monthShortWithFullYear.format(lastDate)}`
+		}
+		return `${lang.formats.monthShort.format(date)} - ${lang.formats.monthShort.format(lastDate)} ${lang.formats.yearNumeric.format(date)}`
+	} else {
+		return `${lang.formats.monthLong.format(date)} ${lang.formats.yearNumeric.format(date)}`
+	}
+}
+
 export function getNextFourteenDays(startOfToday: Date): Array<Date> {
 	let calculationDate = new Date(startOfToday)
 	const days: Date[] = []
@@ -183,6 +196,12 @@ export function calendarNavConfiguration(
 				forward: renderCalendarSwitchRightButton("nextDay_label", onForward),
 				title: titleType === "short" ? formatMonthWithFullYear(date) : formatDateWithWeekday(date),
 			}
+		case CalendarViewType.THREE_DAY:
+			return {
+				back: renderCalendarSwitchLeftButton("prevThreeDays_label", onBack),
+				forward: renderCalendarSwitchRightButton("nextThreeDays_label", onForward),
+				title: shortWeekTitle(date, weekStart),
+			}
 	}
 }
 
@@ -255,7 +274,8 @@ export const SELECTED_DATE_INDICATOR_THICKNESS = 4
 export function getIconForViewType(viewType: CalendarViewType): AllIcons {
 	const lookupTable: Record<CalendarViewType, AllIcons> = {
 		[CalendarViewType.DAY]: Icons.TableSingle,
-		[CalendarViewType.WEEK]: Icons.TableColumns,
+		[CalendarViewType.THREE_DAY]: Icons.TableColumns,
+		[CalendarViewType.WEEK]: Icons.Week,
 		[CalendarViewType.MONTH]: Icons.Table,
 		[CalendarViewType.AGENDA]: Icons.ListUnordered,
 	}
@@ -926,6 +946,10 @@ export function daysHaveEvents(eventsOnDays: EventsOnDays): boolean {
 	return eventsOnDays.shortEventsPerDay.some(isNotEmpty) || isNotEmpty(eventsOnDays.longEvents)
 }
 
+export function daysHaveAllDayEvents(eventsOnDays: EventsOnDays): boolean {
+	return isNotEmpty(eventsOnDays.longEvents)
+}
+
 /**
  * A handler for `onwheel` to move to a forwards or previous view based on mouse wheel movement
  * @returns a function to be used by `onwheel`

src/calendar-app/calendar/view/CalendarDesktopToolbar.ts

@@ -54,6 +54,11 @@ export class CalendarDesktopToolbar implements Component<CalendarDesktopToolbarA
 				label: "day_label",
 				value: CalendarViewType.DAY,
 			},
+			{
+				icon: getIconForViewType(CalendarViewType.THREE_DAY),
+				label: "threeDays_label",
+				value: CalendarViewType.THREE_DAY,
+			},
 			{
 				icon: getIconForViewType(CalendarViewType.WEEK),
 				label: "week_label",

src/calendar-app/calendar/view/CalendarMobileHeader.ts

@@ -142,6 +142,10 @@ export class CalendarMobileHeader implements Component<CalendarMobileHeaderAttrs
 							name: "day_label",
 							value: CalendarViewType.DAY,
 						},
+						{
+							name: "threeDays_label",
+							value: CalendarViewType.THREE_DAY,
+						},
 						{
 							name: "week_label",
 							value: CalendarViewType.WEEK,

src/calendar-app/calendar/view/CalendarView.ts

@@ -301,6 +301,7 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
 									scrollPosition: this.viewModel.getScrollPosition(),
 									onScrollPositionChange: (newPosition: number) => this.viewModel.setScrollPosition(newPosition),
 									onViewChanged: (vnode) => this.viewModel.setViewParameters(vnode.dom as HTMLElement),
+									currentViewType: this.currentViewType,
 								}),
 								floatingActionButton: this.renderFab.bind(this),
 							})
@@ -334,6 +335,41 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
 									scrollPosition: this.viewModel.getScrollPosition(),
 									onScrollPositionChange: (newPosition: number) => this.viewModel.setScrollPosition(newPosition),
 									onViewChanged: (vnode) => this.viewModel.setViewParameters(vnode.dom as HTMLElement),
+									currentViewType: this.currentViewType,
+								}),
+								floatingActionButton: this.renderFab.bind(this),
+							})
+
+						case CalendarViewType.THREE_DAY:
+							return m(BackgroundColumnLayout, {
+								backgroundColor: theme.navigation_bg,
+								desktopToolbar: () => this.renderDesktopToolbar(),
+								mobileHeader: () => this.renderMobileHeader(attrs.header),
+								columnLayout: m(MultiDayCalendarView, {
+									temporaryEvents: this.viewModel.temporaryEvents,
+									getEventsOnDays: this.viewModel.getEventsOnDaysToRender.bind(this.viewModel),
+									daysInPeriod: 3,
+									onEventClicked: (event, domEvent) => this.onEventSelected(event, domEvent, this.htmlSanitizer),
+									onEventKeyDown: this.handleEventKeyDown(),
+									onNewEvent: (date) => {
+										this.createNewEventDialog(date)
+									},
+									selectedDate: this.viewModel.selectedDate(),
+									onDateSelected: (date, viewType) => {
+										this.viewModel.selectedDate(date)
+										this.setUrl(viewType ?? CalendarViewType.THREE_DAY, date)
+									},
+									startOfTheWeek: downcast(locator.logins.getUserController().userSettingsGroupRoot.startOfTheWeek),
+									groupColors: this.viewModel.calendarColors,
+									onChangeViewPeriod: (next) => this.viewPeriod(CalendarViewType.THREE_DAY, next),
+									dragHandlerCallbacks: this.viewModel,
+									isDaySelectorExpanded: this.viewModel.isDaySelectorExpanded(),
+									weekIndicator: calendarWeek(this.viewModel.selectedDate(), this.viewModel.weekStart),
+									selectedTime: this.viewModel.selectedTime,
+									scrollPosition: this.viewModel.getScrollPosition(),
+									onScrollPositionChange: (newPosition: number) => this.viewModel.setScrollPosition(newPosition),
+									onViewChanged: (vnode) => this.viewModel.setViewParameters(vnode.dom as HTMLElement),
+									currentViewType: this.currentViewType,
 								}),
 								floatingActionButton: this.renderFab.bind(this),
 							})
@@ -472,11 +508,12 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
 	}
 
 	private renderMobileHeader(header: AppHeaderAttrs) {
+		const isExpandable = !styles.isDesktopLayout() && this.currentViewType !== CalendarViewType.MONTH && this.currentViewType !== CalendarViewType.THREE_DAY
 		return m(CalendarMobileHeader, {
 			...header,
 			viewType: this.currentViewType,
 			viewSlider: this.viewSlider,
-			showExpandIcon: !styles.isDesktopLayout() && this.currentViewType !== CalendarViewType.MONTH,
+			showExpandIcon: isExpandable,
 			isDaySelectorExpanded: this.viewModel.isDaySelectorExpanded(),
 			navConfiguration: calendarNavConfiguration(
 				this.currentViewType,
@@ -498,7 +535,7 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
 					return
 				}
 
-				if (!styles.isDesktopLayout() && this.currentViewType !== CalendarViewType.MONTH) {
+				if (isExpandable) {
 					if (this.viewModel.isDaySelectorExpanded()) {
 						this.viewModel.setDaySelectorExpanded(false)
 					}
@@ -543,6 +580,11 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
 			},
 			{
 				key: Keys.THREE,
+				exec: () => this.setUrl(CalendarViewType.THREE_DAY, this.viewModel.selectedDate()),
+				help: "switchAgendaView_action",
+			},
+			{
+				key: Keys.FOUR,
 				exec: () => this.setUrl(CalendarViewType.AGENDA, this.viewModel.selectedDate()),
 				help: "switchAgendaView_action",
 			},
@@ -653,7 +695,12 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
 				}
 				unit = "week"
 				break
-
+			case CalendarViewType.THREE_DAY:
+				duration = {
+					day: 3,
+				}
+				unit = "day"
+				break
 			case CalendarViewType.DAY:
 				duration = {
 					day: 1,
@@ -1096,7 +1143,6 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
 			this.setUrl(this.currentViewType, this.viewModel.selectedDate(), true)
 		} else {
 			this.currentViewType = CalendarViewTypeByValue[args.view as CalendarViewType] ? args.view : CalendarViewType.MONTH
-
 			const urlDateParam = args.date
 
 			if (urlDateParam) {