--- theme: nico highlight: lioshi --- > 不用任何第三方库，只基于vue2实现一个日历组件，末尾附上我的代码，单文件，代码没有抽取，有点长。哪位大佬批评指正一下，末尾有效果图 - 样式是类似于window10日历 - 支持控制周一还是周日在第一列 - 支持鼠标滑动切换 - 支持单选，拖动鼠标多选，范围选择 - 支持年月日选择切换 - 支持传入选中数据 - 支持隐藏非本月日期 ## QCalendar.scss ```css .Q-calendar-change-enter-active, .Q-calendar-change-leave-active { transition: opacity 0.5s; } .Q-calendar-change-enter, .Q-calendar-change-leave-to { opacity: 0; } .Q-calendar { width: 100%; height: 100%; margin: 0 auto; overflow: hidden; background-color: #ffffff; color: #000; user-select: none; border: 1px solid #4152b3; .Q-calendar-title { height: 50px; width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; div { align-self: center; } .Q-calendar-button, .top { align-self: center; } .Q-calendar-title-box { width: calc((100% / 7) * 2); display: flex; justify-content: space-around; cursor: default; .Q-calendar-title-box-text { width: 50%; text-align: center; align-self: center; } .Q-calendar-title-box-text:hover { color: #4152b3; font-weight: 700; } } .Q-calendar-title-box-padding{ padding-left: 18px; } .Q-calendar-title-box-center{ margin: 0 auto; font-weight: 700 } } .Q-calendar-day { height: calc(100% - 50px); /* 周末 */ .Q-calendar-week { display: flex; justify-content: inherit; cursor: default; p { display: flex; justify-content: center; width: calc(100% / 7); box-sizing: border-box; } } /* 日历内容 */ .Q-calendar-box { display: flex; justify-content: inherit; flex-wrap: wrap; width: 100%; height: 80%; div:hover { color: yellowgreen; font-weight: 700; } .Q-calendar-current-month { box-sizing: border-box; cursor: default; } .Q-calendar-current-month:hover { color: #4152b3; font-weight: 700; font-size: 20px; } div { display: flex; justify-content: center; width: calc(100% / 7); height: calc(100% / 7); span { margin: auto; } } p { display: flex; justify-content: center; width: calc(100% / 7); } } } .Q-calendar-years { height: calc(100% - 50px); .Q-calendar-years-box { // border: 1px solid pink; display: flex; justify-content: inherit; flex-wrap: wrap; height: 98%; div { display: flex; box-sizing: border-box; justify-content: center; width: calc(100% / 4); height: calc(100% / 4); span { margin: auto; } } div:hover { font-weight: 700; color: yellowgreen; } } } } /* //非本月时间内，或非本年内 */ .Q-calendar-surplus { color: #898989; } .nowCss { // border:1px solid pink; background: #f1f3f4; color: #40b8ff; } .Q-calendar-checked { span { color: var(--Q-calendar-color); background-color: var(--Q-calendar-background-color); border-radius: 10px; width: 50%; height: 50%; text-align: center; line-height: 24px; } } ``` ## getRangeDay.js ```js import { parseTime } from './formatTime' export function getRangeDay(startDate, endDate) { const result = []; const db = new Date(); db.setUTCFullYear(startDate.year, startDate.month - 1, startDate.day); const de = new Date(); de.setUTCFullYear(endDate.year, endDate.month - 1, endDate.day); let smallDate let bigDate if (db.getTime() > de.getTime()) { smallDate = de.getTime() bigDate = db.getTime() } else { smallDate = db.getTime() bigDate = de.getTime() } for (let k = smallDate; k <= bigDate;) { result.push({ year: parseTime(k, "{y}"), month: parseTime(k, "{m}").length===1?('0'+parseTime(k, "{m}")):parseTime(k, "{m}"), day: parseTime(k, "{d}").length===1?('0'+parseTime(k, "{d}")):parseTime(k, "{d}"), checked: true }); k = k + 24 * 60 * 60 * 1000; } return result; } ``` ## formatTime.js ```js export function parseTime(time, pattern) { if (arguments.length === 0 || !time) return null; const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'; let date; if (typeof time === 'object') { date = time; } else { if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { time = parseInt(time); } else if (typeof time === 'string') { time = time.replace(new RegExp(/-/gm), '/'); } if ((typeof time === 'number') && (time.toString().length === 10)) { time = time * 1000; } date = new Date(time); } const formatObj = { y: date.getFullYear(), m: date.getMonth() + 1, d: date.getDate(), h: date.getHours(), i: date.getMinutes(), s: date.getSeconds(), a: date.getDay(), }; return format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { // @ts-ignore let value = formatObj[key]; // Note: getDay() returns 0 on Sundayday if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value]; } if (result.length > 0 && value < 10) { value = '0' + value; } return value || 0; }); } ``` ## QCalendar.vue ```js ``` ## 日历组件效果图 > 2022-12-27日补充 ### 日 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/230e4c1d127d4442b96617ab0761a463~tplv-k3u1fbpfcp-watermark.image?) ### 月 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f30343c5e90e4e148188bdda9921152d~tplv-k3u1fbpfcp-watermark.image?) ### 年 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c38be3107514662b5ec0afc11e0ebee~tplv-k3u1fbpfcp-watermark.image?) ## tips **支持滑动切换年月日，具体功能请移步组件文档** ## 20230424更新了农历 [链接](https://juejin.cn/post/7225490584059674682/)