dayCellDidMount 는 일별 셀의 DOM 객체를 추출할 수 있습니다.

특정 날짜에 배경색 또는 글자색을 변경하고 싶다면 아래 예제와 같이 조건에 따라 Color 값을 수정합니다.




예제1) 오늘 날짜에 빨간색으로 배경색을 설정하는 예제


파라미터에서 화면에 랜더링되는 모든 셀의 Date 값 및 DOM 객체 추출이 가능합니다.

info.date 시 화면에 보여지는 날짜 객체가 전부 출력됩니다.



예제) https://jsfiddle.net/6oe2xa0v/

"dayCellDidMount": function (info) {
  var today = new Date();
  //화면에 오늘 날짜가 있다면
  if (info.date.getDate() === today.getDate()) {
      info.el.style.backgroundColor = "red";
    }
},


▼ 12월 25일과 1월 1일 날짜를 빨간색으로 표시함 




예제2) 공휴일 날짜를 빨간색으로 설정하는 예제


만약 공휴일을 배열로 선언했다면 아래 예제와 같이 특정 날짜에 textColor를 변경할 수 있습니다.


예제 ) https://jsfiddle.net/wLh79sgb/


// 휴일 날짜가 있는 배열 선언
const holidays = [
    '2024-12-25', // 크리스마스
    '2025-01-01', // 새해
...
];

...
dayCellDidMount: function(info) {
    // 랜더링 되는 날짜
    var check = toStringByFormatting(info.date);
    console.log(holidays);
    for(var i = 0 ; i < holidays.length; i++) {
      // 랜더링 되는 날짜가 공휴일이면
      if(check == holidays[i]) {
      	$(info.el).find('.fc-daygrid-day-number').css('color', 'red');
      }
    }
  }


▼ 12월 25일과 1월 1일 날짜를 빨간색으로 표시함




예제3) eventSources 안에 직접 설정하기


dayCellDidMount 에서 설정하지 않고 직접 eventSources 안에 events를 정의하는 방법도 있습니다.

이 경우 아래와 같은 디자인 설정이 가능합니다.


예제 ) https://jsfiddle.net/sgf4cLkb/


  "eventSources": [
    {
      "id": "eventSource1",
     //휴일에 배경색 또는 일정 표시
      events: [
        {
          title: '크리스마스',
          start: '2024-12-25',
          display: 'background', //배경으로 표시
          color: 'yellow',
          constraint: {    // 조건 설정 가능
            daysOfWeek: [1, 2, 3, 4, 5],  //월요일 ~ 금요일
            startTime: "10:00",
            endTime: "18:00"
          }
        },
        {
          title: '신년',
          start: '2025-01-01',
          color: 'red',
        }
        // etc...
      ]
      }
  ],


▼ 12월 25일과 1월 1일에 배경색 또는 일정 표시