javascript - Show more than 1 day in Fullcalendar Day View - Stack Overflow

admin管理员组

文章数量:1406461

I am trying to use the Full Calendar ponent to show 3 days in agenda Day view or eventually using the vertical resource view.

I tried using the example custom view but no luck.

Is it possible to show 3 days, one below another in the day view ?

I am using this constructor, but I don't want the days to be next to each other, but underneath 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

          //// unment this line to group by day FIRST with resources underneath
          groupByDate: true
        }
      }

I am trying to use the Full Calendar ponent to show 3 days in agenda Day view or eventually using the vertical resource view.

I tried using the example custom view but no luck.

Is it possible to show 3 days, one below another in the day view ?

I am using this constructor, but I don't want the days to be next to each other, but underneath 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

          //// unment this line to group by day FIRST with resources underneath
          groupByDate: true
        }
      }

• javascript
• jquery
• fullcalendar
• fullcalendar-scheduler

Share Improve this question Follow edited Jan 15, 2018 at 9:59 Vlad N asked Jan 15, 2018 at 9:18 Vlad NVlad N 65122 gold badges1010 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can't show the days below each other in an agenda style view, no. Its whole layout scheme is oriented horizontally. You can easily show them side-by-side, in the normal agenda style.

The vertical resource view provided by the Scheduler plug-in is essentially the same as the agenda view, but with each day split out into sub-columns for each specified Resource.

If you want days to appear one below the other, your only option is the "list"-style view. This will show things vertically, but you lose the time grid.

This code will achieve both of those types of view with a 3-day span, 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/sbxpv25p/104/

If neither of those satisfy what you want, then your only other option is to make a pletely custom view type (see the second half of this documentation page: https://fullcalendar.io/docs/views/Custom_Views/). This is a plex and time-consuming task, so before embarking on such a thing you should consider whether one of the built-in types of view will really be satisfactory - they do convey the necessary information to the user, which is the main purpose of a calendar, even if it wasn't quite in exactly the layout you had imagined.

In order to show multiple days in Agenda View ( Day ) just add - and + how many hours you want ... For example -24 H for a day ahead and +24 H for a day after your selected day. Something like this:

  views: {

    firstView: {
      type: 'agendaDay',
      minTime: '-12:00:00',
    maxTime: '36:00:00',
    slotDuration: '00:30:00',
            },

  }

views: {
      timeGridFourDay: {
        type: 'timeGrid',
        duration: { days: 4 },
        buttonText: '4 day'
      }
    },

and add it to header:

header: {
      left: 'prev,next',
      center: 'title',
      right: '.....,timeGridFourDay'
    },

https://fullcalendar.io/docs/custom-views

本文标签： javascriptShow more than 1 day in Fullcalendar Day ViewStack Overflow