[JavaScript] Full-calendar 커스텀하기

full-calendar 이전 포스팅

https://stickode.tistory.com/484

[JavaScript] Full-calendar 사용하기

안녕하세요. Full-calendar 사용하기에 이어 커스텀을 한 번 해보겠습니다.

 

1. 캘린더 상단 June 2022 => 2022년 6월

2. 일요일 시작 => 월요일 시작

3. 토요일, 일요일 색깔 각각 파란색, 빨간색으로

 

위 세 가지를 해보겠습니다.

 

 

fullcalendar.js

const calendarEl = document.getElementById("calendar"); //캘린더를 넣어줄 html div

let calendar;

calendar_rendering();

function calendar_rendering() {
  calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    firstDay: 1,
    titleFormat: function (date) {
      year = date.date.year;
      month = date.date.month + 1;

      return year + "년 " + month + "월";
    },
  });
  calendar.render();
}

firstDay: 1 => 월요일부터 시작한다는 의미입니다.

titleFormat: 부분이 2022년 6월로 표시하는 것입니다.

 

 

fullcalendar.css

/* 일요일 날짜 빨간색 */
.fc-day-sun a {
  color: red;
  text-decoration: none;
}

/* 토요일 날짜 파란색 */
.fc-day-sat a {
  color: blue;
  text-decoration: none;
}

토요일 날짜와 일요일 날짜 색깔을 바꾸는 방법입니다.

css 파일 작성 후 php 파일에 스크립트 참조 코드를 넣어주세요.

 

<link rel="stylesheet" href="fullcalendar.css">

 

 

 

완성된 모습입니다.