[JavaScript]Fullcalendar Cell 클릭 시 이벤트 (함수)

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

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

Release v3.10.2 · fullcalendar/fullcalendar

먼저 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 () {
	//소스 코딩
});

 

 

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