在议程四日全日历中显示事件无法正常工作

问题描述

我正在构建一个带有 fullcalender 的轮班管理 Web 应用程序，我希望它像这样显示

但它显示像这样

。
我不'不是设计而是事件，我希望它在顶部显示事件而不考虑时间，并且事件像堆栈一样显示，一个在另一个顶部，并且还隐藏左侧的时间 -日历的手边

这是我的代码

let $calendar=$('#calendar')
$calendar.fullCalendar({
    contentHeight:(window.innerHeight*0.76),titleFormat:'MMMM D YYYY',eventOrder:['title,propA,-propB'],eventOverlap: false,allDayText:'Available all day',theme: false,defaultview:'agendaFourDay',header: { center: 'title',left:"refresh_btn",right:'prev,agendaFourDay,listMonth,next'},views: {
        agendaFourDay:{
            type:'agenda',duration:{days:3},columnFormat:'ddd D',buttonText:'3-day View',},listMonth: {
            type: 'list',buttonText: 'List View'
        },axisFormat: 'h(:mm)tt',editable: false,eventLimit:false,eventLimitText: 'shifts',dayMaxEventRows: true,allDaySlot: true,customButtons: {
        refresh_btn: {text:'Refresh',click:()=>$calendar.fullCalendar('refetchEvents')}
    },events: (start,end,timezone,callback)=> {
        let data= { what:'all',start: start.format(),end: end.format(),loc_id,is_mobile }
        $.post(`submit/shifts/get-shifts/`,data,doc=>callback(doc))
    },eventRender: (e,el,v)=>{
        let title=`<div style='font-weight:bold'>${e.title}</div>`
        el.find('.fc-title').html(title)
        el.find('.fc-list-item-title').html(title);
        el.find('.fc-time').html(`${e.end.format('H:mm')} - ${e.start.format('H:mm')}`)
        $(el).each(function () { 
            $(this).attr('date-num',e.start.format('YYYY-MM-DD')); 
        });
    },eventAfterallRender:view=>{
        for( cDay = view.start.clone(); cDay.isBefore(view.end) ; cDay.add(1,'day') ){
            var dateNum = cDay.format('YYYY-MM-DD');
            var dayEl = $(`.fc-day[data-date="${dateNum}"]`);
            var eventCount = $(`.fc-event[date-num="${dateNum}"]`).length;
            if(eventCount>0){
                var html = `<small class="text-center add-cursor ml-2 mt-3 d-top-fa"> 
                    <i class="fa fa-search-plus"></i>${eventCount} shifts
                </small>`;
                dayEl.html(html)
            }
        }
    },})

解决方法

您可以为此使用 Basic 视图。它只是将每天的所有事件放在一个堆栈中，并且没有时间网格。您仍然可以自定义显示 3 天。

唯一的小缺点是它没有单独的全天活动区域（但我不知道您是否需要）。

顺便说一句，您不需要手动代码来重新格式化 eventRender 回调中的时间 - 已经有设置来控制它。

defaultView:'basicThreeDay',header: { center: 'title',left:"refresh_btn",right:'prev,basicThreeDay,listMonth,next'},views: {
    basicThreeDay:{
        type:'basic',duration:{days:3},columnFormat:'ddd D',buttonText:'3-day View',},listMonth: {
        type: 'list',buttonText: 'List View'
    },displayEventEnd: true,timeFormat: "H:mm",

演示：https://codepen.io/ADyson82/pen/MWjzOwP

fullcalendar fullcalendar-3 jquery