Geek Answers Handbook

Show more than 1 day in Fullcalendar day mode

I am trying to use the Full Calendar component to show 3 days in the daily agenda view or ultimately use the vertical resource view.

I tried using a custom view example, but no luck.

Can I show 3 days, one below the other in day mode?

I use this constructor, but I do not want the days to be next to each other, but under each other.

$('#calendar').fullCalendar({ defaultView: 'agendaDay', defaultDate: '2017-12-07', editable: true, selectable: true, eventLimit: true, // allow "more" link when too many events header: { left: 'prev,next today', center: 'title', right: 'agendaDay,agendaTwoDay,agendaWeek,month' }, views: { agendaTwoDay: { type: 'agenda', duration: { days: 3 }, // views that are more than a day will NOT do this behavior by default // so, we need to explicitly enable it //groupByResource: true //// uncomment this line to group by day FIRST with resources underneath groupByDate: true } }
+4
javascript jquery fullcalendar fullcalendar-scheduler
source share
2 answers

To show several days on the Agenda (Day), simply add - and + how many hours you want ... For example, -24 H for the day ahead and +24 H for the day after your chosen day. Something like that:

  views: { firstView: { type: 'agendaDay', minTime: '-12:00:00', maxTime: '36:00:00', slotDuration: '00:30:00', }, }
+1
source share

You cannot show days below each other in the presentation of the agenda style, no. Its layout scheme is oriented horizontally. You can easily show them side by side, in the usual style.

The vertical view of resources provided by the Scheduler plug-in essentially coincides with the presentation of the agenda, but is divided into sub-columns for each specified resource every day.

If you want the days to be displayed one below the other, the only option is a "list style". This will show things vertically, but you will lose the time grid.

This code will reach both types of browsing at 3-day intervals, so you can see the difference:

 views: { agendaThreeDay: { type: 'agenda', duration: { days: 3 }, buttonText: '3 day agenda' }, listThreeDay: { type: 'list', duration: { days: 3 }, buttonText: '3 day list' } },

Here is a working demo: http://jsfiddle.net/sbxpv25p/104/

If none of them satisfies what you want, then your only other option is to create a fully custom view type (see the second half of this documentation page: https://fullcalendar.io/docs/views/Custom_Views/ ). This is a complex and time-consuming task, so before you start such maintenance, you should think about whether one of the built-in types of representations will be satisfactory - they transmit the necessary information to the user, which is the main purpose of the calendar, even if it was not quite in the layout you imagined.

+2
source share

More articles:


All Articles