IB Sheet 8 Examples

일정 추가 / 수정 / 삭제

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>

JavaScript

var ib = ib||{};
ib = {
  //시트 초기화 구문
  'init':{
    "height": "100%",
    "dayMaxEventRows": true,
    "selectable": true,
    "editable": true,
    "moveMonthScrollWheel": false,
    "eventSources": [
      {
        "id": "eventSource1"
      }
    ]
  },
  //시트 이벤트
  'events':{
    eventClick:function (info) {
      info.showEventPopup();
    },
    eventDrop: function(eventDropInfo) {
      //빨간색으로 추가된 일정은 옮기지 않게 한다.
      if(eventDropInfo.event._def.ui.backgroundColor == "#d50000"){
        eventDropInfo.revert();
      }
    }
  },
  //시트객체 생성
  '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":"2025-02-01","memo":"TEST","color":"#ad1457"},{"id":"event2","title":"Long Event","start":"2025-02-07","end":"2025-02-10","color":"#3f51b5"},{"id":"event3","title":"Group Event","groupId":"group1","start":"2025-02-12T16:00:00.000+09:00","color":"#f09300"},{"id":"event4","title":"Group Event","roupId":"group1","start":"2025-02-19T16:00:00.000+09:00","color":"#795548"},{"id":"event5","title":"Conference","start":"2025-02-21","end":"2025-02-23","color":"#d50000"},{"id":"event6","title":"Meeting","start":"2025-02-22T10:30:00.000+09:00","end":"2025-02-22T12:30:00.000+09:00","color":"#039be5"},{"id":"event7","title":"Lunch","start":"2025-02-22T12:00:00.000+09:00","color":"#33b679"},{"id":"event8","title":"Birthday Party","start":"2025-02-23T19:00:00.000+09:00","color":"#4285f4"},{"id":"event9","title":"Click Event for...