• vue可ctrl、shift多选，可添加标记的日历组件

    需要写一个日历组件有以下功能，element无法满足，自己造一个

    • 只显示当前月日期,前后月日期不显示也不可选择;
    • 周六、周日颜色与工作日区分
    • 日期可以打标记（左上角标记）
    • 可ctrl+shift+鼠标左键多选

    目录

    一、 按照 "日", "一", "二", "三", "四", "五", "六" 把一个月的日期排列

    二、单元格样式处理

    三、单机、按住ctrl点击、按住shift点击事件处理

    1.记录键盘按下ctrl、shift事件

    2.点击事件处理

    3.遵循excel点击的操作方式:

    四、组件代码:

    一、 按照 "日", "一", "二", "三", "四", "五", "六" 把一个月的日期排列

    页面

    1. <template>
    2.     <div class="calendar">
    3.         <div class="calendar_header">{{currentMonth}}月</div>
    4.         <table cellspacing="0" cellpadding="0" class="calendar_table">
    5.             <thead>
    6.                 <th v-for="day in WEEK_DAYS" :key="day" :class="['thead_th',day=='六'||day=='日'?'thead_th_red':'']">
    7.                     {{day}}</th>
    8.             </thead>
    9.             <tbody>
    10.                 <tr v-for="(row,index) in rows" :key="index">
    11.                     <td v-for="(cell,key) in row" :key="key" class="td" @click="handlePickDay(cell)">
    12.                         <div :class="getCellClass(cell,key)">
    13.                             <div v-if="cell.type=='current'" class="triangle" :style="getCelltriangleStyle(cell)"></div>
    14.                             <span class="cell_text">{{cell.text==0?'':cell.text}}</span>
    15.                         </div>
    16.                     </td>
    17.                 </tr>
    18.             </tbody>
    19.         </table>
    20.     </div>
    21. </template>

    组件定义props、emits

    1. const props = defineProps({
    2.     markList: {//标记
    3.         type: Array<any>,
    4.         default: (): any[] => {
    5.             return [];
    6.         },
    7.     },
    8.     month: {
    9.         type: Date,
    10.         required: true,
    11.     },
    12.     disabled: {
    13.         type: Boolean,
    14.         default: false,
    15.     },
    16.     disableBefore: {//禁用今天之前的日期
    17.         type: Boolean,
    18.         default: true,
    19.     },
    20. });
    21. const emits = defineEmits(['change']);

    当前月的日期数组

    1. type CalendarDateCellType = 'next' | 'prev' | 'current'
    2. type CalendarDateCell = {
    3.     text: number,
    4.     type: CalendarDateCellType
    5. }
    6. const WEEK_DAYS = ref(["日", "一", "二", "三", "四", "五", "六"]);
    7. const currentMonth = computed(() => {
    8.     return moment(props.month).format('M');
    9. })
    10. onMounted(() => {
    11.     onKeyEvent();
    12. })
    13.  
    14. const rows = computed(() => {
    15.     let days: CalendarDateCell[] = []
    16.     const firstDay = moment(props.month).startOf("month").date();
    17.     // const endDay = moment(props.month).endOf('month').date();//当前月的最后一天
    18.     const firstDayOfWeek = moment(props.month).startOf("month").day();
    19.     // const daysInMonth = moment(props.month).daysInMonth();//当前月的天数
    20.  
    21.     const prevMonthDays: CalendarDateCell[] = getPrevMonthLastDays(
    22.         firstDay,
    23.         firstDayOfWeek - firstDay
    24.     ).map((day) => ({
    25.         text: 0,//上月补0
    26.         type: 'prev',
    27.     }))
    28.     const currentMonthDays: CalendarDateCell[] = getMonthDays(moment(props.month).daysInMonth()).map(
    29.         (day) => ({
    30.             text: day,
    31.             type: 'current',
    32.         })
    33.     )
    34.     days = [...prevMonthDays, ...currentMonthDays]
    35.     const remaining = 7 - (days.length % 7 || 7)
    36.     const nextMonthDays: CalendarDateCell[] = rangeArr(remaining).map(
    37.         (_, index) => ({
    38.             text: 0,//下月补0
    39.             type: 'next',
    40.         })
    41.     )
    42.     days = days.concat(nextMonthDays)
    43.     // console.log(currentMonth.value, firstDay, endDay, moment(props.month).startOf("month").day());
    44.     return toNestedArr(days)
    45. })

    二、单元格样式处理

    • 禁用
    • 选中
    • 周六、周日红色字体
    1. const getCellClass = (cell: CalendarDateCell, key: number) => {
    2.     let date = getCellDate(cell);
    3.     if (props.disableBefore && date.getTime() < new Date().getTime()) {
    4.         return ['cell', 'cell_disabled'];//禁用
    5.     }
    6.     let classes: string[] = ['cell', 'cell_enabled'];
    7.     if (key == 0 || key == 6) {//周六、周日
    8.         classes.push('cell_red');
    9.     }
    10.     let index = selectList.value.indexOf(moment(date).format('YYYY-MM-DD'));
    11.     if (index != -1) {
    12.         classes.push('cell_active');//选中
    13.     }
    14.     return classes;
    15. }
    • 左上角三角形标记
    1. .triangle {
    2.             position: absolute;
    3.             left: 0;
    4.             top: 0;
    5.             width: 0;
    6.             height: 0;
    7.             // border-top: 30px solid #e6e911;
    8.             border-right: 30px solid transparent;
    9.         }
    1. const getCelltriangleStyle = (cell: CalendarDateCell) => {
    2.     let date = getCellDate(cell);
    3.     let day = props.markList.find(item => item.date == moment(date).format('YYYY-MM-DD'));
    4.     return day ? {
    5.         borderTop: '30px solid #e6e911',
    6.     } : {};
    7. }

    三、单机、按住ctrl点击、按住shift点击事件处理

    1.记录键盘按下ctrl、shift事件

    1. const isCtrl = ref(false)
    2. const isShift = ref(false)
    3. const onKeyEvent = () => {
    4.     window.addEventListener('keydown', e => {
    5.         e.preventDefault();//取消默认事件
    6.         let e1 = e || window.event
    7.         switch (e1.keyCode) {
    8.             case 16:
    9.                 isShift.value = true;
    10.                 break;
    11.             case 17:
    12.                 isCtrl.value = true;
    13.                 break;
    14.         }
    15.     })
    16.     window.addEventListener('keyup', e => {
    17.         e.preventDefault();
    18.         let e1 = e || window.event
    19.         switch (e1.keyCode) {
    20.             case 16:
    21.                 isShift.value = false;
    22.                 break;
    23.             case 17:
    24.                 isCtrl.value = false;
    25.                 break;
    26.         }
    27.     })
    28. }

    2.点击事件处理

    1. const selectList = ref<any[]>([]);//已选择的
    2. const shiftNum = ref(0);//shift复制的起始位置
    3. const lastSelect = ref<any[]>([]);//按住shift倒数第二次复制的
    4. //遵循excel点击、ctrl、shift组合操作规范
    5. const handlePickDay = (cell: CalendarDateCell) => {
    6.     let date = getCellDate(cell);
    7.     if (cell.type != 'current') {
    8.         return;
    9.     }
    10.     if (props.disableBefore && date.getTime() < new Date().getTime()) {
    11.         return
    12.     }
    13.     // console.log(isCtrl.value, isShift.value);
    14.     let dateStr = moment(date).format('YYYY-MM-DD');
    15.     let currentSelect: string[] = [];
    16.     //按住ctrl
    17.     if (isCtrl.value) {
    18.         if (selectList.value.includes(dateStr)) {
    19.             selectList.value.splice(selectList.value.indexOf(dateStr), 1);
    20.         } else {
    21.             selectList.value.push(dateStr);
    22.         }
    23.         lastSelect.value = [];
    24.     } else if (isShift.value) {//按住shift
    25.         if (shiftNum.value == 0) {//无上次点击
    26.             shiftNum.value = cell.text;
    27.             if (selectList.value.includes(dateStr)) {
    28.                 selectList.value.splice(selectList.value.indexOf(dateStr), 1);
    29.             } else {
    30.                 selectList.value.push(dateStr);
    31.             }
    32.         } else {
    33.             if (shiftNum.value < cell.text) {
    34.                 currentSelect = getDatesInRange(shiftNum.value, cell.text);
    35.             } else if (shiftNum.value > cell.text) {
    36.                 currentSelect = getDatesInRange(cell.text, shiftNum.value);
    37.             } else {
    38.                 currentSelect = [dateStr];
    39.             }
    40.             selectList.value = selectList.value.filter(item => !lastSelect.value.includes(item));//移除上次按shift复制的
    41.             selectList.value = selectList.value.concat(currentSelect);//添加本次按shift复制的
    42.             lastSelect.value = currentSelect;
    43.         }
    44.     } else {
    45.         selectList.value = [dateStr];
    46.     }
    47.     if (!isShift.value) {
    48.         shiftNum.value = cell.text;
    49.     }
    50.     selectList.value = [...new Set(selectList.value)].sort();//去重、排序
    51.     console.log(shiftNum.value, selectList.value);
    52.     emits('change', selectList.value);
    53. }

    3.遵循excel点击的操作方式:

    • 未按ctrl、shift点击=>只选择当前点击的;
    • 按ctrl点击=>未选中则选中，已选中则取消选中;
    • 按住shift点击=>记录shift按下时点击位置-->再次点击时把期间内的选中,并移除倒数第二次的选中(否则都会选中,并在按下ctrl时释放上次选中)

    四、组件代码:

    1. <template>
    2.     <div class="calendar">
    3.         <div class="calendar_header">{{currentMonth}}月</div>
    4.         <table cellspacing="0" cellpadding="0" class="calendar_table">
    5.             <thead>
    6.                 <th v-for="day in WEEK_DAYS" :key="day" :class="['thead_th',day=='六'||day=='日'?'thead_th_red':'']">
    7.                     {{day}}</th>
    8.             </thead>
    9.             <tbody>
    10.                 <tr v-for="(row,index) in rows" :key="index">
    11.                     <td v-for="(cell,key) in row" :key="key" class="td" @click="handlePickDay(cell)">
    12.                         <div :class="getCellClass(cell,key)">
    13.                             <div v-if="cell.type=='current'" class="triangle" :style="getCelltriangleStyle(cell)"></div>
    14.                             <span class="cell_text">{{cell.text==0?'':cell.text}}</span>
    15.                         </div>
    16.                     </td>
    17.                 </tr>
    18.             </tbody>
    19.         </table>
    20.     </div>
    21. </template>
    22. <script lang="ts" setup>
    23. import { ref, computed, onMounted } from "vue";
    24. import moment from "moment";
    25. const props = defineProps({
    26.     markList: {//标记
    27.         type: Array<any>,
    28.         default: (): any[] => {
    29.             return [];
    30.         },
    31.     },
    32.     month: {
    33.         type: Date,
    34.         required: true,
    35.     },
    36.     disabled: {
    37.         type: Boolean,
    38.         default: false,
    39.     },
    40.     disableBefore: {//禁用今天之前的日期
    41.         type: Boolean,
    42.         default: true,
    43.     },
    44. });
    45. const emits = defineEmits(['change']);
    46.  
    47. type CalendarDateCellType = 'next' | 'prev' | 'current'
    48. type CalendarDateCell = {
    49.     text: number,
    50.     type: CalendarDateCellType
    51. }
    52. const WEEK_DAYS = ref(["日", "一", "二", "三", "四", "五", "六"]);
    53. const currentMonth = computed(() => {
    54.     return moment(props.month).format('M');
    55. })
    56. onMounted(() => {
    57.     onKeyEvent();
    58. })
    59.  
    60. const rows = computed(() => {
    61.     let days: CalendarDateCell[] = []
    62.     const firstDay = moment(props.month).startOf("month").date();
    63.     // const endDay = moment(props.month).endOf('month').date();//当前月的最后一天
    64.     const firstDayOfWeek = moment(props.month).startOf("month").day();
    65.     // const daysInMonth = moment(props.month).daysInMonth();//当前月的天数
    66.  
    67.     const prevMonthDays: CalendarDateCell[] = getPrevMonthLastDays(
    68.         firstDay,
    69.         firstDayOfWeek - firstDay
    70.     ).map((day) => ({
    71.         text: 0,//上月补0
    72.         type: 'prev',
    73.     }))
    74.     const currentMonthDays: CalendarDateCell[] = getMonthDays(moment(props.month).daysInMonth()).map(
    75.         (day) => ({
    76.             text: day,
    77.             type: 'current',
    78.         })
    79.     )
    80.     days = [...prevMonthDays, ...currentMonthDays]
    81.     const remaining = 7 - (days.length % 7 || 7)
    82.     const nextMonthDays: CalendarDateCell[] = rangeArr(remaining).map(
    83.         (_, index) => ({
    84.             text: 0,//下月补0
    85.             type: 'next',
    86.         })
    87.     )
    88.     days = days.concat(nextMonthDays)
    89.     // console.log(currentMonth.value, firstDay, endDay, moment(props.month).startOf("month").day());
    90.     return toNestedArr(days)
    91. })
    92.  
    93. const rangeArr = (n: number) => {
    94.     return Array.from(Array.from({ length: n }).keys())
    95. }
    96.  
    97. const toNestedArr = (days: CalendarDateCell[]) =>
    98.     rangeArr(days.length / 7).map((index) => {
    99.         const start = index * 7
    100.         return days.slice(start, start + 7)
    101.     });
    102. const getPrevMonthLastDays = (lastDay: number, count: number) => {
    103.     return rangeArr(count).map((_, index) => lastDay - (count - index - 1))
    104. }
    105.  
    106. const getMonthDays = (days: number) => {
    107.     return rangeArr(days).map((_, index) => index + 1)
    108. }
    109. /**
    110.  * 获取范围期间所有日期
    111.  * @ return array['YYYY-MM-DD']
    112.  */
    113. const getDatesInRange = (start: number, end: number): string[] => {
    114.     let list = [];
    115.     for (let i = start; i <= end; i++) {
    116.         let dateStr = moment(getCellDate({ text: i, type: 'current' })).format('YYYY-MM-DD');
    117.         list.push(dateStr);
    118.     }
    119.     return list;
    120. }
    121. const isCtrl = ref(false)
    122. const isShift = ref(false)
    123. const onKeyEvent = () => {
    124.     window.addEventListener('keydown', e => {
    125.         e.preventDefault();//取消默认事件
    126.         let e1 = e || window.event
    127.         switch (e1.keyCode) {
    128.             case 16:
    129.                 isShift.value = true;
    130.                 break;
    131.             case 17:
    132.                 isCtrl.value = true;
    133.                 break;
    134.         }
    135.     })
    136.     window.addEventListener('keyup', e => {
    137.         e.preventDefault();
    138.         let e1 = e || window.event
    139.         switch (e1.keyCode) {
    140.             case 16:
    141.                 isShift.value = false;
    142.                 break;
    143.             case 17:
    144.                 isCtrl.value = false;
    145.                 break;
    146.         }
    147.     })
    148. }
    149. const getCellClass = (cell: CalendarDateCell, key: number) => {
    150.     let date = getCellDate(cell);
    151.     if (props.disableBefore && date.getTime() < new Date().getTime()) {
    152.         return ['cell', 'cell_disabled'];//禁用
    153.     }
    154.     let classes: string[] = ['cell', 'cell_enabled'];
    155.     if (key == 0 || key == 6) {//周六、周日
    156.         classes.push('cell_red');
    157.     }
    158.     let index = selectList.value.indexOf(moment(date).format('YYYY-MM-DD'));
    159.     if (index != -1) {
    160.         classes.push('cell_active');//选中
    161.     }
    162.     return classes;
    163. }
    164. const getCelltriangleStyle = (cell: CalendarDateCell) => {
    165.     let date = getCellDate(cell);
    166.     let day = props.markList.find(item => item.date == moment(date).format('YYYY-MM-DD'));
    167.     return day ? {
    168.         borderTop: '30px solid #e6e911',
    169.     } : {};
    170. }
    171. const getCellDate = (cell: CalendarDateCell) => new Date(props.month.getFullYear(), props.month.getMonth(), cell.text)
    172.  
    173. const selectList = ref<any[]>([]);//已选择的
    174. const shiftNum = ref(0);//shift复制的起始位置
    175. const lastSelect = ref<any[]>([]);//按住shift倒数第二次复制的
    176. //遵循excel点击、ctrl、shift组合操作规范
    177. const handlePickDay = (cell: CalendarDateCell) => {
    178.     let date = getCellDate(cell);
    179.     if (cell.type != 'current') {
    180.         return;
    181.     }
    182.     if (props.disableBefore && date.getTime() < new Date().getTime()) {
    183.         return
    184.     }
    185.     // console.log(isCtrl.value, isShift.value);
    186.     let dateStr = moment(date).format('YYYY-MM-DD');
    187.     let currentSelect: string[] = [];
    188.     //按住ctrl
    189.     if (isCtrl.value) {
    190.         if (selectList.value.includes(dateStr)) {
    191.             selectList.value.splice(selectList.value.indexOf(dateStr), 1);
    192.         } else {
    193.             selectList.value.push(dateStr);
    194.         }
    195.         lastSelect.value = [];
    196.     } else if (isShift.value) {//按住shift
    197.         if (shiftNum.value == 0) {//无上次点击
    198.             shiftNum.value = cell.text;
    199.             if (selectList.value.includes(dateStr)) {
    200.                 selectList.value.splice(selectList.value.indexOf(dateStr), 1);
    201.             } else {
    202.                 selectList.value.push(dateStr);
    203.             }
    204.         } else {
    205.             if (shiftNum.value < cell.text) {
    206.                 currentSelect = getDatesInRange(shiftNum.value, cell.text);
    207.             } else if (shiftNum.value > cell.text) {
    208.                 currentSelect = getDatesInRange(cell.text, shiftNum.value);
    209.             } else {
    210.                 currentSelect = [dateStr];
    211.             }
    212.             selectList.value = selectList.value.filter(item => !lastSelect.value.includes(item));//移除上次按shift复制的
    213.             selectList.value = selectList.value.concat(currentSelect);//添加本次按shift复制的
    214.             lastSelect.value = currentSelect;
    215.         }
    216.     } else {
    217.         selectList.value = [dateStr];
    218.     }
    219.     if (!isShift.value) {
    220.         shiftNum.value = cell.text;
    221.     }
    222.     selectList.value = [...new Set(selectList.value)].sort();//去重、排序
    223.     console.log(shiftNum.value, selectList.value);
    224.     emits('change', selectList.value);
    225. }
    226. </script>
    227. <style lang="scss" scoped>
    228. .calendar {
    229.     width: 100%;
    230.     padding: 12px 20px 35px;
    231.  
    232.     &_header {
    233.         display: flex;
    234.         justify-content: center;
    235.         border: 1px solid var(--el-border-color-lighter);
    236.         padding: 12px 20px;
    237.     }
    238.  
    239.     &_table {
    240.         width: 100%;
    241.  
    242.         .thead_th {
    243.             padding: 12px 0;
    244.             color: var(--el-text-color-regular);
    245.             font-weight: 400;
    246.  
    247.             &_red {
    248.                 color: red;
    249.             }
    250.         }
    251.     }
    252.  
    253.     .td {
    254.         border: 1px solid var(--el-border-color-lighter);
    255.         -moz-user-select: none;
    256.         /*火狐*/
    257.         -webkit-user-select: none;
    258.         /*webkit浏览器*/
    259.         -ms-user-select: none;
    260.         /*IE10*/
    261.         -khtml-user-select: none;
    262.         /*早期浏览器*/
    263.         user-select: none;
    264.     }
    265.  
    266.  
    267.     .cell {
    268.         // background-color: #409eff;
    269.         position: relative;
    270.         text-align: center;
    271.         min-height: 50px;
    272.         display: flex;
    273.         justify-content: center;
    274.  
    275.         &_enabled {
    276.             cursor: pointer;
    277.             color: #373737
    278.         }
    279.  
    280.         &_disabled {
    281.             cursor: not-allowed;
    282.             color: #9b9da1;
    283.         }
    284.  
    285.         &_red {
    286.             color: red;
    287.         }
    288.  
    289.         &_active {
    290.             background-color: #409eff;
    291.         }
    292.  
    293.         .triangle {
    294.             position: absolute;
    295.             left: 0;
    296.             top: 0;
    297.             width: 0;
    298.             height: 0;
    299.             // border-top: 30px solid #e6e911;
    300.             border-right: 30px solid transparent;
    301.         }
    302.  
    303.         &_text {
    304.             margin: auto;
    305.         }
    306.     }
    307.  
    308.  
    309. }
    310. </style>

    使用：

    onChange">

  • 相关阅读:
    【从安装JDK开始】Spring Cloud + Apache Ignite简单实例
    PHP简单实现预定义钩子和自定义钩子
    【MindSpore易点通机器人-01】你也许见过很多知识问答机器人，但这个有点不一样
    gslx680触摸屏驱动源码码分析(gslX680.c)
    【JavaWeb】Cookie&Session
    ​电脑上的回收站怎么隐藏 ，怎么隐藏桌面回收站图标
    “UTONMOS”掀起元宇宙游戏热潮，全球发展前景广阔
    Linux8-fork父子进程逻辑地址相同、进程的逻辑地址与物理地址、fork相关例题、僵死进程
    团建游戏----做一只小船去漂流
    【总结】使用livy 提交spark任务时报错Connection refused
  • 原文地址：https://blog.csdn.net/jerry872235631/article/details/126991097