[FullCalendar v6] 02. Toolbar 설정 (headerToolbar, footerToolbar), 한국어 설정 (locale)
2023.02.06 - [FullCalendar v6] 01. 시작하기
[FullCalendar v6] 01. 시작하기
웹 캘린더 라이브러리 중 하나인 FullCalendar를 시작해보자. 나는 간단하게 script 태그를 사용할 것이다. (React, Vue, Angular, Typescript 모두 지원한다.) FullCalendar 공식 홈페이지에 들어가면 처음 셋팅하
my-bapberi.tistory.com
FullCalendar는 타이틀, 상단과 하단에 기본 제공하는 button들이 있고
추가로 custom 버튼도 배치할 수 있다.
headerToolbar (footerToolbar)
title, prev, next, prevYear, nextYear, today, viewMode 버튼 등등
위치에 따라 설정할 수 있다.
default 값은 아래와 같다. (footerToolbar는 빈 값!)
{
start: 'title', // will normally be on the left. if RTL, will be on the right
center: '',
end: 'today prev,next' // will normally be on the right. if RTL, will be on the left
}
여기에 prevYear, nextYear 그리고 다른 달력 뷰로 전환하는 버튼도 추가해보자.
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "dayGridMonth",
headerToolbar: {
start: "dayGridMonth,timeGridWeek,listWeek,dayGridWeek,multiMonthYear",
center: "title",
end: "prevYear,prev,next,nextYear",
},
});
calendar.render();
});
결과는?
왼쪽의 버튼들을 클릭하면 달력의 뷰모드가 바뀐다.
음.. 영어인게 신경쓰인다.
한글로 바꿔보자!
index.html 에 언어팩(?) 스크립트 태그를 추가해주고
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.1/index.global.min.js"></script>
// 여기
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.1/locales/ko.global.js"></script>
//
<script src="./index.js"></script>
</head>
index.js에서 언어를 설정해준다.
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
start: "dayGridMonth,timeGridWeek,listWeek,dayGridWeek,multiMonthYear",
center: "title",
end: "prevYear,prev,next,nextYear",
},
initialView: "dayGridMonth",
locale: "ko", // 여기
});
셋팅하고 새로고침 하면~
엥 .. 아래 day 부분도 "일"이 붙어버렸다.
이건 나중에 제거해 보도록 하자.
+ today 버튼을 깜빡해서 넣어줬다.
customButtons
이번엔 [일정 등록] 이라는 커스텀 버튼을 추가해보자.
일정등록 버튼을 좌상단에 배치하기 위해, 달력 뷰를 바꾸는 버튼들을 footerToolbar로 이동시킨다.
var calendar = new FullCalendar.Calendar(calendarEl, {
footerToolbar: {
start: "dayGridMonth,timeGridWeek,listWeek,dayGridWeek,multiMonthYear",
center: "",
end: "",
},
headerToolbar: {
start: "",
center: "title",
end: "today prevYear,prev,next,nextYear",
},
...
});
그 담에 커스텀 버튼 [일정 등록]을 좌상단에 추가한다.
var calendar = new FullCalendar.Calendar(calendarEl, {
customButtons: {
addSchedule: {
text: "일정 등록",
click: function () {
alert("일정 등록 하세요!");
},
},
},
...
headerToolbar: {
start: "addSchedule",
center: "title",
end: "today prevYear,prev,next,nextYear",
},
...
});
클릭하면 alert도 잘 작동한다.
이번 편 끝.