阅读 645

Electron+Vue3 MAC 版日历 开发记录(4)——农历功能

这是我参与更文挑战的第4天,活动详情查看: 更文挑战

农历功能

今天进入开发的第一个功能:「农历」,由于 MAC 自带的日历没有农历功能,在国内我们很多节日和亲朋好友的生日都是按农历来算得。所以农历功能是我自学开发日历的第一个出发点。

开始开发之前,必然还是需要全网搜一搜有没有可使用的第三方插件,果不其然 lunar-typescript 进入我的视线。

lunar-typescript

目前来说提供农历功能的第三方 TypeScript 插件中 lunar 是个人觉得写的最好的。

功能封装的很好,基本涵盖了我所需要的功能:

lunar 是一款无第三方依赖的公历(阳历)和农历(阴历、老黄历)工具,支持星座、儒略日、干支、生肖、节气、节日、彭祖百忌、每日宜忌、吉神宜趋、凶煞宜忌、吉神(喜神/福神/财神/阳贵神/阴贵神)方位、胎神方位、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道黑道日及吉凶等。

具体可查看官方文档

使用方法也很简单:

// 安装
yarn add 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 星期四 双子座
一九八六年四月廿一 丙寅(虎)年 癸巳(蛇)月 癸酉(鸡)日 子(鼠)时 纳音[炉中火 长流水 剑锋金 桑柘木] 星期四 北方玄武 星宿[斗木獬](吉) 彭祖百忌[癸不词讼理弱敌强 酉不会客醉坐颠狂] 喜神方位[巽](东南) 阳贵神方位[巽](东南) 阴贵神方位[震](正东) 福神方位[兑](正西) 财神方位[离](正南) 冲[(丁卯)兔] 煞[东]
复制代码

为我所用

在本文中,主要把 lunar-typescript 封装成一个 Service 类: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);
  }

  /**
   * 包括:法定节日、农历等
   * @returns 显示在界面上所有和节日有关的
   */
  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(' ');
      }
    }

    return this.lunar.getJieQi() ||
    `${this.lunar.getMonthInChinese()}月${this.lunar.getDayInChinese()}`;
  }
}
复制代码

代码很简单,就是根据输入不同的日期,显示出农历,如果需要显示节假日,则可以优先显示。

插入界面

正如 Electron+Vue3 MAC 版日历开发记录(3)——PrimeVue末尾留下的小尾巴,如何在日历使用 dayGridPlugin 直接使用 Month View

回到 FullcalendarSub.vue 组件中:

// 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);
      },
    },
  };
},
复制代码

这里我把 view 也封装成 CalendarViewService

const lunarService = new LunarService(date);
const dayTextInChinese = lunarService.inDayCellContent(changeShowFestivals);

// 借助 FullCalendar 提供的 item 返回的每一格元素 Object

return {
    html: `<div class="fc-daygrid-day-number">${dayNumberText}</div>
        <div class="fc-daygrid-day-chinese">${dayTextInChinese}</div>`,
  };
复制代码

其中这里的 item Object 如下:

小结

效果图在开始的文章中有所体现,这里就不放出来了,具体代码也放在 Github 上 fanly/fanlymenu,欢迎查看!

最后感谢自己能坚持到第四天,也欢迎大家看看前三天的记录,对本项目有个初步的了解:

Electron+Vue3 MAC 版日历开发记录(1) Electron+Vue3 MAC 版日历开发记录(2)——功能清单 Electron+Vue3 MAC 版日历开发记录(3)——PrimeVue

文章分类
前端
文章标签