feat: support change start day of week

src/component/CreateNote/index.tsx

@@ -30,11 +30,18 @@ import { AutoComplete } from '../AutoComplete';
 
 import weekOfYear from 'dayjs/plugin/isoWeek';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import { useDocumentEvent } from '../../hooks/useDocumentEvent';
+
 dayjs.extend(weekOfYear);
 dayjs.extend(quarterOfYear);
+dayjs.extend(updateLocale);
 
 export const CreateNote = (props: { width: number }) => {
-  const { app, settings, locale } = useApp() || {};
+  const { app, settings: initialSettings, locale } = useApp() || {};
+  const [settings, setSettings] = useState<PluginSettings | undefined>(
+    initialSettings
+  );
   const { width } = props;
   const [periodicActiveTab, setPeriodicActiveTab] = useState(DAILY);
   const [paraActiveTab, setParaActiveTab] = useState(PROJECT);
@@ -73,6 +80,11 @@ export const CreateNote = (props: { width: number }) => {
       )
       .map((file) => (file as { basename?: string }).basename) || []
   );
+
+  useDocumentEvent('settingUpdate', (event) => {
+    setSettings(event.detail);
+  });
+
   app?.vault.on('create', (file) => {
     if (file instanceof TFile) {
       setExistsDates([file.basename, ...existsDates]);
@@ -91,6 +103,16 @@ export const CreateNote = (props: { width: number }) => {
     }
   });
 
+  // TODO: 监听设置变动
+  dayjs.updateLocale(localeKey, {
+    weekStart:
+      settings?.weekStart === -1
+        ? locale?.locale === 'zh-cn'
+          ? 1
+          : 0
+        : settings?.weekStart,
+  });
+
   const cellRender: (value: dayjs.Dayjs, picker: string) => JSX.Element = (
     value,
     picker

src/component/SettingTab/index.tsx

@@ -12,11 +12,10 @@ export const SettingTab = (props: {
   settings: PluginSettings;
   saveSettings: (settings: PluginSettings) => void;
 }) => {
-  const { app } = useApp() || {};
+  const { app, locale } = useApp() || {};
   const { settings, saveSettings } = props;
   const [formValues, setFormValues] = useState(settings);
   const [form] = Form.useForm();
-
   const folders =
     app?.vault
       .getAllLoadedFiles()
@@ -169,6 +168,31 @@ export const SettingTab = (props: {
                           </Form.Item>
                         </>
                       )}
+                      <Form.Item
+                        help="The start day of the week"
+                        name="weekStart"
+                        label="Week Start:"
+                      >
+                        <Select
+                          options={[
+                            {
+                              value: -1,
+                              label:
+                                'Auto' +
+                                (locale?.locale === 'zh-cn'
+                                  ? '(Monday)'
+                                  : '(Sunday)'),
+                            },
+                            { value: 1, label: 'Monday' },
+                            { value: 2, label: 'Tuesday' },
+                            { value: 3, label: 'Wednesday' },
+                            { value: 4, label: 'Thursday' },
+                            { value: 5, label: 'Friday' },
+                            { value: 6, label: 'Saturday' },
+                            { value: 0, label: 'Sunday' },
+                          ]}
+                        />
+                      </Form.Item>
                     </>
                   )}
                 </>

src/hooks/useDocumentEvent.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const useDocumentEvent = (eventName: string, handler: (event: CustomEvent) => void) => {
+  React.useEffect(() => {
+    document.addEventListener(eventName, handler);
+
+    return () => {
+      document.removeEventListener(eventName, handler);
+    };
+  }, [eventName, handler]);
+};

src/type.ts

@@ -18,6 +18,7 @@ export interface PluginSettings {
   usePARANotes: boolean;
   usePARAAdvanced: boolean;
   paraIndexFilename: 'readme' | 'foldername';
+  weekStart: number;
 }
 
 export type DateType = {

src/view/CreateNote.tsx

@@ -1,5 +1,5 @@
-import { ItemView, WorkspaceLeaf, debounce } from 'obsidian';
 import React from 'react';
+import { ItemView, WorkspaceLeaf, debounce } from 'obsidian';
 import { type Root, createRoot } from 'react-dom/client';
 import type { Locale } from 'antd/es/locale';
 import { CreateNote } from '../component/CreateNote';

src/view/SettingTab.tsx

@@ -25,6 +25,7 @@ export const DEFAULT_SETTINGS: PluginSettings = {
   usePARANotes: true,
   usePARAAdvanced: false,
   paraIndexFilename: 'readme',
+  weekStart: -1,
 };
 
 export class SettingTabView extends PluginSettingTab {
@@ -54,6 +55,10 @@ export class SettingTabView extends PluginSettingTab {
     const saveSettings = (newSettings: PluginSettings) => {
       this.settings = { ...this.settings, ...newSettings };
       this.plugin.saveSettings(this.settings);
+      const event = new CustomEvent('settingUpdate', {
+        detail: this.settings,
+      });
+      document.dispatchEvent(event);
     };
 
     this.root.render(