API/FullCalendar

FullCalendar ListView 목록보기에서의 fc-list-title 접근 도중 fc-list-empty 제거

유혁스쿨 2022. 1. 4. 18:31
728x90
반응형

 

ListView.prototype.render = function () {
    var _this = this;
    var _a = this, props = _a.props, context = _a.context;
    var extraClassNames = [
        'fc-list',
        context.theme.getClass('table'),
        context.options.stickyHeaderDates !== false ? 'fc-list-sticky' : '',
    ];
    var _b = this.computeDateVars(props.dateProfile), dayDates = _b.dayDates, dayRanges = _b.dayRanges;
    var eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
    /*return (createElement(ViewRoot, { viewSpec: context.viewSpec, elRef: this.setRootEl }, function (rootElRef, classNames) { return (createElement("div", { ref: rootElRef, className: extraClassNames.concat(classNames).join(' ') },
        createElement(Scroller, { liquid: !props.isHeightAuto, overflowX: props.isHeightAuto ? 'visible' : 'hidden', overflowY: props.isHeightAuto ? 'visible' : 'auto' }, eventSegs.length > 0 ?
            _this.renderSegList(eventSegs, dayDates) :
            _this.renderEmptyMessage()))); }));*/
    //목록보기 기능 제어
    return (createElement(ViewRoot, { viewSpec: context.viewSpec, elRef: this.setRootEl }, function (rootElRef, classNames) { return (createElement("div", { ref: rootElRef, className: extraClassNames.concat(classNames).join(' ') },
        createElement(Scroller, { liquid: !props.isHeightAuto, overflowX: props.isHeightAuto ? 'visible' : 'hidden', overflowY: props.isHeightAuto ? 'visible' : 'auto' },  _this.renderSegList(eventSegs, dayDates)))); }));
};

코드를 잘 읽어보면 3항 다항식을 통해 리스트의 이벤트 데이터에 대한 목록 길이가 0보다 크다는 조건하에 renderSegList 메소드와 renderEmptyMessage 메소드중 조건에 맞도록 실행시킨다.

 

여기서 renderEmptyMessage 메소드는 fc-list-empty 를 생성시킨다.

 

 fc-list-title 클래스에 접근하는 과정에서 데이터가 들어있으나  fc-list-table클래스 다음으로 오는 fc-list-empty 클래스로 인해 클래스 접근이 막힌다.

 

분명 데이터가 있는데 jQuery children으로 접근시 다음 요소에 접근하지 못하고 fc-list-empty가 생성되어버린다.

데이터가 있다면 fc-list-empty는 없어야 정상이다.

 

위의 코드와 같이 수정한다면 이벤트 데이터가 없는 월에는 아무런 메시지조차 뜨지 않는다.

접근은 가능해졌지만 코드를 더 커스텀 해야 할 필요가 있다.

728x90
반응형