📅 Fullcalendar 화면에 출력하기
main에 캘린터를 보여줄거기 때문에
1. main.html 파일 생성해줍니다.
2. fullcalendar cnd 적용
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales-all.js"></script>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
밑에 넣어주세요!
3. fullcalendar 위치 지정
<div id='calendar'></div>
4. fullcalendar 출력하기
출력하기 위한 기본 스크립트를 추가
div 캘린더 보다 뒤에 추가합니다.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView : 'dayGridMonth', // 초기 로드 될때 보이는 캘린더 화면(기본 설정: 달)
headerToolbar : { // 헤더에 표시할 툴 바
start : 'prev next today',
center : 'title',
end : 'dayGridMonth,dayGridWeek,dayGridDay'
},
titleFormat : function(date) {
return date.date.year + '년 ' + (parseInt(date.date.month) + 1) + '월';
},
//initialDate: '2021-07-15', // 초기 날짜 설정 (설정하지 않으면 오늘 날짜가 보인다.)
selectable : true, // 달력 일자 드래그 설정가능
droppable : true,
editable : true,
nowIndicator: true, // 현재 시간 마크
locale: 'ko' // 한국어 설정
});
calendar.render();
});
'코딩기록 저장소 🐕 > 스스로 프로젝트와 연습' 카테고리의 다른 글
| FullCalendar 사용하기(3) 일정넣기 (0) | 2024.04.22 |
|---|---|
| FullCalendar 사용하기(2) (0) | 2024.04.20 |
| 개인프로젝트) 회원조회 (마이페이지) (0) | 2024.03.17 |
| 개인프로젝트) 회원가입화면 (0) | 2024.03.10 |
| Jasypt 설정 (application.properties) (0) | 2024.03.07 |