개발자.. 너란놈..

[2021.05.07]

※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 

현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

기본 FullCalendar.js를 사용하는 경우 api를 수정 시켜주어야 합니다.

v3 FullCalendar.js에서 'Toolbar.prototype.updateTitle' 를 검색하여 수정하여야 합니다. 

아래와 같이 수정하면 월/년 -> 년/월으로 수정 할 수있습니다.

Toolbar.prototype.updateTitle = function (text) {
        if (this.el) {          
        	
            //추가 yyyy년 mm
            var vMonthDate = text.substring(3,8)+"년 "+text.substring(0,3);                        
            
            this.el.find('h2').text(vMonthDate);
        }
    };

[2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

처음에 생성된 fullcalendar는 삭제하고, 재 생성 해주는 것으로 다시 그려줄 수 있습니다.

//기존 FullCalendar 삭제
$('#calendar').fullCalendar('destroy'); //달력 삭제

//FullCalendar 달력 재 생성
$('#calendar').fullCalendar({  // 달력 재 생성
    height: 700,
    header: {
      //center: 'prev,title,next', 여기에 select 값을 보내서 달력 이동 할 수 있게.
      left: null,
      center: 'title',
      right: null
    },
    defaultDate: "YYYYMMDD", //20200101 숫자가 들어가야됩니다. 
    editable: true,
    eventLimit: true,
    monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
    monthNamesShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
    dayNames: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
    dayNamesShort: ["일", "월", "화", "수", "목", "금", "토"],
    buttonText: {
      today: "오늘",
      month: "월별",
      week: "주별",
      day: "일별"
	}
});

[2021.05.07][2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

먼저 FullCanlendar는 처음에 생성 될 때 옵션 값들을 넣어서 설정하는 것으로 달력을 html 해서 그려줍니다.

저는 Cell 클릭시 새로운 영역을 보여주기를 원했고, 설정에서는 어떻게 사용해야 되는지를 알 수 없어서 API를 뜯었습니다.

DayTableMixin.prototype.renderBgCellHtml로 api를 검색하여 Cell이 그려질 때 마다 Onclick 이벤트의 함수를 넣어서 사용 할 수 있게 하였습니다.

DayTableMixin.prototype.renderBgCellHtml = function (date, otherAttrs) {
        var t = this;
        var view = t.view;
        var isDateValid = t.dateProfile.activeUnzonedRange.containsDate(date); 
        var classes = t.getDayClasses(date);
        classes.unshift('fc-day', view.calendar.theme.getClass('widgetContent'));
        
        //※ td에 Onclick 이벤트를 주었습니다.
        return '<td class="' + classes.join(' ') + '" onclic="Test()"  ' + 
            (isDateValid ?
                ' data-date="' + date.format('YYYY-MM-DD') + '"' : 
                '') +
            (otherAttrs ?
                ' ' + otherAttrs :
                '') +
            '>' +         
			'</td>';
    };

td의 onclick 이벤트를 주어서 클릭 할 때마다 원하는 함수를 사용 할 수 있게 만들었습니다.

name이나 class로 데이터를 넣는다면 아래와 같이 이벤트를 할 수 있을 것 같습니다. (이것은 해보지는 않았습니다.)

※새롭게 생성되는 html일 경우 아래와 같이 사용 하여야 이벤트를 잡을 수 있습니다.

$(document).on("click","생성된 클래스 or 네임",function () {
	//소스 코딩
});

질문이 있으시면 댓글로 남겨주세요~

[2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

현재 날짜 이전의 년도 및 월을 검색 하고 싶지 않을때는 아래와 같이 써주면 됩니다.

//YYYYMM
if($('#calendar').fullCalendar('getDate').format('YYYYMM') == YYYY + MM){
	$(".fc-prev-button").prop('disabled', true); 
}

주의할 점

※calendar를 생성 시켜준 다음에 적용 하셔야 됩니다.

[2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

  $('#calendar').fullCalendar({
        header: {            
            //center: 'prev,title,next', 여기에 select 값을 보내서 달력 이동 할 수 있게.
            right : null
        },
        defaultDate: yyyymmdd, //yyyymmdd 날짜를 입력 하여야 합니다.
        editable: true,
        eventLimit: true,
        monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        monthNamesShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        dayNames: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
        dayNamesShort: ["일", "월", "화", "수", "목", "금", "토"],
        buttonText: {
            today: "오늘",
            month: "월별",
            week: "주별",
            day: "일별"
        },
        events:
        [
                {
                    id: "A",
                    title: 'My Event',
                    start: '2016-05-29',
                    description: 'This is a cool event'
                }
        ],
        eventRender: function (event, element) {
            if (event.A) {
                alert("A입니다.");
            } else if (event.B) {
                alert("B입니다.");
            }
        }
  });

[2021.05.07]

fullcalendar는 월 , 년 순으로 되어있습니다.

데이터를 이동 시키기 위해서는 아래의 함수인 gotoDate를 사용하여 달력을 이동 시킬 수 있습니다.

$('#calendar').fullCalendar('gotoDate', new Date(yyyy + '-' + mm + '-01'));

yyyy의 년도

mm의 월을 입력하면 원하는 해당 년도와 월로 이동 시킬 수 있습니다.