메인-프로젝트/React - Do-Health 프로젝트
13. 달력 라이브러리 [Full-Calendar] - 스타일링 지정하기
이게뭐당가
2023. 1. 4. 17:15
반응형 웹을 만들기 위해 media-query 를 사용해야한다.
딱 하나 걸리는 것이 바로 저 캘린더 자식이다.
1. 우선 DOCS 를 본다.
좋다. 알았다.
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
Full-sized drag & drop event calendar in JavaScript - GitHub - fullcalendar/fullcalendar: Full-sized drag & drop event calendar in JavaScript
github.com
에 들어가면, 지정해놓은 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;
}
}