feat: support set start of the week (#296)

* feat: start of week

* fix: set Monday as default starting day in a week

* fix: Update dayjs configuration after modifying the start day of the week.

---------

Co-authored-by: e-zz <>
Co-authored-by: Hayden Chen <hayden.chen.dev@gmail.com>

Author: e-zz

src/Agenda3/components/calendar/Calendar.tsx

@@ -42,6 +42,7 @@ const Calendar = ({ onCalendarTitleChange }: CalendarProps, ref) => {
   const { updateEntity } = useAgendaEntities()
   const tasksWithStart = useAtomValue(tasksWithStartAtom)
   const settings = useAtomValue(settingsAtom)
+  const startingDay = settings.general?.startOfWeek
   const groupType = settings.selectedFilters?.length ? 'filter' : 'page'
   const showTasks = tasksWithStart?.filter((task) =>
     settings.viewOptions?.hideCompleted ? task.status === 'todo' : true,
@@ -185,7 +186,7 @@ const Calendar = ({ onCalendarTitleChange }: CalendarProps, ref) => {
         weekNumbers
         weekNumberContent={({ num, date }) => <WeekNumber weekNumber={num} date={date} />}
         defaultTimedEventDuration="00:30"
-        firstDay={1}
+        firstDay={Number(startingDay)}
         fixedWeekCount={false}
         ref={calendarRef}
         height="100%"

src/Agenda3/components/modals/SettingsModal/GeneralSettingsForm.tsx

@@ -8,7 +8,7 @@ const GeneralSettingsForm = () => {
   const { t, i18n } = useTranslation()
   const { settings, setSettings } = useSettings()
 
-  const onChange = (key: string, value: string | boolean | undefined | Filter[] | string[]) => {
+  const onChange = (key: string, value: number | string | boolean | undefined | Filter[] | string[]) => {
     setSettings(key, value)
   }
   // 当切换语言时，更新 i18n 的语言
@@ -44,6 +44,24 @@ const GeneralSettingsForm = () => {
             ]}
           />
         </div>
+        <div className="mt-4">
+          <div className="text-gray-500">Start of Week</div>
+          <Select
+            placeholder="Select Start of Week"
+            className="w-[300px]"
+            value={settings.general?.startOfWeek}
+            onChange={(e) => onChange('general.startOfWeek', e)}
+            options={[
+              { label: 'Sun', value: 0 },
+              { label: 'Mon', value: 1 },
+              { label: 'Tue', value: 2 },
+              { label: 'Wed', value: 3 },
+              { label: 'Thu', value: 4 },
+              { label: 'Fri', value: 5 },
+              { label: 'Sat', value: 6 },
+            ]}
+          />
+        </div>
       </div>
     </>
   )

src/Agenda3/hooks/useSettings.ts

@@ -1,15 +1,19 @@
 import { useLocalStorageValue } from '@react-hookz/web'
 import { useAtom } from 'jotai'
-import { clone, set } from 'lodash-es'
+import { clone, set, merge } from 'lodash-es'
 
-import { type Settings, settingsAtom, type Filter } from '@/Agenda3/models/settings'
+import { type Settings, settingsAtom, type Filter, DEFAULT_SETTINGS } from '@/Agenda3/models/settings'
+import initializeDayjs from '@/register/dayjs'
 
 const isPlugin = import.meta.env.VITE_MODE === 'plugin'
 const useSettings = () => {
   const [settings, setAtomSettings] = useAtom(settingsAtom)
   const { set: setLocalStorage, value: valueLocalStorage } = useLocalStorageValue<Settings>('settings')
 
-  const setSettings = (key: string, value: string | boolean | undefined | Filter[] | string[]) => {
+  const setSettings = (key: string, value: number | string | boolean | undefined | Filter[] | string[]) => {
+    if (key === 'general.startOfWeek') {
+      initializeDayjs(Number(value))
+    }
     setAtomSettings((oldSettings) => {
       const newSettings = set(clone(oldSettings), key, value)
       if (isPlugin) {
@@ -27,13 +31,12 @@ const useSettings = () => {
   }
   // initialize settings
   const initializeSettings = () => {
-    const base: Settings = { isInitialized: true }
-    if (isPlugin) {
-      const _settings = (logseq.settings as unknown as Settings) ?? {}
-      setAtomSettings(_settings ? { ..._settings, isInitialized: true } : base)
-    } else {
-      setAtomSettings(valueLocalStorage ? { ...valueLocalStorage, isInitialized: true } : base)
+    const getNewSettings = (userSettings?: Settings) => {
+      return merge({}, DEFAULT_SETTINGS, userSettings, { isInitialized: true })
     }
+    const userSettings = isPlugin ? (logseq.settings as unknown as Settings) : valueLocalStorage
+    initializeDayjs(userSettings?.general?.startOfWeek ?? DEFAULT_SETTINGS.general.startOfWeek)
+    setAtomSettings(getNewSettings(userSettings))
   }
   return {
     settings,

src/Agenda3/index.tsx

@@ -7,7 +7,6 @@ import useAgendaEntities from '@/Agenda3/hooks/useAgendaEntities'
 import usePages from '@/Agenda3/hooks/usePages'
 import { appAtom } from '@/Agenda3/models/app'
 import { logseqAtom } from '@/Agenda3/models/logseq'
-import initializeDayjs from '@/register/dayjs'
 import { cn } from '@/util/util'
 
 import MultipleView from './components/MainArea'
@@ -30,7 +29,6 @@ const Dashboard = () => {
   const [connectionErrorModal, setConnectionErrorModal] = useState(false)
 
   const loadData = useCallback(() => {
-    initializeDayjs(1)
     refreshEntities().catch((error) => {
       console.error('retrieve tasks failed', error)
       if (import.meta.env.VITE_MODE === 'web') {
@@ -72,7 +70,9 @@ const Dashboard = () => {
   return (
     <div
       className={cn(
-        "flex h-screen w-screen bg-gray-100 before:pointer-events-none before:absolute before:h-[180px] before:w-[240px] before:bg-gradient-conic before:from-sky-200 before:via-blue-200 before:blur-2xl before:transition-all before:content-['']  dark:bg-zinc-800 before:dark:from-sky-900 before:dark:via-[#0141ff] before:dark:opacity-40",
+        `flex h-screen w-screen bg-gray-100 before:pointer-events-none before:absolute before:h-[180px] before:w-[240px]
+        before:bg-gradient-conic before:from-sky-200 before:via-blue-200 before:blur-2xl before:transition-all
+        before:content-[''] before:dark:from-sky-900 before:dark:via-[#0141ff] before:dark:opacity-40`,
         {
           'pt-[30px]': import.meta.env.VITE_MODE === 'plugin',
         },

src/Agenda3/models/settings.ts

@@ -6,6 +6,7 @@ export type Settings = {
   general?: {
     useJournalDayAsSchedule?: boolean
     language?: Language
+    startOfWeek?: number
   }
   ics?: {
     repo?: string
@@ -22,7 +23,12 @@ export type Settings = {
     objective?: boolean
   }
 }
-export const settingsAtom = atom<Settings>({ isInitialized: false, viewOptions: { showTimeLog: false } })
+export const DEFAULT_SETTINGS = {
+  isInitialized: false,
+  general: { language: 'en', startOfWeek: 1 },
+  viewOptions: { showTimeLog: false },
+} satisfies Settings
+export const settingsAtom = atom<Settings>(DEFAULT_SETTINGS)
 
 export type Filter = {
   id: string

src/register/dayjs.ts

@@ -22,7 +22,7 @@ dayjs.extend(quarterOfYear)
 dayjs.extend(isoWeek)
 dayjs.extend(weekOfYear) // Use plugin
 
-const initializeDayjs = (weekStartDay: 0 | 1) => {
+const initializeDayjs = (weekStartDay: number) => {
   // dayjs.locale('zh-cn')
   dayjs.updateLocale('en', {
     weekStart: weekStartDay,