diff --git a/src/pages/calendar/index.vue b/src/pages/calendar/index.vue index 6445592..de5d778 100644 --- a/src/pages/calendar/index.vue +++ b/src/pages/calendar/index.vue @@ -61,6 +61,7 @@ import listPlugin from '@fullcalendar/list' import interactionPlugin from '@fullcalendar/interaction' import dayjs from 'dayjs' import { getAccountCalendarInfo } from '@/api/invest/accountAnalysis.js' +import calendar from '@/utils/calendar.js' export default { name: 'PlanManagement', components: {}, @@ -131,6 +132,28 @@ export default { eventContent: function () { return { html: '' }; }, + dayCellContent: function(arg) { + const dateNum = arg.dayNumberText.replace('日', '') + try { + const lunar = calendar.solar2lunar(arg.date.getFullYear(), arg.date.getMonth() + 1, arg.date.getDate()) + if (!lunar || !lunar.IDayCn) { + return { + html: `
${dateNum}
` + } + } + const lunarText = lunar.IDayCn === '初一' ? lunar.IMonthCn : lunar.IDayCn + return { + html: `
+
${dateNum}
+
${lunarText}
+
` + } + } catch (e) { + return { + html: `
${dateNum}
` + } + } + }, moreLinkClick: function() { return false; }, @@ -605,6 +628,7 @@ page { cursor: pointer; display: flex; flex-direction: column; + align-items: center; justify-content: center; } @@ -623,11 +647,53 @@ page { :deep(.fc-daygrid-day-number) { padding: 2rpx; - font-size: 20rpx; - font-weight: 500; + font-size: 26rpx; + font-weight: 600; color: #333; } +:deep(.date-cell) { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + padding: 0; + height: 100%; +} + +:deep(.solar-date) { + font-size: 24rpx; + font-weight: 600; + color: #333; + line-height: 1; +} + +:deep(.lunar-date) { + font-size: 18rpx; + color: #999; + line-height: 1; + margin-top: 2rpx; + transform: scale(0.9); +} + +:deep(.fc-day-today .solar-date) { + color: #667eea; +} + +:deep(.fc-day-today .lunar-date) { + color: #667eea; + opacity: 0.8; +} + +:deep(.fc-day-other .solar-date) { + color: #adb5bd !important; +} + +:deep(.fc-day-other .lunar-date) { + color: #ced4da !important; +} + :deep(.fc-daygrid-day-top) { flex-direction: row; margin-bottom: 2rpx; diff --git a/src/utils/calendar.js b/src/utils/calendar.js new file mode 100644 index 0000000..ead8028 --- /dev/null +++ b/src/utils/calendar.js @@ -0,0 +1,230 @@ +/** + * 农历转换工具 + * 公历转农历 + */ + +const calendar = { + /** + * 农历1900-2100的润大小信息表 + * @Array Of Property + * @return Hex + */ + lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909 + 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919 + 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929 + 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939 + 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949 + 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959 + 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969 + 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979 + 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989 + 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999 + 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009 + 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019 + 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029 + 0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039 + 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049 + 0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059 + 0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069 + 0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079 + 0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089 + 0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099 + 0x0d520], // 2100 + + /** + * 天干地支之天干速查表 + */ + Gan: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'], + + /** + * 天干地支之地支速查表 + */ + Zhi: ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'], + + /** + * 生肖速查表 + */ + Animals: ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'], + + /** + * 农历日期名称 + */ + nStr1: ['日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'], + nStr2: ['初', '十', '廿', '卅'], + + /** + * 农历月份名称 + */ + monthName: ['正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'], + + /** + * 返回农历y年的总天数 + */ + lYearDays: function (y) { + let i + let sum = 348 + for (i = 0x8000; i > 0x8; i >>= 1) sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 + return (sum + this.leapDays(y)) + }, + + /** + * 返回农历y年闰月的天数 + */ + leapDays: function (y) { + if (this.leapMonth(y)) return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29) + else return (0) + }, + + /** + * 返回农历y年闰哪个月 1-12 , 没闰返回 0 + */ + leapMonth: function (y) { + return (this.lunarInfo[y - 1900] & 0xf) + }, + + /** + * 返回农历y年m月的总天数 + */ + monthDays: function (y, m) { + return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29) + }, + + /** + * 传入offset偏移量返回干支 + */ + cyclical: function (num) { + return (this.Gan[num % 10] + this.Zhi[num % 12]) + }, + + /** + * 传入农历数字月份返回汉语通俗表示法 + */ + toChinaMonth: function (m) { + if (m > 12 || m < 1) return -1 + return this.monthName[m - 1] + }, + + /** + * 传入农历日期数字返回汉字表示法 + */ + toChinaDay: function (d) { + let s + switch (d) { + case 10: + s = '初十' + break + case 20: + s = '二十' + break + case 30: + s = '三十' + break + default: + s = this.nStr2[Math.floor(d / 10)] + s += this.nStr1[d % 10] + } + return (s) + }, + + /** + * 公历转农历 + */ + solar2lunar: function (y, m, d) { + // 参数区间1900.1.31~2100.12.31 + if (y < 1900 || y > 2100) return { IDayCn: '', IMonthCn: '' } + if (y === 1900 && m === 1 && d < 31) return { IDayCn: '', IMonthCn: '' } + + let objDate + if (typeof y === 'object' && y instanceof Date) { + objDate = y + } else { + objDate = new Date(y, parseInt(m) - 1, d) + } + + let i + let leap = 0 + let temp = 0 + const baseDate = new Date(1900, 0, 31) + let offset = (objDate - baseDate) / 86400000 + + let dayCyl = offset + 40 + let monCyl = 14 + + let year, yearCyl, month, day, isLeap = false + + for (i = 1900; i < 2101 && offset > 0; i++) { + temp = this.lYearDays(i) + offset -= temp + monCyl += 12 + } + + if (offset < 0) { + offset += temp + i-- + monCyl -= 12 + } + + year = i + yearCyl = i - 1864 + + leap = this.leapMonth(i) + isLeap = false + + for (i = 1; i < 13 && offset > 0; i++) { + if (leap > 0 && i === (leap + 1) && isLeap === false) { + --i + isLeap = true + temp = this.leapDays(year) + } else { + temp = this.monthDays(year, i) + } + + if (isLeap === true && i === (leap + 1)) isLeap = false + + offset -= temp + if (isLeap === false) monCyl++ + } + + if (offset === 0 && leap > 0 && i === leap + 1) { + if (isLeap) { + isLeap = false + } else { + isLeap = true + --i + --monCyl + } + } + + if (offset < 0) { + offset += temp + --i + --monCyl + } + + month = i + day = Math.round(offset + 1) + + const gzY = this.cyclical(year - 1900 + 36) + const animal = this.Animals[(year - 4) % 12] + + return { + lYear: year, + lMonth: month, + lDay: day, + Animal: animal, + IMonthCn: (isLeap ? '闰' : '') + this.toChinaMonth(month), + IDayCn: this.toChinaDay(day), + cYear: y, + cMonth: m, + cDay: d, + gzYear: gzY, + isLeap: isLeap, + nWeek: objDate.getDay(), + ncWeek: '星期' + this.nStr1[objDate.getDay()], + isTerm: false, + Term: null + } + } +} + +export default calendar