文章目录
1、需求
在FullCalendar插件中，在用户多选日期后，将这些所选日期的背景颜色更改为红色。
实现效果：
2、select方法
select 回调方法用于处理用户在日历上选择日期或时间范围的事件。
2.1、开启selectable
首先确保fullcalendar中selectable为true
- selectable：是否允许用户单击或者拖拽日历中的天和时间隙。默认false
2.1、select方法
select在日历中选择某个时间之后触发该回调函数。
function( start, end, jsEvent, view, [ resource ] )
-
start：表示你选中区域的开始时间，Date对象。
-
end：表示你选中区域的结束时间，Date对象。当allday为true的时候，endDate可以包括最后一天（其实就是<和<=的区别）。
-
jsEvent：是原始Js event对象，包含鼠标坐标等。如果是通过 select方法 选中的，jsEvent是undefined。
3、使用步骤
3.1 唯一的标识符data-date
在FullCalendar中，FullCalendar的select回调提供的info对象包含了所选范围的开始和结束时间（start和end），但并不直接包含对应的DOM元素。因此，我们需要通过其他方式来找到这些日期对应的DOM元素。
但是查看每个日期单元格的DOM元素后，发现每个日期单元格添加一个唯一的标识符data-date：
3.2 获取所有日期单元格的dayEls
// 获取所有日期单元格
var dayEls = document.querySelectorAll('.fc-day[data-date]');
3.3 遍历日期单元格
遍历日期单元格，获取日期选择范围内的dayEl（日期单元格的DOM元素）
回调中为每个日期单元格添加一个唯一的标识符data-date。在select回调中，您可以遍历所选范围内的每一天，并使用这些标识符来找到对应的DOM元素。
// 遍历日期单元格并进行日期比较
dayEls.forEach(function(dayEl) {
var cellDateStr = dayEl.getAttribute('data-date');
// console.log(cellDateStr)
// 检查日期是否在所选范围内
if (cellDateStr >= info.startStr && cellDateStr <= endDateStrAdjusted) {
// 修改背景颜色或执行其他操作
dayEl.style.backgroundColor = 'red';
} else {
// 如果之前设置了颜色，现在可能需要重置（可选）
dayEl.style.backgroundColor = '';
}
});
4、完整代码
<template>
<div class="main">
<div class="title">
<h1>study01基本使用</h1>
</div>
<FullCalendar ref="funllCalendarRef" :options="calendarOptions" />
</div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
components: {
FullCalendar,
},
data() {
return {
myCalendar:null,
calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
weekends: true, // 隐藏周六和周日
selectable: true,
dayRender: function(info) {
console.log("dayRender",info)
// 为每个日期单元格添加一个自定义数据属性
// info.el.setAttribute('data-date', info.date.toISOString().split('T')[0]);
},
dateClick: function(info) {
// console.log('info: ' , info)
// console.log('Clicked on: ' + info.dateStr);
// console.log('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
// console.log('Current view: ' + info.view.type);
// info.dayEl.style.backgroundColor = 'red';
},
select: function(info) {
console.log('selected ' + info.startStr + ' to ' + info.endStr);
// 由于FullCalendar可能包括所选日期的下一天（对于时间选择），我们需要调整结束日期
var endDate = new Date(info.endStr);
endDate.setDate(endDate.getDate() - 1); // 如果不需要包含结束日期的当天，则减去1天
var endDateStrAdjusted = endDate.toISOString().split('T')[0];;
// 获取所有日期单元格
var dayEls = document.querySelectorAll('.fc-day[data-date]');
console.log(dayEls)
// 遍历日期单元格并进行日期比较
dayEls.forEach(function(dayEl) {
var cellDateStr = dayEl.getAttribute('data-date');
// console.log(cellDateStr)
// 检查日期是否在所选范围内
if (cellDateStr >= info.startStr && cellDateStr <= endDateStrAdjusted) {
// 修改背景颜色或执行其他操作
dayEl.style.backgroundColor = 'red';
} else {
// 如果之前设置了颜色，现在可能需要重置（可选）
dayEl.style.backgroundColor = '';
}
});
}
}
}
},
mounted () {
// this.myCalendarApi = this.$refs.funllCalendarRef.getApi(); //获取日历Api
},
methods: {
}
}
</script>
<style lang="less" scoped>
.main{
margin: 20px;
place-content: center;
.title{
font-size: 20px;
color: blue;
margin-left: 300px;
}
}
</style>
磨你的心智，是为了以后不管你遇见任何人和事，都能稳如泰山。