라이브러리

fullcalendar

현재 버전: 5.10.1 https://fullcalendar.io/

html

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
<div id="calendar"></div>

script

calendar = new FullCalendar.Calendar(document.getElementById("calendar"), {
    headerToolbar : {
        start: "prev next today",
        center: "title",
        end: ""
    },
    initialView: "dayGridMonth", // 캘린더 유형 (dayGridMonth / timeGridWeek / listWeek / dayGridWeek)
    locale:"ko",
    height:"auto",
    editable: false, // 등록한 일정 수정 가능 여부
    selectable: false, // 날짜 영역 선택 가능 여부
    dayMaxEventRows:true, // 이벤트 최대 노출 설정
    views: {
        dayGrid : {
            dayMaxEventRows:2  // dayMaxEventRows:true 일 경우 => 최대 노출 개수 설정
        }
    },
    moreLinkClick: "popover", // 더보기 클릭시 실행할 액션 설정 (popover / week / day / function)
    businessHours:true, // 주말 흑백처리 설정
    eventSources: [{
        events: function (info, success, fail) {
            $.ajax({
                url:"/assets/json/schedule.json",
                type : "get",
                dataType : "json",
                contentType: "application/json",
                beforeSend : function(xmlHttpRequest) {
                    xmlHttpRequest.setRequestHeader("AJAX","true");
                },
                success: function(data) {
                    success(data.list)
                },
                error: function(err) {
                    console.log(err);
                }
            });
        }
    }],
    dateClick: function(info) { // 날짜 클릭시 함수 설정
        console.log(info);
    },
    eventClick: function(info) { // 이벤트 클릭시 함수 설정
        console.log(info.event);
    }
});

calendar.render();

/*
    calendar.prev() // 이전 (달, 시간...) 으로 이동
    calendar.next() // 다음 (달, 시간...) 으로 이동
    calendar.gotoDate(date) // 해당 날짜로 이동
    calendar.today() : // 오늘 날짜로 이동
    calendar.refetchEvents() : // 이벤트 리로딩
*/

JSON

{
  "list" : [
    {
      "title": "test",
      "start": "2021-11-10",
      "end": "2021-11-15",
      "className": "test",
      "color": "#000"
    },{
      "title": "test2",
      "start": "2021-11-10",
      "end": "2021-11-21",
      "className": "test2",
      "color": "blue"
    },{
      "title": "test3",
      "start": "2021-11-10",
      "end": "2021-11-21",
      "className": "test3",
      "color": "purple"
    }
  ]
}