IB Sheet 8 Examples

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

HTML

<link rel="stylesheet" href="https://demo.ibsheet.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"/>

<!--  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 ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  "showLunar": false,
  "businessHours": false,
  "weekNumbers": false,
  "dayMaxEventRows": false,
  "weekends": false,
  "fixedWeekCount": false,
  "height": "100%",
  "selectable": true,
  "editable": true,
  "moveMonthScrollWheel": false,
"eventSources": [
  {
    id: "eventSource1",
    eventAdd: function(eventAddInfo) {
      var startDate = new Date(eventAddInfo.eventInputs[0].start);
      var endDate = new Date(eventAddInfo.eventInputs[0].end);
      var evtId = eventAddInfo.eventInputs[0].id;
      //당일 86400000(24시간)
      //이틀 172800000(48시간)
      //삼일  259200000 (36시간)

      if(endDate-startDate > 172800000){
        alert("일정은 하루간격으로만 설정 가능합니다.");
        eventAddInfo.events[0].remove(); // 일정 삭제
      }else{
        //ajax 통신으로 날짜 저장
        console.log("날짜저장");
        /*$.ajax(
      {
        "url": "https://www.ibsheet.com",
        "method": "POST",
        "async": false,
        "contentType": "application/json",
        "dataType": "json",
        "data": JSON.stringify({
        events: eventAddInfo.eventInputs,
      }),
      "success": function (data, status, xhr) {
      },
        "error": function (xhr, status, errorThrown) {
          console.log(status);
        }
  }
  );*/
      }
    }
  }

  ]
},
//시트 이벤트
'events':{
    eventClick:function (info) {
            info.showEventPopup();
        }
},
//시트객체 생성
'create':function () {
        var options = this.init;
        
        options.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':[{"id":"event1","title":"All Day Event","start":"2024-08-01","memo":"TEST","color":"#ad1457"},{"id":"event2","title":"Long...