在全日历日视图中显示超过 1 天

Question

我正在尝试使用 完整日历 组件在议程日视图中显示 3 天或最终使用垂直资源视图。

我尝试使用示例自定义视图，但没有成功。

是否可以在日视图中依次显示 3 天？

我正在使用这个构造函数，但我不希望这些日子彼此相邻，而是彼此在下面。

$('#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
        }
      }

Answer 1

您不能在议程样式视图中显示以下天，不。它的整个布局方案是水平定向的。您可以轻松地以正常的议程样式并排显示它们。

Scheduler 插件提供的垂直资源视图与议程视图基本相同，但每一天都针对每个指定的资源分成子栏。

如果您希望日期依次显示，您唯一的选择是 "list" 样式视图。这将垂直显示内容，但您会丢失时间网格。

此代码将以 3 天的跨度实现这两种类型的视图，因此您可以看到区别：

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

这是一个工作演示：http://jsfiddle.net/sbxpv25p/104/

如果这些都不满足您的要求，那么您唯一的选择就是创建一个完全自定义的视图类型（请参阅本文档页面的后半部分：https://fullcalendar.io/docs/views/Custom_Views/）。这是一项复杂且耗时的任务，因此在着手进行此类操作之前，您应该考虑其中一种内置视图类型是否真的令人满意 - 它们确实向用户传达了必要的信息，这是主要目的日历，即使它的布局与您想象的不完全一样。

Answer 2

为了在议程视图（天）中显示多天，只需添加 - 和 + 您想要的小时数...例如 -24 小时表示前一天，+24 小时表示所选日期之后的一天.像这样：

  views: {

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

  }

Answer 3

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

并将其添加到页眉：

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

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

在全日历日视图中显示超过 1 天

Show more than 1 day in Fullcalendar Day View

javascript

jquery

fullcalendar

fullcalendar-scheduler