This is the fourth day of my participation in Gwen Challenge

According to the lunar calendar function

Today entered the development of the first function: “lunar calendar”, because the MAC calendar has no lunar function, in China, many of our holidays and birthdays of relatives and friends are calculated according to the lunar calendar. So the lunar calendar function is the first starting point of my self-study development calendar.

Before I started developing, I still had to search the web for third-party plugins to work with, and lunar typescript caught my eye.

lunar-typescript

Lunar is by far the best written third-party TypeScript plugin for lunar functionality.

Function encapsulation is good, basically covering the functions I need:

Lunar is a tool that relies on neither the Gregorian calendar nor the lunar calendar. Support, Julian day, power, zodiac constellation, solar terms, festival, pengzu best avoid, avoid daily appropriate, god should avoid, demon, appropriate, auspicious god (or god/god of fortune, the god of wealth/YangGui god/Yin expensive) bearing, bearing, rush evil spirit god, sound, and the stars, eight, five, ten, god built twelve on duty, tsing lung tricks such as twelve gods, the crime of the zodiac, and the good or ill luck, etc.

Please check the official document for details

It’s easy to use:

Import {Solar} from 'lunar-typescript'; import {Solar} from 'lunar-typescript'; const solar = Solar.fromYmd(1986, 5, 29); console.log(solar.toFullString()); console.log(solar.getLunar().toFullString()); 1986-05-29 00:00:00 Thursday Gemini, April 21, 1986, year Guizi, month Guizyou, day son nayin, Thursday Northern Basalwu star [dumu (missel)](Ji) Peng Zu baiji [decyl not word reasonweak enemy strong uninvited guests drunk sitting crazy] Xi God azimuth [xun](southeast) Yang GUI God azimuth [xun](southeast) Yin GUI God azimuth [earthquake](east) Blessing God azimuth [against](west) god of wealth azimuth [from](south) chong [(ding MAO) rabbit] evil spirit [east]Copy the code

Our advantage

In this article, lunar-typescript is mainly encapsulated as a Service class: LunarService

import { Solar, Lunar } from 'lunar-typescript'; /** * export default class LunarService {lunar: lunar; solar: Solar; constructor(date: Date = new Date()) { this.lunar = Lunar.fromDate(date); this.solar = Solar.fromDate(date); } /** * includes: official festivals, lunar calendar, etc. * @returns to display all related festivals */ inDayCellContent(changeShowFestivals: Boolean): string { if (changeShowFestivals) { const solarFestivals = this.solar.getFestivals(); if (solarFestivals.length > 0) { return solarFestivals.join(' '); } const lunarFestivals = this.lunar.getFestivals(); if (lunarFestivals.length > 0) { return lunarFestivals.join(' '); }} to return this. The lunar. GetJieQi () | | ` ${this. Lunar. GetMonthInChinese ()} month ${this. Lunar. GetDayInChinese ()} `; }}Copy the code

The code is very simple, is according to the input of different dates, display the lunar calendar, if you need to display holidays, you can preferentially display.

Insert the interface

Just as in the Electron+Vue3 Calendar development Note for MAC (3) — the little tail left at the end of PrimeVue, how to use the Month View directly in the calendar using the dayGridPlugin.

Back to the Fullcalendarsub.vue component:

// config views: this.dayCellNewContent(), ... dayCellNewContent() { const that = this; return { dayGridMonth: { titleFormat: { year: 'numeric', month: '2-digit'}, dayCellContent(item: any) { const date = new Date(item.date); const calendarViewService = new CalendarViewService(); return calendarViewService.showView(item.dayNumberText, date, that.changeShowFestivals, that.changeShowWeather, that.weather); ,}}}; },Copy the code

Here I also encapsulate view as CalendarViewService:

const lunarService = new LunarService(date); const dayTextInChinese = lunarService.inDayCellContent(changeShowFestivals); // Each element returned by the item provided by FullCalendar Object return {HTML: `<div class="fc-daygrid-day-number">${dayNumberText}</div> <div class="fc-daygrid-day-chinese">${dayTextInChinese}</div>`, };Copy the code

The item Object here is as follows:

summary

Renderings in the beginning of the article has been reflected, here will not be put out, the specific code is also on Github fanly/ Fanlymenu, welcome to check!

Finally, I would like to thank myself for sticking to the fourth day, and welcome everyone to have a preliminary understanding of this project by looking at the records of the first three days:

Vacuum +Vue3 Calendar Development Record for MAC (1) Vacuum +Vue3 Calendar development Record for MAC (2) – Function List Vacuum +Vue3 Calendar development Record for MAC (3) – PrimeVue