2016-08-14 2 views
1

I는 다음과 같이 2 행과 스타일을 사용자 정의 columnFormat을 원하는 <1iv c8/15/2016am00="1amy">Mon</1iv><1iv>Aug 10</1iv> fullcalendar, columnFormat의 HTML은

어떻게 정의 I 수 사진처럼 columnHead? 감사합니다

답변

3

columnFormat 만 문자열을 사용하지만 당신은 viewRender에 끼어 2.9 fullcalendar,

$('#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; 
    } 
} 
이 아마에 있지만, jQuery를 3.1.0으로 향상시킬 수

https://jsfiddle.net/puhkv5qd/

가 수정할 수 있습니다. 0과 순간 2.14.1 기본 작동 OK입니다. 주간 일정, 의제, 기본 일정, 일정보기 (월보기로 사용하지 마십시오)

+0

고마워요. 너무 환상적입니다. D –

1

나는 이것이 낡은 질문이지만, 비슷한 일. 받아 들여진 응답은 저를 도왔고, 나는 그것을 더 간단하게 만들었고 그것을 공유 할 것이라고 생각했습니다.

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