FullCalendar 이벤트 옵션 - 속성 동적접근 / (Month,List 동일적용 )색상 변경

이벤트가 지니고있는 데이터 중 api 사용자가 임의로 데이터 컬러를 동적으로 컨트롤 하는 경우가 생긴다.

, eventDidMount: function(info) {				
}

eventDidMount : 함수형 옵션을 활용하여 설정한다.

function의 매개변수 info에 접근하여 event에 대한 정보를 가질 수 있다.

, eventDidMount: function(info) {				
    var title = info.event.title;
    var start = info.event.start;
    var end = info.event.end;
    console.log(title,start,end);
}

start, end, title과 같이 default 속성은 모두  info.event에서 직접 접근이 가능하지만

만약 event객체에 임의로 추가한 속성들은 모두 extendedProps를 통해 접근해야만 접근이 가능해진다.

, eventDidMount: function(info) {				
	var status = info.event.extendedProps.status;
    console.log(status);
}

 

 

,events : [{
                id : '1'
                ,title : '가나다라마바사'
                ,start : '2022-01-22'
                ,end : '2022-01-24'
                , status: ''
            }
			, {
                id : '2'
                , title : '01월 01일-02일'
                , start : '2022-01-01'
                , end : '2022-01-03'
                , content:'메롱메롱'
                , pValue: 'public'
                , status: 'done'
			}
]
, eventDidMount: function(info) {				
	var gColor = 'lightGreen';
	var bColor = 'lightBlue';
	if (info.event.extendedProps.status == 'done') {
		info.el.style.backgroundColor = gColor;
	} else if(info.event.extendedProps.status == '') {
		info.el.style.backgroundColor = bColor;
	}		
}