Multi-day events in Calendar view

src/lib/stores/translations/en.json

@@ -303,6 +303,7 @@
                 "new-note": "New note",
                 "fields": {
                     "date": "Date",
+                    "end_date": "End date",
                     "check": "Check",
                     "none": "None"
                 },

src/lib/stores/translations/zh-CN.json

@@ -303,6 +303,7 @@
                 "new-note": "新建笔记",
                 "fields": {
                     "date": "日期",
+                    "end_date": "结束日期",
                     "check": "复选框",
                     "none": "无"
                 },

src/ui/views/Calendar/CalendarView.svelte

@@ -67,6 +67,9 @@
   $: dateField =
     dateFields.find((field) => config?.dateField === field.name) ??
     dateFields[0];
+  $: endDateField =
+    dateFields.find((field) => config?.endDateField === field.name) ??
+    dateFields[0];
 
   $: booleanFields = fields
     .filter((field) => !field.repeated)
@@ -78,7 +81,7 @@
   $: dateInterval = computeDateInterval(anchorDate, interval);
 
   $: groupedRecords = dateField
-    ? groupRecordsByField(records, dateField.name)
+    ? groupRecordsByField(records, dateField.name, endDateField?.name)
     : {};
   $: title = dateInterval ? generateTitle(dateInterval) : "";
   $: dates = dateInterval ? generateDates(dateInterval) : [];
@@ -95,6 +98,9 @@
   function handleDateFieldChange(dateField: string) {
     saveConfig({ ...config, dateField });
   }
+  function handleEndDateFieldChange(endDateField: string) {
+    saveConfig({ ...config, endDateField });
+  }
   function handleCheckFieldChange(checkField: string) {
     saveConfig({ ...config, checkField });
   }
@@ -172,6 +178,14 @@
             on:change={({ detail }) => handleDateFieldChange(detail)}
           />
         </Field>
+        <Field name={$i18n.t("views.calendar.fields.end_date")}>
+          <Select
+            value={endDateField?.name ?? ""}
+            options={dateFields.map(fieldToSelectableValue)}
+            placeholder={$i18n.t("views.calendar.fields.none") ?? ""}
+            on:change={({ detail }) => handleEndDateFieldChange(detail)}
+          />
+        </Field>
         <Field name={$i18n.t("views.calendar.fields.check")}>
           <Select
             allowEmpty

src/ui/views/Calendar/calendar.ts

@@ -57,27 +57,46 @@ export function subtractInterval(
 
 export function groupRecordsByField(
   records: DataRecord[],
-  field: string
+  startDateField: string,
+  endDateField?: string
 ): Record<string, DataRecord[]> {
   const res: Record<string, DataRecord[]> = {};
 
   records.forEach((record) => {
-    const dateValue = record.values[field];
+    const dateValue = record.values[startDateField];
+    const endDateValue = endDateField != undefined ? record.values[endDateField] : null;
 
     const start = dateValue
       ? isDate(dateValue)
         ? dayjs(dateValue)
         : null
       : null;
 
-    if (start) {
+    const end = dateValue ? isDate(endDateValue) ? dayjs(endDateValue) : null : null;
+
+    if (start && end == null) {
       const dateStr = start.format("YYYY-MM-DD");
       if (!(dateStr in res)) {
         res[dateStr] = [];
       }
 
       res[dateStr]?.push(record);
+
+    } else if (start && end?.isAfter(start, "day")) {
+      for (
+        let date = start;
+        date.isSame(end, "day") || date.isBefore(end, "day");
+        date = date.add(1, "day")
+      ) {
+        const dateStr = date.format("YYYY-MM-DD");
+        if (!(dateStr in res)) {
+          res[dateStr] = [];
+        }
+
+        res[dateStr]?.push(record);
+      }
     }
+
   });
 
   return res;

src/ui/views/Calendar/types.ts

@@ -3,5 +3,6 @@ import type { CalendarInterval } from "./calendar";
 export interface CalendarConfig {
   readonly interval?: CalendarInterval;
   readonly dateField?: string;
+  readonly endDateField?: string;
   readonly checkField?: string;
 }