{
- return () =>
大
+ const store = useCalendarStore()
+ return () => (
+
+
+
+ {dayjs().format('MM')}月
+
+
+
+
{dayjs().format('DD')}
+
+ {dayjs().format('ddd')}
+
+ {Lunar.fromDate(dayjs().toDate()).getMonthInChinese()}月
+ {Lunar.fromDate(dayjs().toDate()).getDayInChinese()}
+
+
+
+
+
+
+ 宜
+
+
+ {Lunar.fromDate(dayjs().toDate())
+ .getDayYi()
+ .filter((_, index) => index < 1)
+ .map((item) => (
+ {item}
+ ))}
+
+
+
+
+ 忌
+
+
+ {Lunar.fromDate(dayjs().toDate())
+ .getDayJi()
+ .filter((_, index) => index < 1)
+ .map((item) => (
+ {item}
+ ))}
+
+
+
+
+
+
+
+
+ {dayList.map((item) => (
+ {item}
+ ))}
+
+
+
+ {store.dayList
+ .filter(
+ (_, index) =>
+ index <
+ (store.dayList.reduce((acc, cur) => (cur!.type !== 1 ? acc + 1 : acc), 0) > 35
+ ? 42
+ : 35)
+ )
+ .map((el, key) => (
+
+ {el.label}
+
+ ))}
+
+
+
+
+ )
})
diff --git a/src/widgets/calendar/Middle.tsx b/src/widgets/calendar/Middle.tsx
index f150db2..8669813 100644
--- a/src/widgets/calendar/Middle.tsx
+++ b/src/widgets/calendar/Middle.tsx
@@ -1,5 +1,72 @@
import { defineComponent } from 'vue'
-
+import dayjs from 'dayjs'
+import { Lunar } from 'lunar-typescript'
export default defineComponent(() => {
- return () =>
中
+ return () => (
+
+
+
+ {dayjs().format('MM')}月
+
+
+
+
{dayjs().format('DD')}
+
+ {dayjs().format('ddd')}
+
+ {Lunar.fromDate(dayjs().toDate()).getMonthInChinese()}月
+ {Lunar.fromDate(dayjs().toDate()).getDayInChinese()}
+
+
+
+
+
+
+ 宜
+
+
+ {Lunar.fromDate(dayjs().toDate())
+ .getDayYi()
+ .filter((_, index) => index < 1)
+ .map((item) => (
+ {item}
+ ))}
+
+
+
+
+ 忌
+
+
+ {Lunar.fromDate(dayjs().toDate())
+ .getDayJi()
+ .filter((_, index) => index < 1)
+ .map((item) => (
+ {item}
+ ))}
+
+
+
+
+
+
+
+ )
})
diff --git a/src/widgets/calendar/Modal.tsx b/src/widgets/calendar/Modal.tsx
index 44d8761..b98b4ee 100644
--- a/src/widgets/calendar/Modal.tsx
+++ b/src/widgets/calendar/Modal.tsx
@@ -1,5 +1,175 @@
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { useCalendarStore } from './useCalendarStore'
+import dayjs from 'dayjs'
+import { Lunar, Solar } from 'lunar-typescript'
+import { DatePicker } from 'ant-design-vue'
+import { FaChevronLeft } from 'oh-vue-icons/icons'
+import { addIcons, OhVueIcon } from 'oh-vue-icons'
+import clsx from 'clsx'
+addIcons(FaChevronLeft)
+export const dayList = ['一', '二', '三', '四', '五', '六', '日']
export default defineComponent(() => {
- return () =>
日历弹框
+ const store = useCalendarStore()
+ const lunar = computed(() => Lunar.fromDate(store.state.select.toDate()))
+ const solar = computed(() => Solar.fromDate(store.state.select.toDate()))
+ return () => (
+
+
+
+ {store.state.select.format('MM')}月
+
+
+
+
{store.state.select.format('D')}
+
{store.state.select.format('ddd')}
+
+ 本年第{store.state.select.diff(store.state.select.set('date', 1).set('months', 0), 'weeks')}周，第
+ {store.state.select.diff(store.state.select.set('date', 1).set('month', 0), 'day')}天
+
+
+
+
+
+ 星座
+
+
{solar.value.getXingZuo()}座
+
+
+
+ 宜
+
+
+ {lunar.value.getDayYi().map((item: any) => {
+ return
{item}，
+ })}
+
+
+
+
+ 忌
+
+
+ {lunar.value.getDayJi().map((item: any) => {
+ return
{item}，
+ })}
+
+
+
+
+
+
+
+
+
{
+ store.state.select = store.state.select.subtract(1, 'month')
+ }}
+ >
+
+
+
+ {
+ store.state.select = store.state.select.set('M', dayjs(e).get('M'))
+ }}
+ />
+ {store.state.select.format('YYYY')}
+
+
+ {
+ store.state.select = store.state.select.set('M', dayjs(e).get('M'))
+ }}
+ />
+ {store.state.select.format('MM')}
+
+
{
+ store.state.select = store.state.select.add(1, 'month')
+ }}
+ >
+
+
+
+
+
+ {dayList.map((item) => {
+ return (
+
+ {item}
+
+ )
+ })}
+ {store.dayList
+ .filter(
+ (_, index) =>
+ index <
+ (store.dayList.reduce((acc, cur) => (cur!.type !== 1 ? acc + 1 : acc), 0) > 35
+ ? 42
+ : 35)
+ )
+
+ .map((el, key) => (
+
{
+ store.state.select = el.day
+ }}
+ class={clsx(
+ 'flex justify-center items-center flex-col rounded-lg border-[1px] cursor-pointer',
+ {
+ ' opacity-40': el.type === 1 || el.type === -1,
+ 'border-[#76d7f2] border-solid border-[1px] bg-[#F5FDFF]': el.day.isSame(
+ dayjs(),
+ 'day'
+ ),
+ 'border-transparent border-solid': !el.day.isSame(dayjs(), 'day') && !el.day.isSame(store.state.select, 'day'),
+ 'border-[#76d7f2] border-solid border-[1px]': !el.day.isSame(dayjs(), 'day') && el.day.isSame(store.state.select, 'day'),
+ }
+ )}
+ >
+ {el.label}
+ {el.lunar.getDayInChinese()}
+
+ ))}
+
+
+
+
+ )
})
diff --git a/src/widgets/calendar/Small.tsx b/src/widgets/calendar/Small.tsx
index d3571d2..3225e36 100644
--- a/src/widgets/calendar/Small.tsx
+++ b/src/widgets/calendar/Small.tsx
@@ -23,13 +23,17 @@ export default defineComponent(() => {
{dayjs().format('DD')}