공휴일 표시

공휴일의 경우 별도로 설정해줘야 합니다.

공휴일을 설정 및 표시하는 방법은 여러가지 방법이 있습니다.


 

1-1) addEvent

단순히 공휴일을 추가하여 사용하실 경우 addEvent를 사용하여 테두리를 붉은색으로 사용하시는 방법이 있습니다.


//단일 공휴일 등록 예시
IBCalendar.get("cal1").addEvent({
          title: "임시공휴일",
          start: "2024-01-02",
          end: "2024-01-02",
          color: "red",
          allDay: true
        }, "eventSource1");


1-2) eventSources > events

또는 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일에 배경색 또는 일정 표시


callback함수로는 datesSet이 있으며, 해당 함수로는 최초 로딩 시, 그리고 달 이동 시와 같이 calendar를 다시 그리게 될 때 호출됩니다.

해당 함수에 대한 상세한 사항은 메뉴얼을 참조하여 주시기 바랍니다.


1-3) dayCellDidMount

화면에 각 날짜별 화면에 그린 후(td tag 닫힌 후) 동작하는 dayCellDidMount을 이용하는 방법이 있습니다.


시트 내의 api를 이용해도 각 셀의 날짜의 글자색을 변경할 수 없지만, 위의 dayCellDidMount를 이용하여 셀이 생성될 때 마다 내부 객체로 접근하여 스타일을 변경하여 날짜의 글자색을 변경하실 수 있습니다.


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


  dayCellDidMount: function(arg) {
    var check = toStringByFormatting(arg.date);
    var date = new Date(); //오늘
    date.setDate(date.getDate() + 1);
    var dayafter = toStringByFormatting(date); //내일
    date.setDate(date.getDate() + 1);
    var dayafter2 = toStringByFormatting(date); //모래
    
    if(check == dayafter || check == dayafter2) {
      $(arg.el).find('.fc-daygrid-day-number').css('color', 'red');
    }
  }


▼ 오늘 날짜로부터 내일, 모레에 글자색 빨간색 표시함




dayCellDidMount에 대한 다양한 예제는 아래 링크를 참조해주세요.

  > 특정 일의 배경색 또는 글자색을 다르게 하고 싶다.