|
|
@@ -0,0 +1,109 @@
|
|
|
+import { View, Text } from "@tarojs/components";
|
|
|
+import './calendar.scss'
|
|
|
+import dayjs from "dayjs";
|
|
|
+import { useEffect, useState } from "react";
|
|
|
+import { rpxToPx } from "@/utils/tools";
|
|
|
+
|
|
|
+export default function Calendar(props: { year: number, month: number }) {
|
|
|
+ const weeks = ['日', '一', '二', '三', '四', '五', '六']
|
|
|
+ const indexBeginWeek = 0;
|
|
|
+ const [spaces, setSpaces] = useState<any>([])
|
|
|
+ const [days, setDays] = useState<any>([])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ loadData()
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ function loadData() {
|
|
|
+ const firstDay = new Date(props.year, props.month - 1, 1);
|
|
|
+ const firstDayOfWeek = firstDay.getDay();
|
|
|
+ const spaceCount = firstDayOfWeek > indexBeginWeek ? firstDayOfWeek - indexBeginWeek : firstDayOfWeek - indexBeginWeek + 7
|
|
|
+ setSpaces(new Array(spaceCount).fill(''))
|
|
|
+
|
|
|
+
|
|
|
+ // 创建一个 Date 对象来获取该月的最后一天
|
|
|
+ const lastDay = new Date(props.year, props.month, 0); // 0 表示上一个月的最后一天
|
|
|
+ const totalDays = lastDay.getDate();
|
|
|
+ var list: any = []
|
|
|
+ for (var i = 1; i <= totalDays; i++) {
|
|
|
+ var obj: any = {
|
|
|
+ day: i
|
|
|
+ }
|
|
|
+ if (i == 1 || i == 10 || i == 15) {
|
|
|
+ obj.begin = true
|
|
|
+ }
|
|
|
+ if (i == 2 || i == 11 || i == 16) {
|
|
|
+ obj.right = true
|
|
|
+ }
|
|
|
+
|
|
|
+ if (i == 22) {
|
|
|
+ obj.full = true
|
|
|
+ }
|
|
|
+
|
|
|
+ list.push(obj)
|
|
|
+ }
|
|
|
+ setDays(list)
|
|
|
+ }
|
|
|
+
|
|
|
+ function itemClass(item) {
|
|
|
+ if (item.begin) {
|
|
|
+ return 'left_calendar_item'
|
|
|
+ }
|
|
|
+ if (item.center) {
|
|
|
+ return 'center_calendar_item'
|
|
|
+ }
|
|
|
+ if (item.right) {
|
|
|
+ return 'right_calendar_item'
|
|
|
+ }
|
|
|
+ if (item.full) {
|
|
|
+ return 'full_calendar_item'
|
|
|
+ }
|
|
|
+ return 'calendar_item'
|
|
|
+ }
|
|
|
+
|
|
|
+ function itemTextClass(item) {
|
|
|
+ if (item.begin) {
|
|
|
+ return 'left_day'
|
|
|
+ }
|
|
|
+ if (item.center) {
|
|
|
+ return 'center_day'
|
|
|
+ }
|
|
|
+ if (item.right) {
|
|
|
+ return 'right_day'
|
|
|
+ }
|
|
|
+ if (item.full) {
|
|
|
+ return 'full_day'
|
|
|
+ }
|
|
|
+ return 'normal_day'
|
|
|
+ }
|
|
|
+
|
|
|
+ return <View className="calendar_main">
|
|
|
+ <View className="calendar_header">{dayjs().format('YYYY年M月')}</View>
|
|
|
+ <View className="calendar_body">
|
|
|
+ <View className="calendar_weekly">
|
|
|
+ {
|
|
|
+ weeks.map((item, index) => {
|
|
|
+ return <View className="week_item" key={index}>{item}</View>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ <View className="calendar_main">
|
|
|
+ {
|
|
|
+ spaces.map((item, i) => {
|
|
|
+ return <View className="calendar_item" style={{ width: rpxToPx(750) / 7 }} key={i * 10} />
|
|
|
+ })
|
|
|
+ }
|
|
|
+ {
|
|
|
+ days.map((item, index) => {
|
|
|
+ return <View className={itemClass(item)} style={{ width: rpxToPx(750) / 7 }} key={index}>
|
|
|
+ <Text className={itemTextClass(item)}>{item.day}</Text>
|
|
|
+ </View>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className="calendar_footer">
|
|
|
+
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+}
|
Leon