This is the third day of my participation in Gwen Challenge

First of all, I would like to thank myself for sticking to the third day, and welcome you to have a preliminary understanding of this project by looking at the records of the first two days:

Vacuum +Vue3 Calendar Development History for MAC (1) Vacuum +Vue3 Calendar development History for MAC (2) – Feature list

The third day, if I do not enter the actual code stage, it seems that I deliberately for this challenge activity and make up the numbers. Today we start with PrimeVue.

PrimeVue

Reasons for choosing PrimeVue

In Electron+Vue3 Calendar for MAC version development record (1), it is written that why I choose FullCalendar, but FullCalendar itself does not provide Vue3 version code (only Vue 2), and some mainstream Vue component frameworks in China (such as: Element Plus (Element Plus) does not provide the FullCalendar wrapper library. After searching the entire web, we found PrimeVue:

PrimeVue introduction

The Ultimate UI Component Library

for Vue 3.

Specific official website: primefaces.org/primevue/

PrimeVue and FullCalendar installation

The front-end Vue component of the project in the development stage mainly uses Primevue, as well as the corresponding PrimeIcons and PrimeFlex. In addition, you need to install the components of the calendar itself: @fullCalendar /core, @fullCalendar/dayGrid, @FullCalendar/Interaction, and @fullCalendar/timeGrid.

< span style = "max-width: 100%; clear: both; min-height: 1em; "^ 5.6.0," "@ fullcalendar/timegrid" : "^ 5.6.0", "primeflex" : "^ 2.0.0", "primeicons" : "^ 4.1.0", "primevue" : "3.3.5,"}Copy the code

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');
Copy the code

It uses the Saga-Green theme style from PrimeVue, and we can also customize the theme in the future.

With everything in place, you can use the calendar component directly in your code.

PrimeVue use

Write code directly in conjunction with the 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: Views: this.daycellnewContent (), locale: zhLocale,},}; }}); </script>Copy the code

Here, two attributes are introduced:

  1. -Serena: I’ll talk about this later.
  2. CalendarOptions: Mainly do some configuration items for the components.

CalendarOptions parsing

Take a look at the effects before parsing:

  • The header and customButtons
headerToolbar: {
  left: 'prev,next',
  center: 'title',
  right: 'settingButton',
},
Copy the code

Header left mainly includes: last month/next month selection box; Header Center mainly includes: title, that is, the current month; Header Right mainly includes: custom setting button;

Where user-defined setting button config:

customButtons: {
  settingButton: {
    text: '',
    icon: PrimeIcons.COG,
    click: this.settingClick,
  },
},
Copy the code

Here I mainly use ICONS instead of text, but to use PrimeIcons, we also need to overwrite the styles that come with Fullcalendar, see default.scss:

@import "primeflex/src/_variables.scss"; @import "primeflex/src/_text.scss"; @import 'primeflex/primeflex.css'; // Using PrimeIcons ::v-deep(.fc-icon-pi) {font: "PrimeIcons"! important; text-indent: 0; font-size: 1rem ! important; }Copy the code

The Click event opens the Settings screen, which I’ll leave to tidy up later.

  • locale

Fullcalendar provides l18n, here we choose Chinese, that is, we need to introduce at the beginning:

import zhLocale from '@fullcalendar/core/locales/zh-cn';
Copy the code
  • The plugins and views
plugins: [dayGridPlugin, interactionPlugin],
Copy the code

Fullcalendar itself provides a number of Views. For example, this project uses dayGridPlugin to directly use Month View, and Custom Views and corresponding API can be used for personalized use in the follow-up. For details, please refer to the documents directly.

summary

As for how to use the dayGridPlugin and Month View, I will continue the instructions tomorrow and explain how to add a “lunar display”.

To be continued!