This is the sixth day of my participation in Gwen Challenge

Today is Sunday, I have to let myself sleep in, so that I can write code at night, and I also think that I need to update the article and make a note.

Write a simple “almanac” function today.

The data source

In our previous post on lunar +Vue3 calendar development for MAC (4), we introduced lunar getting, mainly using lunar typescript, and today we are developing the lunar calendar feature from which most of the data comes:

The main functions are:

GetDateViewDate () {const nongliString = ` lunar ${this. Lunar. GetMonthInChinese ()} month ${this. Lunar. GetDayInChinese ()} `; Const ganzhi = [` ${this. Lunar. GetYearInGanZhi ()} ${this. Lunar. GetYearShengXiao ()} years `, ` ${this. Lunar. GetMonthInGanZhi ()}, ` ` ${this. Lunar. GetDayInGanZhi ()} day `]; const yangliString = this.solar.toFullString(); const yi = this.lunar.getDayYi(); const ji = this.lunar.getDayJi(); return { nongliString: nongliString, ganzhi: ganzhi, yangliString: yangliString, yi: yi, ji: ji, }; }Copy the code

Among them, the use of the lunar calendar year, month, day, solar calendar full display (time, week and constellation), there is the “appropriate” and “avoid” we care about every day, to see what is suitable for every day and the best not to do.

Again, the code is placed under LunarService.

According to the layout

The layout here mainly uses The PrimeVue Grid layout, and the interface is relatively simple:

<template> <Sidebar class="p-grid nested-grid" v-model:visible="sidebarVisible" :base-z-index="1000" position="full" @click="$emit('update:visibleFullDateView', SidebarVisible)" > <h1> almanac </h1> <div class="p-grid P-ai-center vertic-container nested-grid border"> <div class="p-col-2"> <div class="nongliString"> {{ lunarData.nongliString }} </div> </div> <div class="p-col-1"> <div class="p-col-12 onecn" v-for="item in lunarData.ganzhi" :key="item"> {{ item }} </div> </div> <div class="p-col-9"> <div  class="p-col-12"> <div class="p-text-bold p-text-center"> {{ lunarData.yangliString }} </div> </div> <div Class ="p-col-12"> <Tag class=" p-MR-2 "icon=" PI pi-check" severity="success" value=" appropriate "></Tag> <Tag severity="success" :value="item" rounded v-for="item in lunarData.yi" :key="item"></Tag> </div> <div class="p-col-12"> <Tag class="p-mr-2" "></Tag> <Tag severity="danger" :value="item" rounded V -for="item in lunarData.ji" :key="item"></Tag> </div> </div> </div> </Sidebar> </template>Copy the code

Just to be clear,

  1. In the display of “appropriate” and “avoid”, the Tag component is used, which is more intuitive.

  1. In this almanac layout, directly use Sidebar, full screen display.

  1. Finally, I added CSS (as long as the font size is larger than the width) just to make the lunar and ganzhi display vertically:
.nongliString { display: flex; /* align-items: center; margin: 0 auto; Width: 2.5 rem; The font - size: 2.5 em. color: #000; } .onecn { display: flex; /* align-items: center; The font - size: 1.4 em. }Copy the code

Control switch

On the main screen, listen for each date component Click event, in the FullcalendarSub component:

$emit('dateClick', target.date); // config: dateClick: this.dateclick, // methods: dateClick(target: any) {this.$emit('dateClick', target.date); },Copy the code

Also in the FullCalendarMain component:

// template <fullcalendar-sub v-model:changeShowFestivals="changeShowFestivals" v-model:changeShowWeather="changeShowWeather" v-model:weather="weather" v-model:location="location" @settingClick="visibleFullSetting = true" @dateclick ="dateClick" /> // Yellow Pages component layout <date-view-sub V - model: visibleFullDateView = "visibleFullDateView" v - model: the date = "date" / > / / the methods, to click the View in the date value, / / assignment, DateClick (date: string) {this.date = new date (date); this.visibleFullDateView = true; },Copy the code

The following information is displayed:

summary

Due to the lack of time, I did not include the weather forecast and holiday information, as well as the page layout and style adjustment (the code has been synchronized to github.com/fanly/fanly… , welcome to see), waiting for the next step to continue to optimize.

To be continued!