// 캘린더 생성
fcCalendar = new FullCalendar.Calendar(elCalendar, {
//구글 캘린더 API키 입력
googleCalendarApiKey: "",
//캘린더 뷰 월 캘린더
initialView: 'dayGridMonth',
//한국어 설정
locale: 'ko',
height: "100%",
//버튼별 기능
customButtons: {
customPrevY: { // 이전 연도로 이동
icon: 'fc-icon-chevrons-left',
click: function() {
fcCalendar.prevYear();
}
},
customPrev: { // 이전 달로 이동
icon: 'fc-icon-chevron-left',
click: function() {
fcCalendar.prev();
}
},
customToday: { // 오늘 날짜로 이동
text: 'Today',
click: function() {
fcCalendar.today();
}
},
customNext: { // 다음 월로 이동
icon: 'fc-icon-chevron-right',
click: function() {
fcCalendar.next();
}
},
customNextY: { // 다음 연도로 이동
icon: 'fc-icon-chevrons-right',
click: function() {
fcCalendar.nextYear();
}
}
},
headerToolbar: { // 캘린더 헤더 툴바 설정
//왼쪽툴바 설정
left: 'customPrevY,customPrev,customToday,customNext,customNextY',
center: 'title',
//오른쪽 툴바 설정
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
//달력에 그려줄 일정 값 등록 fullCalendar events 생성
events: [
{
title: '회의',
start: '2022-04-01',
backgroundColor: '#8B0000',
borderColor:'#8B0000'
},
{
title: '휴가',
start: '2022-04-07',
end: '2022-04-10',
backgroundColor: '#008404',
borderColor:'#008404'
}],
//이런식으로 작성
//속성
// start = 시작일자
// end = 종료일자
// backgroundColor
// borderColor 색상
// allDay 바 설정 true false
// title = 제목
allDaySlot: true,
dayMaxEvents: true, // 최대 이벤트 개수
displayEventTime: false, // 이벤트에 시간 표시 여부
//공휴일 데이터 추가
// eventSources: [{ // 구글 캘린더 API 키를 발급받은 경우 공휴일 데이터 추가
// googleCalendarId: "",
// backgroundColor: "transparent",
// borderColor: "transparent",
// className: "kr-holiday",
// textColor: "red"
// }],
editable: true,
//droppable을 사용할때 droppable true 드롭이벤트
droppable: true,
dateClick: function(info) {
//날짜 클릭 시 발생할 이벤트
//info에서 console 찍어보면 편함
},
eventClick: function(info) {
// 일정 클릭 시 발생할 이벤트
//클릭한 일정 Id
var id = info.event._def.defId;
},
drop: function(info) {
//드래그 드롭 후 이벤트
},
eventDrop: function(info) {
},
eventResize: function(info) {
//일정 크기를 변경했을떄 이벤트
}
});
// 캘린더를 그려준다.
fcCalendar.render();
}
// 캘린더 드래그 이벤트 등록
// 그리드에서 셀 드래그를 위한 정보 등록 fullCalendar Drag
var containerElGrid = document.querySelector(".cl-grid");
//
new FullCalendar.Draggable(containerElGrid, {
//드래그하는 아이템
itemSelector: ".cl-grid-cell",
eventData: function(eventEl) {
//드래그 이벤트시 그리드 셀 > 풀캘린더 생성시
var title = eventEl.querySelector(".cl-text").innerText;
//이벤트 생성 하는것처럼 해주면된다
return {
title: title,
backgroundColor: bgColor,
borderColor : bgColor
//create.false > 드래그하나 실제로는 그리지않음
}
}
});
//캘린더 삭제방법
//기존 이벤트 삭제 (일정 삭제)
fcCalendar.removeAllEvents
// *fcCalendar = 생성한 캘린더 명
//removeAllEvents로 등록된 일정을 모두 지우거나
dateClick: function(info) {
var id = info.event._def.defId; ////클릭한 일정 Id
fcCalendar.getEvents().forEach(function(evt) {
if (evt._def.defId == id) evt.remove();
});
}
//이런식으로 일정 클릭이벤트에서 이벤트 아이디를 비교해서 삭제하는 방법도 있다
Documentation | FullCalendar
fullcalendar.io
풀캘린더 가서 예제보는게 이해 빠름
https://codepen.io/pen?&editors=001
Create a New Pen
...
codepen.io
코드도 다 나옴