fullcalendar，columnFormat html [英] fullcalendar, columnFormat html

问题描述

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

尝试使用columnFormat:"dddMMM dS"结果:< 1iv c8/15/2016am00 ="1amy">星期一</1iv>< 1iv>八月10</1iv>

我如何像图片一样自定义columnHead?谢谢

解决方案

columnFormat只接受一个字符串，但是您可以将其挂入viewRender并在那里进行修改

  $('#calendar').fullCalendar({defaultView:'agendaWeek'，viewRender:renderViewColumns});函数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));});函数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);返回容器；}} 

https://jsfiddle.net/puhkv5qd/

这可能会有所改进，但是使用jQuery 3.1.0，fullcalendar 2.9.0和2.14.1时，它在basicWeek，agendaWeek，basicDay，adidasDay视图上工作正常(不要在月视图上使用)

I want custom columnFormat to 2 row and style it like this:

try to columnFormat: 'dddMMM dS' result: <1iv c8/15/2016am00="1amy">Mon</1iv><1iv>Aug 10</1iv>

How could I custom the columnHead like the pic? Thanks

解决方案

The columnFormat only takes a string but you can hook into the viewRender and modify it there

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

This can probably be improved upon but with jQuery 3.1.0, fullcalendar 2.9.0 and moment 2.14.1 it's working OK on basicWeek, agendaWeek, basicDay, agendaDay views (don't use it on a month view)

这篇关于fullcalendar，columnFormat html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！