Fullcalendar日历插件的使用(一)select方法:在用户多选日期后,将这些所选日期的背景颜色更改为红色

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>

在这里插入图片描述


磨你的心智,是为了以后不管你遇见任何人和事,都能稳如泰山。


猜你喜欢

转载自blog.csdn.net/weixin_43025151/article/details/143284990