javascript - 全日历，columnFormat html

Question

我希望自定义 columnFormat 为 2 行并设置如下样式:

尝试 columnFormat: 'dddMMM dS'结果:
<1iv c8/15/2016am00="1amy">Mon</1iv><1iv>Aug 10</1iv>


我怎样才能像图片那样自定义 columnHead？谢谢

Answer 1

columnFormat 只接受一个字符串，但您可以挂接到 viewRender 并在那里修改它

$('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  viewRender: renderViewColumns
});

function renderViewColumns(view, element) {
  element.find('th.fc-day-header.fc-widget-header').each(function() {
    var theDate = moment($(this).data('date')); /* th.data-date="YYYY-MM-DD" */
    $(this).html(buildDateColumnHeader(theDate));
  });

  function buildDateColumnHeader(theDate) {
    var container = document.createElement('div');
    var DDD = document.createElement('div');
    var ddMMM = document.createElement('div');
    DDD.textContent = theDate.format('ddd').toUpperCase();
    ddMMM.textContent = theDate.format('DD MMM');
    container.appendChild(DDD);
    container.appendChild(ddMMM);
    return container;
  }
}

https://jsfiddle.net/puhkv5qd/

这可能可以改进，但是使用 jQuery 3.1.0、fullcalendar 2.9.0 和 moment 2.14.1 它在 basicWeek、agendaWeek、basicDay、agendaDay View 上工作正常(不要在月 View 上使用它)