fullcalendar, columnFormat html

问题

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

回答1:

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)

回答2:

I know this is an old question, however I've just had to do a similar task. The accepted answer helped me and I've managed to make it simpler and thought I'd share it.

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

来源：https://stackoverflow.com/questions/38945482/fullcalendar-columnformat-html

标签

javascript

fullcalendar