fullcalendar，columnFormat html

Question

我想将自定义的columnFormat设置为2行并将其设置为如下样式：

尝试使用columnFormat：＆＃39; dddMMM dS＆＃39; 结果： <1iv c8/15/2016am00="1amy">Mon</1iv><1iv>Aug 10</1iv>

我怎样才能像pic一样自定义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和时刻2.14.1它在basicWeek，agendaWeek，basicDay，agendaDay视图上工作正常（不要在月视图中使用它）

Answer 2

我知道这是一个老问题，但我只是做了类似的工作。接受的答案对我有所帮助，并且我设法使其变得更简单，并且认为我会分享它。

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

var renderViewColumns = function (view, element) {
  element.find('th.fc-day-header.fc-widget-header').each(function () {
    var date = moment($(this).data('date'))
    $(this).html('<span>' + date.format('ddd') + '</span><span>' + date.format('D MMM YYYY') + '</span>')
  })
 }