Merge pull request #50 from rishacha/feat/locale

Adds support for a configurable calendar locale
RogerHuHu · Aug 6, 2024 · a3a02c8 · a3a02c8
2 parents 4f3991c + 4f64a3f
commit a3a02c8
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 15 deletions.
diff --git a/i18n/en_US.json b/i18n/en_US.json
@@ -62,5 +62,7 @@
   "firstDayOfWeek": "First day of week",
   "gregorianCalendar": "Gregorian calendar",
   "lunarCalendar": "Lunar calendar",
-  "showLunarCalendar": "Show chinese lunar calendar"
+  "showLunarCalendar": "Show chinese lunar calendar",
+  "selectLocale": "Select your locale",
+  "localeOptions":["en-us","zh-cn"]
 }
diff --git a/i18n/zh_CN.json b/i18n/zh_CN.json
@@ -3,7 +3,7 @@
   "calendar": "日历",
   "kanban": "看板",
   "scheduleManager": "日程管理",
-  "addScheduleCategory":"添加日程分类",
+  "addScheduleCategory": "添加日程分类",
   "scheduleCategory": "日程分类",
   "inputScheduleCategoryName": "请输入日程分类名",
   "scheduleCategoryColorError": "日程分类颜色不能重复",
@@ -62,5 +62,10 @@
   "firstDayOfWeek": "一周开始",
   "gregorianCalendar": "公历",
   "lunarCalendar": "农历",
-  "showLunarCalendar": "显示农历"
-}
+  "showLunarCalendar": "显示农历",
+  "selectLocale": "Select your locale",
+  "localeOptions": [
+    "zh-cn",
+    "en-us"
+  ]
+}
diff --git a/src/ScheduleCategories.ts b/src/ScheduleCategories.ts
@@ -1,6 +1,5 @@
 import { ScheduleCategory } from "./ScheduleCategory";
 import { Schedule } from "./Schedule";
-import { el, tr } from "date-fns/locale";
 import { fcApi, globalData } from "./utils/utils";
 import EventAggregator from "./utils/EventAggregator";
 import { reactive } from "vue"

diff --git a/src/ScheduleManager.ts b/src/ScheduleManager.ts
@@ -94,11 +94,15 @@ export class ScheduleManager {
         EventAggregator.on('updateShowLunarCalendar', (p:any) => {
             this.setDocumentShowLunarCalendarProperty(p);
         })
+
+        EventAggregator.on('updateLocale', (p:any) => {
+            this.setDocumentUserLocale(p);
+        });
     }
 
     async createDocumentAndSetAttributes(notebookId: string, docProp: any) {
         await this.createDocument(notebookId, docProp);
-        await this.setDocumentProperty(this.docId, docProp.checked, docProp.color, 7, 1, true);
+        await this.setDocumentProperty(this.docId, docProp.checked, docProp.color, 7, 1, true,1);
         let document = {
             id: this.docId,
             name: docProp.name,
@@ -150,7 +154,7 @@ export class ScheduleManager {
         });
     }
 
