这是我参与更文挑战的第3天,活动详情查看: 更文挑战
首先,感谢自己能坚持到第三天,也欢迎大家看看前两天的记录,对本项目有个初步的了解:
Electron+Vue3 MAC 版日历开发记录(1) Electron+Vue3 MAC 版日历 开发记录(2)——功能清单
第三天了,如果不进入实际的代码阶段,显得我刻意为了这次挑战活动而凑数。今天我们从 PrimeVue 入手。
PrimeVue
选择 PrimeVue 的原因
在Electron+Vue3 MAC 版日历开发记录(1)中写道,我为什么选择 FullCalendar
,但 FullCalendar
本身没有提供 Vue 3 版本代码 (只有 Vue 2),而且国内一些主流的 Vue 组件框架 (如:Element Plus)没有提供 FullCalendar
封装库,在对全网搜索后,发现了 PrimeVue:
PrimeVue 介绍
The Ultimate UI Component Library for Vue 3. 具体官网:primefaces.org/primevue/
PrimeVue 和 fullcalendar 安装
本项目在开发阶段的前端 Vue 组件主要使用到 Primevue
,以及配套的 primeicons
和 primeflex
。除此之外,还需要安装日历本身的组件:@fullcalendar/core
、@fullcalendar/daygrid
、 @fullcalendar/interaction
和 @fullcalendar/timegrid
。
"dependencies": {
"@fullcalendar/core": "^5.6.0",
"@fullcalendar/daygrid": "^5.6.0",
"@fullcalendar/interaction": "^5.6.0",
"@fullcalendar/timegrid": "^5.6.0",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primevue": "3.3.5",
}
通过 yarn install
安装后,在 Vue 全局中载入,具体在 renderer/src/index.ts
加入代码:
import * as PrimeVue from 'primevue/config';
import 'primevue/resources/themes/saga-green/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
const app = createApp(App);
app.use(PrimeVue, {ripple: true}).use(router).use(store, key);
app.mount('#app');
其中使用
PrimeVue
自带的saga-green
主题样式,我们也可以在后续自定义主题,
一切准备就绪后,就可以直接在代码中使用日历组件了。
PrimeVue 使用
直接结合文档 FullCalendar library 写代码:
<template>
<Fullcalendar
ref="fullcalendar"
:events="events"
:options="calendarOptions"
/>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import '@fullcalendar/core/vdom';
import '@fullcalendar/core';
import {PrimeIcons} from 'primevue/api';
import Fullcalendar from 'primevue/fullcalendar';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import zhLocale from '@fullcalendar/core/locales/zh-cn';
import 'primeicons/primeicons.css';
export default defineComponent({
name: 'FullcalendarSub',
components: {
Fullcalendar,
},
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
customButtons: {
settingButton: {
text: '',
icon: PrimeIcons.COG,
click: this.settingClick,
},
},
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'settingButton',
},
dateClick: this.dateClick,
editable: false,
height: 680,
// contentHeight: 600,
aspectRatio: 1, // 单元格宽高的比例,宽是高的2倍
views: this.dayCellNewContent(),
locale: zhLocale,
},
};
},
});
</script>
这里,引入的两个属性:
- events:这个事件后续再说;
- calendarOptions:主要为组件做一些配置项。
calendarOptions 解析
在解析之前先看看效果:
- header 和 customButtons
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'settingButton',
},
header left 主要包括:上个月/下个月 选择框; header center 主要包括:标题,即当月; header right 主要包括:自定义设置按钮;
其中自定义设置按钮 config:
customButtons: {
settingButton: {
text: '',
icon: PrimeIcons.COG,
click: this.settingClick,
},
},
这里我主要是利用图标展示,代替 text
,而为了使用 PrimeIcons
,我们还需要覆盖 Fullcalendar
自带的样式,具体看 default.scss
:
@import "primeflex/src/_variables.scss";
@import "primeflex/src/_text.scss";
@import 'primeflex/primeflex.css';
// 使用 PrimeIcons
::v-deep(.fc-icon-pi) {
font-family: "PrimeIcons" !important;
text-indent: 0;
font-size: 1rem !important;
}
click
事件就是为了打开设置界面,这个留给后续整理说明。
- locale
Fullcalendar 提供了 l18n,这里我们选择中文的,即需要在开始时引入:
import zhLocale from '@fullcalendar/core/locales/zh-cn';
- plugins 和 views
plugins: [dayGridPlugin, interactionPlugin],
本身 Fullcalendar
提供了好些 View,如本项目使用 dayGridPlugin
直接使用 Month View
,至于后续可以使用 Custom Views
和 对应的 API 来做个性化使用,具体直接参考文档使用。
小结
至于如何使用 dayGridPlugin
和 Month View
,明天继续整理说明,并解析如何增加「农历显示」。
未完待续!