fullcalendar v6的使用记录

最新推荐文章于 2024-07-25 13:00:00 发布

番茄蛋饭25块半

最新推荐文章于 2024-07-25 13:00:00 发布

阅读量1.4k

点赞数 2

文章标签： javascript 前端开发语言 fullcalendar

本文链接：https://blog.csdn.net/eternity1926/article/details/128645854

版权

该文章提供了一种使用V6版本的CDN来配置和管理FullCalendar的教程，包括加载控制、事件点击回调、事件类名追加、数据源获取、自定义样式和工作时间设定，以及事件重叠和拖拽回调等核心功能。

摘要由CSDN通过智能技术生成

翻了翻百度，教程很多都过时了，方法都废弃了。这次是以V6版本CDN方式使用说明

文档地址

// 配置 
var calendarConfig = {
        // 加载
        loading:function (load){
           //可以控制页面的加载状态
            app._instance.data.fullscreenLoading = load
        },
        // 点击event 也就是点击事件触发的回调
        eventClick: function(info) {
            app._instance.ctx.getEventInfo(info.event.extendedProps)
        },
        // 追加eventClass 可以根据eventInfo追加class Name
        eventClassNames: function(arg) {
            if (arg.event.extendedProps?.course_status == 'confirm') {
                return [ 'confirmed' ]
            } else {
                return [ 'unconfirmed' ]
            }
        },
        // 自定义表格的class
        dayHeaderClassNames:'header-x',
        dayCellClassNames:'cell-x',
        // event 数据源
        eventSources: [
            // 获取标识信息，每一个信息源一个对象
            {
            	// 设置成远程请求获取 （根据文档整理返回的数据类型）
                events: function(fetchInfo, successCallback, failureCallback) {
                    post("{{ route('testcalendar') }}",{
                        start:fetchInfo.start.valueOf() /1000, // 这里获取的时间是毫秒 所以转成秒
                        end:fetchInfo.end.valueOf() / 1000,
                    }).then(res => {
                        // calendarEl.addEventSource( res.data )
                        // calendarEl.refetchEvents()
                        if(res.status == 'success') {
                            successCallback(res.data)
                        }else{
                            failureCallback(res.msg)
                        }
                    })
                },
                className: 'off-x', //追加的class
                display:'block',
                color: 'rgb(221, 243, 245)',
                backgroundColor: 'rgb(255 223 193)',
                textColor: 'rgb(255, 162, 77)'
            },
            {
                events: function(fetchInfo, successCallback, failureCallback) {
                    post("{{ route('testcalendar') }}",{
                        start:fetchInfo.start.valueOf() /1000,
                        end:fetchInfo.end.valueOf() / 1000,
                        type:'lesson'
                    }).then(res => {
                        // calendarEl.addEventSource( res.data )
                        // calendarEl.refetchEvents()
                        if(res.status == 'success') {
                            successCallback(res.data)
                        }else{
                            failureCallback(res.msg)
                        }
                    })
                },
                className: 'lesson-x',
                display:'block',
                color: 'rgb(228, 234, 251)',
                backgroundColor: 'rgb(228, 234, 251)',
                textColor: 'rgb(100, 131, 221)'
            }
        ],
        // 工作时间（其他时间段会变成灰色）
        businessHours: [
            {
                daysOfWeek: [ 0,1, 2, 3, 4, 5, 6],
                startTime: "{{ $teacher->course_start_at }}",
                endTime: "{{ $teacher->course_end_at }}"
            },
        ],
        // 自定义按键 （主要是分配到toolbar）
        customButtons: {
            pre: {
                text: '',
                icon: 'chevron-left',
                click: function() {
                    //app._instance.ctx.toPage(3)

                }
            },
            nex: {
                text: '',
                icon: 'chevron-right',
                click: function() {
                    alert('clicked the custom button!');
                }
            }
        },
        // event重叠回调
        eventOverlap: function(stillEvent, movingEvent) {
            return false; // 不允许重叠
        },
        // event拖拽回调
        eventAllow: function(dropInfo, draggedEvent) {
            console.log(dropInfo)
            console.log(draggedEvent)
        },
        // 顶部状态栏的显示
        headerToolbar: {
            left: 'prev,next', //
            center: 'title',
            right: 'timeGridWeek,timeGridDay,listMonth'
        },
        // event时间显示格式
        eventTimeFormat:{
            hour: 'numeric',
            minute: '2-digit',
            hour12: false,
            omitZeroMinute: false,
            meridiem: false
        },
        // view 时间格式
        slotLabelFormat:{
            hour: 'numeric',
            minute: '2-digit',
            hour12: false,
            omitZeroMinute: false,
            meridiem: false
        },
        nowIndicator: true, // 当前时间
        allDaySlot: false, //显示全天slot
        editable: true,
        selectable: true,
        firstDay: 1, // 每周开始的第一天 0是周日
        initialView: 'timeGridWeek', // 周列表视图
        //点击日历块事件(和下面的select同时触发)
        // dateClick: function(info) {
        //     alert('Clicked on: ' + info.dateStr);
        // },
        // 点/拖拽选择
        select: function(info) {
            console.log(info)
            let selectStart = dayjs(info.start)
            var selectEnd = dayjs(info.end)
            if(selectEnd.diff(selectStart,"minute") > 30 ) {
                app._instance.data.quantum = 60
                selectEnd = selectStart.add(1,"hour")
            }else {
                app._instance.data.quantum = 30
                selectEnd = selectStart.add(0.5,"hour")
            }
            app._instance.data.dateValue =  selectStart.format('YYYY-MM-DD')
            app._instance.data.time_start = selectStart.format('HH:mm')
            app._instance.data.time_end = selectEnd.format('HH:mm')

            app._instance.data.dialogVisible = true
        }
    }
    $(function (){
		// 准备好div 开渲
        calendarEl =  new FullCalendar.Calendar($('#calendar')[0], calendarConfig);
        calendarEl.render();
    })