FullCalendar <tr class="fc-list-event-title"> 접근 불가능 main.js 커스터마이징

tbody에는 접근이 가능하지만 아직도 그 하위의 fc-list-event-title클래스명을 갖는 tr태그에는 접근이 되지 않는다.

 

구현된 renderSegList 함수에서 코드를 수정한다.

public renderSegList(allSegs, datDates) {
            var _a = this.context, theme = _a.theme, options = _a.options;
            var _b = this.state, timeHeaderId = _b.timeHeaderId, eventHeaderId = _b.eventHeaderId, dateHeaderIdRoot = _b.dateHeaderIdRoot;
            var segsByDay = groupSegsByDay(allSegs); 
            return (createElement(NowTimer, { unit: "day" }, function (nowDate, todayRange) {
			
                var innerNodes = [];
				
                for (var dayIndex = 0; dayIndex < segsByDay.length; dayIndex += 1) {
					var daySegs = segsByDay[dayIndex];
                    if (daySegs) { 
                        var dayStr = formatDayString(dayDates[dayIndex]);
                        var dateHeaderId = dateHeaderIdRoot + '-' + dayStr;
                        innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
                        daySegs = sortEventSegs(daySegs, options.eventOrder);
                        for (var _i = 0, daySegs_1 = daySegs; _i < daySegs_1.length; _i++) {
                            var seg = daySegs_1[_i];
                            innerNodes.push(createElement(ListViewEventRow, __assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId }, getSegMeta(seg, todayRange, nowDate))));
                        }
                    }
                }
				
                return (
                          createElement("table", { className: 'fc-list-table ' + theme.getClass('table') }
                        , createElement("thead", null
                        , createElement("tr", null
                        , createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint)
                        , createElement("th", { scope: "col", "aria-hidden": true })
                        , createElement("th", { scope: "col", id: eventHeaderId }, options.eventHint)))
                        , createElement("tbody", null, innerNodes))
                );
            }));
        }

return (
          createElement("table", { className: 'fc-list-table ' + theme.getClass('table') }
        , createElement("thead", null
        , createElement("tr", null
        , createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint)
        , createElement("th", { scope: "col", "aria-hidden": true })
        , createElement("th", { scope: "col", id: eventHeaderId }, options.eventHint)))
        , createElement("tbody", null, innerNodes))
);

위의 코드를

 

return (
        createElement("table", { className: 'fc-list-table' + theme.getClass('table') }
        , createElement("tbody", { className: "fc-list-tbody"}, innerNodes))
);

이렇게 변경한다.

 

thead테이블이 제거되지만 현재 구현상으로는 문제되지 않을것으로 예상한다.

 

 

변경 완료된 renderSegList코드이다.

public renderSegList(allSegs, datDates) {
            var _a = this.context, theme = _a.theme, options = _a.options;
            var _b = this.state, timeHeaderId = _b.timeHeaderId, eventHeaderId = _b.eventHeaderId, dateHeaderIdRoot = _b.dateHeaderIdRoot;
            var segsByDay = groupSegsByDay(allSegs); 
            return (createElement(NowTimer, { unit: "day" }, function (nowDate, todayRange) {
			
                var innerNodes = [];
				
                for (var dayIndex = 0; dayIndex < segsByDay.length; dayIndex += 1) {
					var daySegs = segsByDay[dayIndex];
                    if (daySegs) { 
                        var dayStr = formatDayString(dayDates[dayIndex]);
                        var dateHeaderId = dateHeaderIdRoot + '-' + dayStr;
                        innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
                        daySegs = sortEventSegs(daySegs, options.eventOrder);
                        for (var _i = 0, daySegs_1 = daySegs; _i < daySegs_1.length; _i++) {
                            var seg = daySegs_1[_i];
                            innerNodes.push(createElement(ListViewEventRow, __assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId }, getSegMeta(seg, todayRange, nowDate))));
                        }
                    }
                }
				
                return (
                          createElement("table", { className: 'fc-list-table' + theme.getClass('table') }
                        , createElement("tbody", { className: "fc-list-tbody"}, innerNodes))
                );
            }));
        }

 

 

var objTest = $("#frmM1 #calendar").children("div.fc-view-harness.fc-view-harness-active")
               .children("div").children("div").find(".fc-list-table").children("tbody");
		
		console.log(objTest);
		
		for(var i=0; i < objTest.length; i++) {
			console.log(objTest[i]);
		}
		
		objTest.each(function(i, v){
			console.log(v);
			
		});

위 스크립트 코드 실행시 이전까지 <tbody class="fc-list-event-tbody"><tbody> 와 같은 형태로만 출력되던 부분이

<tbody class="fc-list-event-tbody">...</tbody> 형태로 콘솔에 출력되는것을 확인할 수 있다.

<tbody>태그의 내부에 들어있는 6개의 <tr>태그를 들여다 볼 수 있게된다.

 

but 문제점 발생 : 적용이 되었다 안되었다 한다.

현재 문제 파악중..

 

fullCalendar 커스터마이징 테스트中....