Vue【原创】日历组件Calendar

最近项目中封装了一个日历组件，用于节假日管理，支持输入默认选中的日期，选择管理日期。

效果图：

calendar组件：

  1 <template>
  2     <div class="calendar">
  3         <slot name="title">
  4             <div class="calendar-title">{{ curYearMonth }}</div>
  5         </slot>
  6
  7         <table class="calendar-table">
  8             <thead>
  9                 <tr>
 10                     <th v-for="(item, i) in weeks" :key="i">{{ item }}</th>
 11                 </tr>
 12             </thead>
 13             <tbody>
 14                 <tr v-for="(dates, i) in res" :key="i" :style="{ height: cellHeight }">
 15                     <td v-for="(item, index) in dates" :key="index" :class="{
 16                             notCurMonth: !item.isCurMonth,
 17                             currentDay: item.date === curDate,
 18                             selectDay: item.isSelected,
 19                             rangeSelectd: item.isRangeSelected,
 20                             weekend: item.isWeekend
 21                         }" @click="handleItemClick(item, i, index)" @mouseover="handleItemMove(item, i, index)">
 22                         <!-- <span>{{ item.date.split('-').slice(1).join('-') }}</span> -->
 23                         <span>{{ item.date | cellDate }}</span>
 24                         <slot :data="item" />
 25                     </td>
 26                 </tr>
 27             </tbody>
 28         </table>
 29     </div>
 30 </template>
 31
 32 <script>
 33     import {
 34         getDaysInMonth,
 35         handleCreateDate,
 36         handleCreateDatePicker,
 37         parseTime
 38     } from '../../../src/utils/dateUtils.js';
 39
 40     const SELECT_MODE = {
 41         SINGLE: 'single',
 42         RANGE: 'range'
 43     }
 44
 45     export default {
 46         name: 'LiloCalendar',
 47         components: {},
 48         filters: {
 49             cellDate(value) {
 50                 // value.split('-')[1] + '-' + value.split('-')[2]
 51                 return value.split('-')[2]
 52             }
 53         },
 54         props: {
 55             selectMode: {
 56                 type: String,
 57                 default: SELECT_MODE.SINGLE //'single,range'
 58             },
 59             startOfWeek: {
 60                 type: Number,
 61                 default: 1
 62             },
 63             canSelect: {
 64                 type: Boolean,
 65                 default: false
 66             },
 67             cellHeight: {
 68                 type: String,
 69                 default: '60px'
 70             },
 71             currentDate: {
 72                 type: String,
 73                 default: new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
 74             },
 75             defaultSelectedDates: {
 76                 type: Array,
 77                 default () {
 78                     return []
 79                 }
 80             },
 81         },
 82         data() {
 83             return {
 84                 monthOptions: [],
 85                 yearOptions: [],
 86                 weeks: ['一', '二', '三', '四', '五', '六', '日'],
 87                 curYear: 0, // 当前年
 88                 curMonth: 0, // 当前月
 89                 days: 0, // 当前月总共天数
 90                 curDate: parseTime(new Date().getTime()), // 当前日期 yyyy-MM-dd 格式，用来匹配是否是当前日期
 91                 prevDays: [], // 非当前月的上一月展示的日期
 92                 rearDays: [], // 非当前月的下一月展示的日期
 93                 curDays: [], // 当前月的日期
 94                 showDays: [], // 总共展示的42个日期
 95                 res: [], // 二维数组
 96                 selectedDates: [], // 选中的日期
 97                 selectedMode: false, // true表示点击， false表示滑动
 98                 moveIndex: [], // 两个，第一个是起始，第二个是结束
 99                 canMove: false // 当moveIndex数组有一个值时，可以触发滑动
100             };
101         },
102         computed: {
103             curYearMonth() {
104                 const temp = parseInt(this.curMonth) + 1;
105                 return this.curYear + '-' + (temp < 10 ? `0${temp}` : temp);
106             }
107         },
108         watch: {
109             curMonth: {
110                 handler(val) {
111                     this.handleGetDays(this.curYear, val, this.startOfWeek);
112                 }
113             },
114             curYear: {
115                 handler(val) {
116                     this.handleGetDays(val, this.curMonth, this.startOfWeek);
117                 }
118             },
119             currentDate: {
120                 handler(val) {
121                     this.setup();
122                 }
123             },
124             defaultSelectedDates: {
125                 handler(val) {
126                     this.setup();
127                 }
128             }
129         },
130         created() {},
131         mounted() {
132             this.setup();
133         },
134         methods: {
135             setup() {
136                 this.weeks.unshift(...this.weeks.splice(this.startOfWeek - 1));
137                 this.handleGetDays(this.curYear, this.curMonth, this.startOfWeek);
138                 this.selectedMode = this.selectMode === SELECT_MODE.SINGLE;
139
140                 const temp = this.currentDate.split('-');
141                 this.curYear = parseInt(temp[0]);
142                 this.curMonth = parseInt(temp[1]) - 1;
143
144                 this.monthOptions = handleCreateDatePicker().months;
145                 this.yearOptions = handleCreateDatePicker().years;
146                 if (localStorage.selectedDates) this.selectedDates = JSON.parse(localStorage.selectedDates);
147             },
148             handleGetDays(year, month, startOfWeek) {
149                 this.showDays = [];
150                 this.days = getDaysInMonth(year, month);
151                 let firstDayOfWeek = new Date(`${year}-${month + 1}-01`).getDay();
152
153                 // 处理周起始日
154                 const obj = {
155                     1: '一',
156                     2: '二',
157                     3: '三',
158                     4: '四',
159                     5: '五',
160                     6: '六',
161                     0: '日'
162                 };
163                 const firstDayInCN = obj[firstDayOfWeek];
164                 const index = this.weeks.indexOf(firstDayInCN);
165                 // console.log(firstDayOfWeek, index);
166
167                 if (firstDayOfWeek === 0) {
168                     // 星期天为0 星期一为1 ，以此类推
169                     firstDayOfWeek = 7;
170                 }
171
172                 this.prevDays = handleCreateDate(year, month, 1, index + 1, 'prev');
173                 this.rearDays = handleCreateDate(year, month, 1, 42 - this.days - index, 'rear');
174
175                 this.curDays = handleCreateDate(year, month, 1, this.days, 'cur', this.defaultSelectedDates);
176                 this.showDays.unshift(...this.prevDays);
177                 this.showDays.push(...this.curDays);
178                 this.showDays.push(...this.rearDays);
179                 this.res = this.handleFormatDates(this.showDays);
180             },
181             handleFormatDates(arr, size = 7) {
182                 // 传入长度42的原数组，最终转换成二维数组
183                 const arr2 = [];
184                 for (let i = 0; i < size - 1; i++) {
185                     const temp = arr.slice(i * size, i * size + size);
186                     arr2.push(temp);
187                 }
188                 // console.log(arr2)
189                 return arr2;
190             },
191             handleTableHead(start) {
192                 const sliceDates = this.weeks.splice(start - 1);
193                 this.weeks.unshift(...sliceDates);
194             },
195             handleItemClick(item, i, j) {
196                 if (!this.canSelect) return;
197                 if (!item.isCurMonth) return;
198                 if (this.selectedMode) {
199                     this.$nextTick(() => {
200                         // this.$set(this.res[i][j], 'isSelected', )
201                         this.res[i][j].isSelected = !this.res[i][j].isSelected;
202                         if (this.res[i][j].isSelected) {
203                             this.selectedDates.push(this.res[i][j].date);
204                             this.selectedDates = Array.from(new Set(this.selectedDates));
205                             this.$emit('date-selected', {
206                                 selectedDates: this.selectedDates,
207                                 removeDate: '',
208                                 addDate: item.date
209                             });
210                         } else {
211                             this.selectedDates.splice(this.selectedDates.indexOf(item.date), 1);
212                             this.$emit('date-selected', {
213                                 selectedDates: this.selectedDates,
214                                 removeDate: item.date,
215                                 addDate: ''
216                             });
217                         }
218                     });
219                 } else {
220                     // 滑动模式下，第一次点击是起始，第二次点击是结束
221                     const index = i * 7 + j;
222                     this.canMove = true;
223                     if (this.moveIndex.length === 1) {
224                         this.canMove = false;
225                     }
226                     if (this.moveIndex.length === 2) {
227                         this.showDays.forEach(item => {
228                             item.isSelected = false;
229                             item.isRangeSelected = false;
230                         });
231                         this.canMove = true;
232                         this.moveIndex.length = 0;
233                     }
234                     this.moveIndex.push(index);
235                     this.moveIndex.sort((a, b) => a - b);
236                     this.selectedDates = this.showDays.slice(this.moveIndex[0], this.moveIndex[1] + 1);
237                     this.selectedDates.length !== 0 && this.$emit('date-selected', this.selectedDates);
238                 }
239             },
240             handleItemMove(data, i, j) {
241                 if (this.canMove && !this.selectedMode) {
242                     const index = i * 7 + j;
243                     this.showDays.forEach(item => {
244                         item.isSelected = false;
245                         item.isRangeSelected = false;
246                     });
247                     // 让第一个日期和最后一个日期显示蓝色高亮
248                     this.showDays[index].isSelected = true;
249                     this.showDays[this.moveIndex[0]].isSelected = true;
250
251                     // 不同情况的判断，当用户的鼠标滑动进日期的索引小于起始日期的索引，要做if else处理
252                     if (this.moveIndex[0] < index) {
253                         for (let i = this.moveIndex[0] + 1; i < index; i++) {
254                             this.showDays[i].isRangeSelected = true;
255                         }
256                     } else {
257                         for (let i = index + 1; i < this.moveIndex[0]; i++) {
258                             this.showDays[i].isRangeSelected = true;
259                         }
260                     }
261                 }
262             },
263             handleQuickChange(type) {
264                 if (type === 'prev') {
265                     this.curMonth--;
266                     // console.log(this.curMonth);
267                     if (this.curMonth === -1) {
268                         this.curMonth = 11;
269                         this.curYear -= 1;
270                     }
271                 } else if (type === 'next') {
272                     this.curMonth++;
273                     if (this.curMonth === 12) {
274                         this.curMonth = 0;
275                         this.curYear += 1;
276                     }
277                 }
278             }
279         }
280     };
281 </script>
282
283 <style scoped lang="scss">
284     .calendar {
285         display: flex;
286         align-items: center;
287         justify-content: center;
288         flex-direction: column;
289     }
290
291     .calendar-title {
292         width: 100%;
293         padding-top: 8px;
294         padding-bottom: 5px;
295         font-weight: bold;
296         border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
297     }
298
299     .calendar-table {
300         width: 100%;
301         table-layout: fixed;
302         border-collapse: collapse;
303         transition: 0.3s;
304
305         thead tr {
306             height: 50px;
307         }
308
309         tbody tr {
310             &:first-child td {
311                 border-top: 1px solid rgba($color: #000000, $alpha: .1);
312             }
313
314             td {
315                 cursor: pointer;
316                 border-right: 1px solid rgba($color: #000000, $alpha: .1);
317                 border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
318                 text-align: center;
319
320                 &:first-child {
321                     border-left: 1px solid rgba($color: #000000, $alpha: .1);
322                 }
323             }
324         }
325     }
326
327     .notCurMonth {
328         transition: all .25s ease-out;
329         color: #c0c4cc;
330     }
331
332     .currentDay {
333         transition: all .25s ease-out;
334         color: #fff;
335         background-color: #409eff;
336     }
337
338     .selectDay {
339         transition: all .25s ease-out;
340         color: #fff;
341         background-color: #08a8a0;
342     }
343
344     .rangeSelectd {
345         transition: all .25s ease-out;
346         color: #606266;
347         background-color: #dee2e9;
348     }
349
350     .weekend {
351         transition: all .25s ease-out;
352         color: #f56c6c;
353     }
354 </style>

调用案例和参数说明（我这里说全局插件引入，单独使用需要自行import导入）：

 1 <template>
 2     <div class="calendar-container">
 3         <lilo-calendar
 4             :default-selected-dates="defaultSelectedDates"
 5             :current-date="currentDate"
 6             :start-of-week="startOfWeek"
 7             :cell-height="cellHeight"
 8             :can-select="canSelect"
 9             @date-selected="dateSelected">
10             <!-- <template #title> -->
11                 <!-- 标题栏可以设置插槽 -->
12                 <!-- <div class="custom-title">2023-08</div> -->
13             <!-- </template> -->
14         </lilo-calendar>
15     </div>
16 </template>
17
18 <script>
19     export default {
20         data() {
21             return {
22                 defaultSelectedDates: [ '2023-08-01', '2023-08-03' ], //默认选中的日期
23                 currentDate: '2023-08', //当前月份
24                 startOfWeek: 1, //从星期几开始,
25                     // 1: '一',
26                     // 2: '二',
27                     // 3: '三',
28                     // 4: '四',
29                     // 5: '五',
30                     // 6: '六',
31                     // 0: '日'
32                 cellHeight: '120px', //日期单元的高度
33                 canSelect: true //是否可以选中，选中之后触发date-selected事件
34             }
35         },
36         methods: {
37             dateSelected(val) {
38                 console.log(val)
39             }
40         }
41     }
42 </script>
43
44 <style lang="scss" scoped>
45     .calendar-container {
46         padding: 20px;
47         .custom-title {
48             width: 100%;
49             padding: 8px;
50             color: #409eff;
51             font-weight: bold;
52             font-size: 1.1rem;
53             border-bottom: 1px solid #0000001f;
54         }
55     }
56 </style>

查看基于【日历组件】的【节假日管理】功能整个请移步：https://www.cnblogs.com/loveFlex/p/17662512.html