This is the 15th day of my participation in Gwen Challenge

Because yesterday hit a package and can be installed and used normally, this makes me have confidence to continue to write. But at the same time, I also saw the “ugly” interface and helpless to my CSS technology, so next, I will start my code reconstruction journey based on the existing functions, try my best to reconstruct successfully in the next 15 days, output a version in a real sense, and release it on Mac APP Store or Brew. Let everyone use it.

Okay, before I start refactoring, let me tell you where MY ideas came from.

FullCalendar out of Vue 3 Demo

Since there was no Demo version of Vue 3 when I started using FullCalendar, I chose Primevue front-end framework. With the release of FullCalendar Vue 3.

From my personal point of view, I don’t like to continue using Primevue. First of all, it comes from abroad and doesn’t show well in China. The most important reason is that some capabilities it provides need to be paid.

That’s why I didn’t start working on CSS for the first 15 days.

So today we are going to start re-selecting Vue 3 based front-end components.

Start with antfu worship

I have come across Anthony Fu submitting many open source projects these days, and he has become a big fan of his.

There are three projects THAT I would like to learn from:

  1. Github.com/vueuse/vueu… , as one of the authors of Vue 3 development, wrote some generic code sets, there is no reason not to use them.

  1. Naive UI is a Vue3 component library. There are over 70 components that hopefully will help you write less code. It’s complete, thematic adjustable, written in TypeScript, and not too slow. It’s fine for me, and SINCE I’m not a CSS writer, I can just reference its components, and if I ever feel that its components are not enough, I can build new components based on it to meet my own needs.

  1. Slidev, a presentation tool for developers.

The technology stack he used fits what I need right now:

It will eventually become a reference point for my code, and I will learn its structure and development thinking.

Therefore, the following reconstruction of this project is Naive UI. If CSS is really needed, I can also use Windi CSS

First refactoring point

Use FullCalendar Vue 3 instead.

Change 5.6.0 to 5.7.2:

"@fullCalendar /core": "^5.7.2", "@fullcalendar/daygrid": "^5.7.2", "@fullcalendar/interaction": "^ 5.7.2," "@ fullcalendar/timegrid" : "^ 5.7.2", "@ fullcalendar/vue3" : "^ 5.7.2",Copy the code

We also need to update the Vite plugin:

Ok, we have modified the code to introduce:

import FullCalendar, { CalendarOptions, EventApi, DateSelectArg, EventClickArg } from '@fullcalendar/vue3'
Copy the code

Leaving everything else unchanged, I’ll look at the run to see what happens:

Calendar can be displayed, but when we click “show lunar calendar”, the prompt error, trace code found that the attribute is wrong:

Ok, there is basically no problem with the configuration. Tomorrow, I will adjust the Events according to the error reported in the request.

summary

Today is the end of the first half of the month, and the beginning of the second half of the month, from 0-0.5, and then from 0.5 to 1, welcome to continue your attention, to be continued!

The code has been synced to Github: github.com/fanly/fanly…