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