displaying events in agendaFourDay fullcalender not working properly

Question

I am building a shift management web application with fullcalender, I would like it to display like this
but instead it's displaying like this .
I don't mean the design but the events, I would like it to show the events at the top irrespective of the time and for the events to show like a stack, one on top of the other, and to also hide the time at the left-hand side of the calendar

Here is my code

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',
            columnFormat:'ddd D',
            buttonText: 'List View'
        },
    },
    axisFormat: 'h(:mm)tt',
    editable: false,
    eventLimit:false,               
    eventLimitText: 'shifts',
    dayMaxEventRows: true,  
    eventOverlap: false,
    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)
            }
        }
    },
})

Is this all client side code? If so, make a jsfiddle. – react_or_angluar Jan 14 '21 at 10:05 — react_or_angluar, Jan 14 '21 at 10:05

score 0 · Answer 1 · answered Jan 14 '21 at 12:49

You can use the Basic view for this. It simply puts all events in a stack for each day, and doesn't have a time grid. You can still customise it to show 3 days.

The only slight downside is it doesn't have a separate area for all-day events (but I don't know if you need that).

BTW you don't need that manual code to reformat the time in the eventRender callback - there are settings to control that already.

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',
        columnFormat:'ddd D',
        buttonText: 'List View'
    },
},
displayEventEnd: true,
timeFormat: "H:mm",

Demo: https://codepen.io/ADyson82/pen/MWjzOwP

displaying events in agendaFourDay fullcalender not working properly

1 Answers1