[javascript] FullCalendar

사용해보는 중

<div id="calendar-container">
    <div id="calendar"></div>
</div>

document.addEventListener('DOMContentLoaded', function(){
    let calendarEl = document.getElementById("calendar");
    let calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        expandRows: true,
        slotMinTime: '08:00',
        slotMaxTime: '20:00',
        headerToolbar:{
            left: 'prev',
            center: 'title',
            right: 'next'
            // 월, 주 등등
            // dayGridMonth, timeGridWeek, timeGridDay, listWeek
        },
        initialView: 'dayGridMonth',
        initialDate: '2022-01-01',
        navLinks: true, // 날짜 선택시 day 캘린더나 week 캘린더로 링크
        editable: true, // 수정가능?
        selectable: true, // 달력 일자 드래그 설정가능
        nowIndicator: true, // 현재 시간 마크
        dayMaxEvents: true, // 이벤트가 오버되면 높이 제산 (몇개정도 표현?)
        locale: 'ko', // 한국어 설정
        eventAdd: function(obj){ // 이벤트가 추가되면 발생하는 이벤트
            console.log(obj);
        },
        eventChange: function(obj){ // 수정
            console.log(obj);
        },
        eventRemove: function(obj){ // 삭제
            console.log(obj);
        },
        select: function(arg){ // 캘린더에서 드래그로 이벤트 설정
            let title = prompt("Event Title:");
            if(title){
                calendar.addEvent({
                    title: title,
                    start: arg.start,
                    end: arg.end,
                    allDay: arg.allDay
                })
            }
            calendar.unselect()
        }
    });
    calendar.render();
})

 

 

 

 

 

참고

https://fullcalendar.io/docs/initialize-globals

Initialize with Script Tags - Docs | FullCalendar

 

https://nowonbun.tistory.com/368

[Javascript] Full calendar(스케줄 달력)의 사용법