ふたりで

fullcalendar eventClick background-color change 본문

Other

fullcalendar eventClick background-color change

graykang 2020. 2. 21. 10:47
728x90
반응형
SMALL

달력에 등록된 이벤트 제목을 클릭 시 해당 div의 백그라운드 색을 바꾼다.

다른 이벤트 제목을 클릭 시 기존 이벤트 제목에 백그란운드색을 투명 처리한다.

var calendarEl = document.getElementById('mycalendar'); 

var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid'], 
        header: { 
            left: 'datePickerButton, today, prev title next',

            right: 'month' 
        }, 
         eventPositioned: function(info){
            //console.log("info of an event**strong text**",info); 
              $(".fc-event-container").on('click', 'div', function (e) { 
                  $('.area').css("background-color", '#FFFFFF'); //기존 이벤트제목 배경색 투명처리.
                  $(this).addClass('area');//배경색을 입힐 타겟 지정용 클래스명 삽입.
                  $(this).css("background-color", '#F3F781'); 현재 클릭된 요소의 배경색 변경처리.
                }); 
         },

});   
728x90
반응형
LIST
Comments