当在单日模式下使用fullcalendar时,是否有方法在资源时间轴的标题中显示日期?

周显示(没关系.)

place of header

天数显示(此处缺少标题.)

where is my header

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
  });

  calendar.render();
});
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.11/index.global.min.js"></script>

<div id='calendar'></div>

推荐答案

使用slotLabelFormat,您可以 for each 类型分别设置第一行和第二行的值.

要设置此功能,您需要应用预定义的规则,您可以在Date Formatting (fullcalendar.io)中找到这些规则.

views: {
  resourceTimelineDay:{
    slotLabelFormat: [
      {
        weekday: 'short',
        month: '2-digit',
        day: '2-digit',
        omitCommas: true, // it removes the comma after the "day" (as there is no comma by default with the week view)
      }, // top level of text
      {
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: true,
        meridiem: 'short'
      } // lower level of text
    ],
  },
},

result

由于您说希望它看起来像resourceTimelineWeek视图,所以我为resourceTimelineDay视图设置了类似的第一行.我还必须设置第二行(因为如果我们不指定它,则只会出现第一行).

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline',
    views: {
      resourceTimelineDay:{
        slotLabelFormat: [
          {
            weekday: 'short',
            month: '2-digit',
            day: '2-digit',
            omitCommas: true,
          }, // top level of text
          {
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: true,
            meridiem: 'short'
          } // lower level of text
        ]
      }
    },
  });

  calendar.render();
});
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.11/index.global.min.js"></script>

<div id='calendar'></div>

Javascript相关问答推荐

将下拉分区与工具提示结合起来

鼠标移动时更新画布

React:未调用useState变量在调试器的事件处理程序中不可用

在贝塞尔曲线的直线上找不到交叉点:(使用@Pomax的bezier.js)

微软Edge编辑和重新发送未显示""

Snowflake JavaScript存储过程返回成功,尽管预期失败

为什么我的列表直到下一次提交才更新值/onChange

为什么当我解析一个promise时,输出处于挂起状态?

将字符串UTC Date转换为ngx—counting leftTime配置值的数字

如何从网站www.example.com获取表与Cheerio谷歌应用程序脚本

rxjs插入延迟数据

类构造函数不能在没有用With Router包装的情况下调用

如何在箭头函数中引入or子句?

将基元传递给THEN处理程序

为什么延迟在我的laravel项目中不起作用?

我正在试着做一个TicTacToe Ai来和我玩.但是,我试着在第一个方块被点击时出现一个X,然后在第二个方块之后出现一个O

自动滚动功能在当前图像左侧显示上一张图像的一部分

为什么我看到的是回复,而不是我的文档?

ReferenceError:无法在初始化之前访问setData

无法使用npm install安装react-dom、react和next