라이브러리
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"
}
]
}