IB Sheet 8 Examples

IBCalendar 의 기본 및 고급 기능 사용 예제

HTML

<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/css/style.css">
<!-- ibcalendar css -->
<link rel="stylesheet" href="https://www.ibsheet.com/v8/ibcalendar/assets/ibcalendar/css/dependency.css"/>
<link rel="stylesheet" href="https://www.ibsheet.com/v8/ibcalendar/assets/ibcalendar/css/material.css"/>

<script
  src="https://code.jquery.com/jquery-3.7.0.js"
  integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
  crossorigin="anonymous"></script>

<!--  ibcalendar 필수 js -->
<script src="https://www.ibsheet.com/v8/ibcalendar/assets/ibsheet/ibleaders.js"></script>
<script src="https://www.ibsheet.com/v8/ibcalendar/assets/ibcalendar/dependency.min.js"></script>
<script src="https://www.ibsheet.com/v8/ibcalendar/assets/ibcalendar/ibcalendar.min.js"></script>
<script src="https://www.ibsheet.com/v8/ibcalendar/assets/ibcalendar/locale/ko.js"></script>

<div style='height:calc(100% - 20px)'><div id='calendarDiv' style='width:100%;'></div></div>

CSS

a{text-decoration:none;color:#4444FF;}

JavaScript

var holidays = [
    '2024-12-25', // 크리스마스
    '2025-01-01', // 새해
];

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  
  "fixedWeekCount": false,
  "height": "100%",
  "selectable": true,
  "editable": true,
  "moveMonthScrollWheel": true,
  "eventSources": [
    {
      "id": "eventSource1"
      }
  ],
  dayCellDidMount: function(arg) {
    // 랜더링 되는 날짜
    var check = toStringByFormatting(arg.date);
    
    for(var i = 0 ; i < holidays.length; i++) {
      // 랜더링 되는 날짜가 공휴일이면
      if(check == holidays[i]) {
      	$(arg.el).find('.fc-daygrid-day-number').css('color', 'red');
      }
    }

  }
},
//시트 이벤트
'events':{
    eventClick:function (info) {
      info.showEventPopup();
    },
    datesSet: function(info) {
    }
},
//시트객체 생성
'create':function () {
        var options = this.init;
        
       //ptions.eventSources[0].events = this.data;
        
        for (var props in this.events) {
            options[props] = this.events[props];
        }

        IBCalendar.create(
            "cal1",
            document.getElementById("calendarDiv"),
            options
        ).render();
    },
//화면 기능
'sampleBtn':function () {
    },
//조회 데이터
'data':[]
}
ib.create();
// 외부 함수

function leftPad(value) {
    if (value >= 10) {
        return value;
    }

    return `0${value}`;
}

function toStringByFormatting(source, delimiter = '-') {
    const year = source.getFullYear();
    const month = leftPad(source.getMonth() + 1);
    const day = leftPad(source.getDate());

    return [year, month, day].join(delimiter);
}