fullcalendar，columnFormat HTML

Question

我想定制columnFormat 2排和风格像这样：

尝试columnFormat：“dddMMM DS的 结果： <1iv c8/15/2016am00="1amy">Mon</1iv><1iv>Aug 10</1iv>

我怎么能定制列头像图片？由于

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 and moment 2.14.1它在basicWeek，agendaWeek，basicDay，agendaDay视图上运行OK（不要在一个月的视图中使用它）

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>') 
    }) 
}