fullCalendar 의 좌측 시분 hour minute 표기 hh:mm 형태로 변경하기

fullCalendar 의 좌측 시분 hour minute 표기 hh:mm 형태로 변경하기

 

 

fullCalendar 에서 좌측 시간별 보이는 부분은 기본적으로 아래와 같이 오전 12시~ 이런 형식으로 다국어 형태 문구로 보여 집니다. 

 

 

https://fullcalendar.io/demos

Demos | FullCalendar

 

아래와 같이 hh:mm  시분을 표현하고자 한다면, 커스터마이징을 해야겠죠.

 

 

이를 변경하기 위한 함수를 만듭니다.  moment 라이브러리를 통해 날짜형을 hh:mm 형태로 치환하는 작업을 합니다.

function TimeFix(durationInMinutes, minTime) {
    var hour = moment(minTime, "HH:mm");
    $(".fc-body .fc-slats table tr").each(function (index) {
        $(this).find("td.fc-widget-content").eq(0).html("<span>" + hour.format("HH:mm") + "</span>")
        hour.add(durationInMinutes, "minutes");
    });
}

 

viewRender 함수는 새로운 date-range (날짜 범위)가 렌더링되거나 보기 유형(view type)이 전환될 때 트리거(Triggered )됩니다. 이 callback 은 사용자가 보기를 변경하거나 날짜 탐색 메서드가 호출될 때 트리거됩니다 .

viewRender: function (view, element) {
    TimeFix(30, "08:15:00");                   
}

 

 

 

전체소스

body {
    margin: 40px 10px;
    padding: 0;
    font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
}
#calendar {
    max-width: 900px;
    margin: 0 auto;
}

$(document).ready(function () {

    function TimeFix(durationInMinutes, minTime) {
        var hora = moment(minTime, "HH:mm");
        $(".fc-body .fc-slats table tr").each(function (index) {
            $(this).find("td.fc-widget-content").eq(0).html("<span>" + hora.format("HH:mm") + "</span>")

            hora.add(durationInMinutes, "minutes");

        });
        $(".fc-widget-header th").eq($(".fc-today").index()).addClass("fc-head-today").append("<div></div>");
    }    
    
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        /*
        * BUG : BUG : minTime : "08:30:00"시간은 slotDuration 이 00:60인 경우 
            agenda week 에서 row header 가 표시되지 않지만 00:30에는 작동합니다.

        * minTime: "08:00:00" 는 작동됩니다.
        */
        minTime: "08:15:00",
        maxTime: "22:15:00",
        slotDuration: "00:30:00",
        defaultDate: '2015-02-12',
        editable: true,
        eventLimit: true, // 이벤트가 너무 많으면 "more" link 를 allow 하십시오.
        viewRender: function (view, element) {
            TimeFix(30, "08:15:00");                   
        },
        events: [{
            title: 'All Day Event',
            start: '2015-02-01'
        }, {
            title: 'Long Event',
            start: '2015-02-07',
            end: '2015-02-10'
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2015-02-09T16:00:00'
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2015-02-16T16:00:00'
        }, {
            title: 'Conference',
            start: '2015-02-11',
            end: '2015-02-13'
        }, {
            title: 'Meeting',
            start: '2015-02-12T10:30:00',
            end: '2015-02-12T12:30:00'
        }, {
            title: 'Lunch',
            start: '2015-02-12T12:00:00'
        }, {
            title: 'Meeting',
            start: '2015-02-12T14:30:00'
        }, {
            title: 'Happy Hour',
            start: '2015-02-12T17:30:00'
        }, {
            title: 'Dinner',
            start: '2015-02-12T20:00:00'
        }, {
            title: 'Birthday Party',
            start: '2015-02-13T07:00:00'
        }, {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2015-02-28'
        }]
    });

});

 

 

참고사이트

 

https://github.com/fullcalendar/fullcalendar/issues/2786

Slot time label invisible when minTime starts out of alignment · Issue #2786 · fullcalendar/fullcalendar