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 ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  businessHours: true, //업무시간외 색상 표시
      selectConstraint: { // 사용자가 클릭할 수 있는 영역 월~금으로 제한
        //startTime: '10:00',
        //endTime: '18:00',
       daysOfWeek: [ 1, 2, 3, 4, 5 ] //월~금
    },
  weekends: true, //false 시 주말 표시 안됨
  "fixedWeekCount": false,
  "height": "100%",
  "selectable": true,
  "editable": true,
  "moveMonthScrollWheel": true,
  "eventSources": [
    {
      "id": "eventSource1",
      //일정 추가 이벤트에서 공휴일에 일정등록 시 alert를 띄우고 일정등록이 되지 않음.
      eventAdd: function(eventAddInfo) {

        const clickDay = new Date(eventAddInfo.eventInputs[0].start);
        const formatting = new Intl.DateTimeFormat('en-CA').format(clickDay); // 날짜형식(yyyy-MM-dd)

        const isHoliday = holidays.some(holiday => 
             formatting === holiday);

        if(isHoliday){
          alert("오늘은 공휴일입니다.");
          eventAddInfo.events[0].remove(); // 일정 삭제
        }
      } 
    },
    {
    	//휴일에 배경색 또는 일정 표시
		  events: [
        {
          title: '크리스마스',
          start: '2024-12-25',
          display: 'background',
      		color: 'yellow',   // an option!
      		textColor: 'red',
          constraint: {
            daysOfWeek: [1, 2, 3, 4, 5],  //월요일 ~ 금요일
            startTime: "10:00",
            endTime: "18:00"
          }
        },
        {
        	title: '신년',
          start: '2025-01-01',
      		color: 'red',   // an option!
      		textColor: 'white'
        }
        // etc...
      ]
    }
  ],
  "firstDay": 0,
  dayCellDidMount: function(arg) {
    // 랜더링 되는 날짜
    var check = toStringByFormatting(arg.date);
    
    for(var i = 0 ; i < ib.init.eventSources[1]["events"].length; i++) {
    	var holyday = ib.init.eventSources[1]["events"][i]; // 공휴일이 담긴 배열
      // 랜더링 되는 날짜가 공휴일이면
      if(check == holyday.start) {
      	$(arg.el).find('.fc-daygrid-day-number').css('color', 'red');
      }
    }

  }
},
//시트 이벤트
'events':{
    eventClick:function (info) {
      info.showEventPopup();
 ...