-    async setDocumentProperty(docId: string, checked: boolean, color: string, archiveTime: number, firstDayOfWeek: number, showLunarCalendar: boolean) {
+    async setDocumentProperty(docId: string, checked: boolean, color: string, archiveTime: number, firstDayOfWeek: number, showLunarCalendar: boolean,userLocale:number) {
         await fetchSyncPost("/api/attr/setBlockAttrs", {
             "id": docId,
             "attrs": {
@@ -159,7 +163,8 @@ export class ScheduleManager {
                 "custom-version": "1.1.0",
                 "custom-archiveTime": archiveTime.toString(),
                 "custom-firstDayOfWeek": firstDayOfWeek.toString(),
-                "custom-showLunarCalendar": showLunarCalendar ? "true" : "false"
+                "custom-showLunarCalendar": showLunarCalendar ? "true" : "false",
+                "custom-userLocale": userLocale.toString()
             }
         }).then(response => {
 
@@ -215,6 +220,18 @@ export class ScheduleManager {
         }
     }
 
+    async setDocumentUserLocale(locale: string) {
+        console.log("Set Document User Locale", locale)
+        for(let document of this.documents) {
+            await fetchSyncPost("/api/attr/setBlockAttrs", {
+                "id": document.id,
+                "attrs": {
+                    "custom-userLocale": locale.toString()
+                }
+            });
+        }
+    }
+
     async setDocumentShowLunarCalendarProperty(showLunarCalendar: boolean) {
         for(let document of this.documents) {
             await fetchSyncPost("/api/attr/setBlockAttrs", {
@@ -246,15 +263,18 @@ export class ScheduleManager {
     async getDocumentsName() {
         for(let doc of this.documents) {
             await fetchSyncPost("/api/attr/getBlockAttrs", {"id":doc.id}).then(response => {
+                console.log("Get Document Name",response.data)
                 doc.name = response.data.title;
                 doc.checked = response.data["custom-checked"] === "true" ? true : false;
                 doc.color = response.data["custom-color"];
                 doc.archiveTime = response.data['custom-archiveTime'];
                 doc.firstDayOfWeek = response.data["custom-firstDayOfWeek"];
                 doc.showLunarCalendar = response.data["custom-showLunarCalendar"] == "true" ? true : false;
+                doc.userLocale = response.data["custom-userLocale"];
                 globalData.archiveTime = doc.archiveTime === undefined ? 7 : parseInt(doc.archiveTime, 10);
                 globalData.selectedFirstDayOfWeek = doc.firstDayOfWeek === undefined ? 0 : doc.firstDayOfWeek;
-                globalData.showLunarCalendar = doc.showLunarCalendar
+                globalData.showLunarCalendar = doc.showLunarCalendar;
+                globalData.userLocale = doc.userLocale;
             })
         }
     }

diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
@@ -66,14 +66,15 @@
     },
 
     data() {
+      // console.log(globalData)
       return {
         globalData,
         
         calendarOptions: {
           plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin, rrulePlugin],
           initialView: 'dayGridMonth', // 默认为哪个视图（月： dayGridMonth，周：timeGridWeek，日：timeGridDay）
           firstDay: 1, // 设置一周中显示的第一天是哪天，周日是 0，周一是 1， 类推
-          locale: 'zh-cn', // 切换语言，当前为中文
+          locale: globalData.userLocale, // 切换语言，当前为中文
           eventColor: '#3BB2E3', // 全部日历日程背景色
           initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时，一定要初始化日期时间
           //aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例
@@ -155,6 +156,7 @@
     mounted() {
       setFCApi(this.$refs.fullCalendar.getApi());
       this.calendarOptions.firstDay = globalData.selectedFirstDayOfWeek;
+      this.calendarOptions.locale = globalData.userLocale;
       EventAggregator.emit('readCategories');
       EventAggregator.on('resize', () => {
           setTimeout(() => {

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
@@ -43,6 +43,19 @@
       <n-gi>
         <n-switch v-model:value="isShowLunarCalendar" @update:value="handleUpdateShowLunarCalendar"/>
       </n-gi>
+      <n-gi :span="6">
+        <div class="sm-schedule-item-header" style="margin-top: 3px;">{{ selectLocaleText }}</div>
+      </n-gi>
+      <n-gi>
+        <n-select :options="localeOptions" size="tiny" v-model:value="selectedLocale" />
+      </n-gi>
+      <n-gi>
+        <n-button quaternary circle size="small" @click="handleUpdateLocale()">
+          <template #icon>
+            <n-icon :component="CheckOutlined" color="#18a058" />
+          </template>
+        </n-button>
+      </n-gi>
       <!--n-gi :span="8">
         <n-button strong secondary round type="info" @click="handleTest()">
           {{ archiveText }}
@@ -80,8 +93,10 @@ export default defineComponent({
       dayText: i18n.day,
       archiveText: i18n.archive,
       showLunarCalendarText: i18n.showLunarCalendar,
+      selectLocaleText: i18n.selectLocale,
       archiveTime: ref(7),
       selectedDay: ref(1),
+      selectedLocale: ref(0),
       calDavClient: CalDavClient,
 
       firstDaysOfWeek: [
@@ -95,6 +110,13 @@ export default defineComponent({
         }
       ],
 
+      localeOptions: i18n.localeOptions.map((locale,idx)=>{
+        return {
+          value: idx,
+          label: locale
+        }
+      }),
+
       isShowLunarCalendar: ref(true)
     };  
   },
@@ -108,6 +130,7 @@ export default defineComponent({
   mounted() {
     this.archiveTime = globalData.archiveTime;
     this.isShowLunarCalendar = globalData.showLunarCalendar;
+    // this.selectedLocale = globalData.userLocale;
   },
 
   methods: {
@@ -129,6 +152,10 @@ export default defineComponent({
       EventAggregator.emit('updateShowLunarCalendar', this.isShowLunarCalendar);
       showMessage(i18n.hasUpdated, 6000, "info");
     },
+    handleUpdateLocale() {
+      EventAggregator.emit('updateLocale', this.selectedLocale);
+      showMessage(i18n.hasUpdated, 6000, "info");
+    },
 
     handleTest() {
       this.calDavClient = new CalDavClient("https://calendar.dingtalk.com/dav/users/u_oslxrjui", "u_oslxrjui", "ow5kp2zd");

diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
@@ -62,5 +62,7 @@
   "firstDayOfWeek": "First day of week",
   "gregorianCalendar": "Gregorian calendar",
   "lunarCalendar": "Lunar calendar",
-  "showLunarCalendar": "Show chinese lunar calendar"
+  "showLunarCalendar": "Show chinese lunar calendar",
+  "selectLocale": "Select your locale",
+  "localeOptions":["en-us","zh-cn"]
 }
diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
@@ -3,7 +3,7 @@
   "calendar": "日历",
   "kanban": "看板",
   "scheduleManager": "日程管理",
-  "addScheduleCategory":"添加日程分类",
+  "addScheduleCategory": "添加日程分类",
   "scheduleCategory": "日程分类",
   "inputScheduleCategoryName": "请输入日程分类名",
   "scheduleCategoryColorError": "日程分类颜色不能重复",
@@ -62,5 +62,10 @@
   "firstDayOfWeek": "一周开始",
   "gregorianCalendar": "公历",
   "lunarCalendar": "农历",
-  "showLunarCalendar": "显示农历"
-}
+  "showLunarCalendar": "显示农历",
+  "selectLocale": "Select your locale",
+  "localeOptions": [
+    "zh-cn",
+    "en-us"
+  ]
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -31,7 +31,8 @@ export const globalData = {
     scheduleStatusLogo: ['☕', '🏃‍♂️', '✅', '📦'],
     archiveTime: 7,
     selectedFirstDayOfWeek: 1,
-    showLunarCalendar: true
+    showLunarCalendar: true,
+    userLocale: 'zh-cn'
 }
 
 export enum smColor {