element-plus 日历组件 Calendar设置每周第一天为周一-非国际化版

在 element 2.10.1+ 的版本中，有first-day-of-week属性，可选值为1 到 7，默认值为1。即日历面板每周从周一开始。

在 element-plus 中，日历组件默认从周日开始，且没有first-day-of-week属性来自由定义周起始日。在国际化小节，官网给了如下说明：

由于 Element Plus 的默认语言为英语，如果你需要设置其它的语言，请参考国际化文档。

要注意的是：日期相关的文字（月份，每一周的第一天等等）也都是通过国际化来配置的。

解：

步骤一：设置语言为 简体中文（zh-cn）- 如配置，直接看步骤二

官网提供了两种全局配置国际化的方式，选择任一即可

// 方式一：main.ts 文件
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

// 方式二：App.vue
<template>
  <el-config-provider :locale="zhCn">
    <app />
  </el-config-provider>
</template>

<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>

步骤二：日期和时间本地化

// 在使用日历的vue页面配置
import 'dayjs/locale/zh-cn'    // 然而，并未生效，每周第一天仍是周日。

翻阅资料后，解决方案是配置dayjs，最终OK

import { dayjs } from "element-plus";
dayjs.en.weekStart = 1;

The end.