javascript - 月 View 和周 View 中的全日历自定义标题

标签 javascript html fullcalendar

Fullcalendar.io 可以选择制作 custom ColumnHeaders在 Html 中。

如何区分月 View 和周 View ?对于月 View ,我只会在标题中显示工作日。

 columnHeaderHtml: function (date) {
      const days = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
      let html = '';
      html += '<span class="column-header-week">' + days[date.getDay()] + '</span>';
      html += '<span class="column-header-day">' + date.getDate() + '</span>';
      return html;
}

enter image description here

最佳答案

ADyson 的解决方案非常有效: fullcalendar.io/docs/view-specific-options

views: {
   dayGrid: {//week and day view
     columnHeaderHtml: function (date) {
          const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];//todo asptext
          let html = '';
          html += '<span class="column-header-week">' + days[date.getDay()] + '</span>';
          return html;
       }
    },
    timeGrid: { //month view         
      columnHeaderHtml: function (date) {
         const days = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];//todo asptext
         let html = '';
         html += '<span class="column-header-week">' + days[date.getDay()] + '</span>';
         html += '<span class="column-header-day">' + date.getDate() + '</span>';
         return html;
     }
 },

关于javascript - 月 View 和周 View 中的全日历自定义标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57660256/

相关文章:

reactjs - React 中的完整日历上一个 - 下一个按钮

javascript - 完整日历 eventElement.draggable 不是函数使用 `editable: true` 选项时

javascript - JS 文件无法访问 laravel 变量

javascript - 搜索引擎结果页面出现 map 未定义错误

html - 为什么我的 Bootstrap 网格中的行重叠?

javascript - JavaScript文件放在head中时构造 'CustomElement'错误失败

javascript - Angular 2库配置

javascript - 检索 svg <image> 的纵横比

javascript - ios 的 safari 中的链接不会出现“在新标签页中打开”选项

javascript - 全日历事件源不起作用