13. 달력 라이브러리 [Full-Calendar] - 스타일링 지정하기

반응형 웹을 만들기 위해 media-query 를 사용해야한다.

 

딱 하나 걸리는 것이 바로 저 캘린더 자식이다.

 

1. 우선 DOCS 를 본다.

 https://fullcalendar.io/docs/css-customization

CSS Customization - Docs | FullCalendar

 

좋다. 알았다. 

Technique 1) Custom Properties

:root {
  --fc-border-color: black;
  --fc-daygrid-event-dot-width: 5px;
}

로, 전체 캘린더 값을 변경하거나

 

Technique 2) Overriding Properties

.fc .fc-col-header-cell-cushion {
  display: inline-block;
  padding: 2px 4px;
}

 

각각 오버라이드 해서 사용 할 수 있다.

 

https://github.com/fullcalendar/fullcalendar/blob/main/packages/core/src/styles/vars.css

GitHub - fullcalendar/fullcalendar: Full-sized drag & drop event calendar in JavaScript

에 들어가면, 지정해놓은 css 표가 있다. 활용하면 된다.

 

오케이 알았다. 근데 크기는..? 

 

 

2. 캘린더의 직접적인 크기 조정

직접적인 크기조정은 개발자도구 를 이용하여, 라이브러리의 클래스네임을 알아 낸 후, 직접 변경해주었다.

 

    @media (max-width: 1200px) {
        /* 상단 툴바 */
        .fc .fc-toolbar {
        flex-direction: column;
        }

        /* 툴바 안의 div */
        .fc .fc-toolbar div {
        margin: 0.3rem;
        }
        .demo-app {
        height: 100% !important;
        min-height: 55rem !important;
        }

        /* month 그리드, 달력 */
        .fc-scroller-harness-liquid {
        height: 100% !important;
        min-height: 30rem !important;
        }
    }

열심히 뒤적뒤적해서, 글로벌 스타일인, index.css 에 들어가서 변경해주었다.