效果
之前有一篇文章根据v-calendar来写日历,但是只显示了阳历日期,后面需求增加,还要加上农历
首先看看效果,节假日标红了
主要过程:
在v-calendar的基础上使用自定义插槽,自定义内容,再使用lunar-calendar三方库进行计算
v-calendar的插槽
下载 lunar-calendar
npm i lunar-calendar
使用,组件内使用
import LunarCalendar from 'lunar-calendar';
body部分代码,是将显示农历的span标签定位到日历上
<vc-calendar
:columns="3"
:multiple="true"
@dayclick="handleSelect" // 自定义插槽之后这个点击事件就失效了
expanded
:attributes="attrs"
class="calendar"
>
<template #day-content="{ day }">
<div style="position: relative" @click="handleSelect(day)">
<span
tabindex="-1"
:aria-label="day.ariaLabel"
:aria-disabled="day.isDisabled"
role="button"
class="vc-day-content vc-focusable"
>{{ day.day }}</span // 是一个对象
>
<span
id="lunarDate"
:data-content="getLunarDate(day.id)"
style="
color: darkgray;
font-size: 12px;
position: absolute;
bottom: -10px;
text-align: left;
left: 0;
transform: scale(0.8);
"
>{{ getLunarDate(day.id) }}</span // 传递的是2024-1-29这样的格式
>
</div>
</template>
</vc-calendar>
js部分
就是把 getLunarDate(day.id)实现出来,调用LunarCalendar.solarToLunar函数自动计算,最后只需要判断返回节日还是农历日期
const getLunarDate = (solarDate) => {
const dateArray = solarDate.split('-');
const year = parseInt(dateArray[0]);
const month = parseInt(dateArray[1]);
const day = parseInt(dateArray[2]); // 切割成单独的
const lunarDate = LunarCalendar.solarToLunar(year, month, day);
// lunarDate打印出来是一串对象
return lunarDate.solarFestival // 用的是三目运算进行判断
? lunarDate.solarFestival.charAt( // 如果存在lunarDate.solarFestival判断最后一个字符
lunarDate.solarFestival.split('').length - 1 //是不是‘节’结尾,因为有很多其它很长的
) == '节' //返回结果,不是我们需要的
? lunarDate.solarFestival.split(' ')[0]
: lunarDate.lunarDayName
: lunarDate.lunarFestival
? lunarDate.lunarFestival.charAt(
lunarDate.lunarFestival.split('').length - 1
) == '节'
? lunarDate.lunarFestival.split(' ')[0]
: lunarDate.lunarDayName
: lunarDate.lunarDayName; // 返回农历对象
};
注意
注意最后一个问题就是节假日标红,我使用的css样式来控制,用的是Less语言
在body中我给span加了一个data-content,代码截图
css样式
/* 包含“节”的样式 */
span[data-content$='节'] {
color: red !important;
}