[FullCalendar] 풀캘린더(FullCalendar) 속성

풀캘린더(FullCalendar) 속성 - 1

FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 Documents를 확인해 보길 바란다.

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    // 여러 속성들
});
calendar.render();

위 코드블록에서 설명하듯이, Calendar 객체를 만들기 위해서 설정하기 위한 여러 속성들이 존재합니다. 각 속성들은 default값이 존재하기도 또는 존재하지 않기도 하는데 해당 값들에 따라서 Calendar 객체가 다양하게 만들어질 수 있다. 여러 속성들은 '// 여러 속성들'이라고 주석 표시해둔 위치에 들어가는데 가용할 수 있는 속성들 중 Demo에서 제공하고 있는 속성들 그리고 그 외 다양한 속성들을 확인해 보자.

initialView

' 캘린더가 load 될 때, 초기 보기 설정 '

캘린더가 load 될 때, 초기 보기 설정을 initialView 속성을 통해서 설정할 수 있다. 초기 보기 설정은 설정하지 않는 경우에 defualt값인 'dayGridMonth'로 설정된다. 보기 설정에는 다양한 값이 존재하는데, 'dayGridYear', 'dayGridMonth', 'dayGridWeek', 'dayGridDay', 'dayGrid', 'timeGridWeek', 'timeGridDay', 'timeGrid', 'listYear', 'listMonth', 'listWeek', 'listDay', 'list'가 사용될 수 있다. 그 외에 timeline 종류 또는 resource 종류는 기본 번들에서는 사용할 수 없다. (사용 시, 스크립트 에러발생)

기본 번들에서 사용 가능한 속성 값

종류 1) 'dayGridYear', 'dayGridMonth', 'dayGridWeek', 'dayGridDay', 'dayGrid'

종류 2) 'timeGridWeek', 'timeGridDay', 'timeGrid'

종류 3) 'listYear', 'listMonth', 'listWeek', 'listDay', 'list'

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView : 'dayGridMonth',
    });
    calendar.render();
});

총 이미지 3장 중, 왼쪽 상단 이미지는 ' dayGridYear ' 로 설정한 이미지이고, 오른쪽 상단 이미지는 ' dayGridMonth ' 로 설정한 이미지이고, 하단 이미지는 ' dayGridWeek ' 로 설장한 이미지이다. 각 속성에 다른 속성 값들을 넣을 때마다 각각 초기 설정 화면이 달라지는 걸 확인할 수 있다. dayGridYear는 현재 날짜를 기준으로 설명하자면 2024년도 1월부터 12월까지의 달력이 한꺼번에 출력된다. dayGridMonth는 2024년도 현재 달을 기준으로 1달씩 출력된다. dayGridWeek는 2024년도 해당 달의 주 단위로 출력된다.

initialDate

' 캘린더가 load 될 때, 초기 날짜 설정 '

캘린더가 load 될 때, 초기 날짜 설정을 initialDate 속성을 통해서 설정할 수 있다. 초기 날짜 설정은 설정하지 않는 경우엔, default 값에 해당하는 현재 날짜가 설정된다. 날짜 데이터는 ISO8601 인코딩으로 날짜 문자열을 포함하여 Date로 구문분석이 가능하도록 되어 있다. 문자열에 해당하는 날짜 데이터를 해당 속성 값으로 입력만 해주면 된다.

ISO8601 문자열로 출력하기

- 2024-06-17

- 2024-06-17T12:30:00

- 2024-06-17T12:30:00-14:00

밀리초 시간으로 출력하기

- 1537302134028 // Tue Sep 18 2018 16:22:14 GMT-0400

기본 Javascript 날짜로 출력하기

- new Date(2024,6,10)

- new Date(Date.UTC(2024,6,10))

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        timeZone : 'local',
        initialDate : '2024-08-01'
        // initialDate : '2024-08-01'
        // initialDate : '2024-08-01'
        // initialDate : 1537302134028 // Tue Sep 18 2018 16:22:14
        // initialDate : new Date(2019, 10, 1)
        // initialDate : new Date(Date.UTC(2024, 10, 10))
    });
    calendar.render();
});

ISO8601 문자열로 출력 시, '2024-06-17'과 같은 문자열은 허용되지만 '20240617'과 같은 문자열은 허용되지 않는다. 기본적인 timeZone은 사용자가 사용 중인 운영체제 설정에 따라 결정되는 기본 시간대인 'local'로 설정된다. 이는 '현지' 시간대로 간주된다.

headerToolbar

' 달력 상단의 버튼과 제목을 정의 '

headerToolbar 속성은 달력 상단의 버튼과 제목을 정의할 때 사용한다. 해당 설정의 default는 'false'이다. false로 비활성화되어 있는 경우에는 헤더 도구 모음이 표시되지 않는다. 객체는 속성 start/center/end 또는 left/center/right와 함께 제공될 수 있다.

headerToolbar 속성의 값을 'false'로 비활성화할 때

var calendar = new FullCalendar.Calendar(calendarEl, {
	headerToolbar: false
});

headerToolbar 속성의 값을 false로 설정할 시, 상단 도구 모음 자체가 나타나지 않는다.

headerToolbar 속성을 설정하지 않았을 때

var calendar = new FullCalendar.Calendar(calendarEl, {
	// headerToolbar 속성 설정하지 않음
});

headerToolbar 속성 자체를 설정하지 않았을 때, 상단 도구 모음 자체의 배치와 형태가 위와 같이 나타난다.

headerToolbar 속성의 값을 설정할 때

var calendar = new FullCalendar.Calendar(calendarEl, {
	headerToolbar: {
		left: 'prev,next today',
		center: 'title',
		right: 'dayGridMonth,timeGridWeek,timeGridDay'
	}
});

titleFormat

' headerToolbar의 제목에 표시될 텍스트를 설정 '

headerToolbar 옵션을 설정하면 'title'에 해당하는 날짜 텍스트를 출력하게 되는데 날짜 텍스트를 어떤 형식으로 출력할지를 결정할 수 있다. titleFormat을 이용하여 년, 월, 일을 다양한 형식의 폼으로 맞춰서 출력할 수 있는데 'year', 'month', 'day', 'weekday' 속성을 활용하면 년/월/일을 설정할 수 있다.

속성	값	출력 예
year	numeric	'2024'
year	2-digit	'24'
month	long	'September'
	short	'Sep'
	narrow	'S'
	numeric	'1'
	2-digit	'01'
day	numeric	'3'
day	2-digit	'03'
weekday	long	'Wednesday'
	short	'Wed'
	narrow	'W'
hour	numeric	'5'
hour	2-digit	'05'
minute	numeric	'6'
minute	2-digit	'06'
second	numeric	'9'
second	2-digit	'09'
hour12	true	12시간제
hour12	false	24시간제
timeZoneName	short	'long'은 FullCalendar에서 제공 X

위 표에서 나타나듯이 각 속성에 해당 속성 값을 이용하여 내가 원하는 출력 형태의 텍스트로 'title'의 형태를 변경하여 출력할 수 있다. 기존 default로 제공되는 title을 이용해도 무방하지만 자기만의 title을 만들 때 유용할 것이다.

var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    views: {
        dayGridMonth: {
            titleFormat: {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            }
        }
    }
});

'title'에 나타나고 있는 날짜 형식의 문자열을 속성과 속성 값들을 이용하여 출력도 가능하지만, Moment JS와 같은 플러그인을 이용해도 훨씬 간단하게 출력할 수 있다. 그리고 'titleFormat' 속성에 function을 지정해 직접 서식 지정도 가능하다.

footerToolbar

' 달력 상단의 버튼과 제목을 정의 '

footerToolbar 속성은 달력 하단의 컨트롤을 정의할 때 사용한다. 해당 설정은 headerToolbar 옵션과 동일한 값들을 허용하는데 설정 방법은 headerToolbar와 동일하다. 해당 설정의 default는 'false'이다. false로 비활성화되어 있는 경우에는 푸터에 도구 모음이 표시되지 않는다.(달력 아래에 컨트롤이 랜더링 되지 않음을 의미)

var calendar = new FullCalendar.Calendar(calendarEl, {
    footerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    }
});

footerToolbar 속성을 설정하면 달력 하단의 도구 모음이 설정된다.

buttonText

' headerToolbar, footerToolbar의 버튼에 표시될 텍스트 '

headerToolbar, footerToolbar에서 버튼에 표시될 텍스트를 설정합니다. 'today', 'month', 'week', 'day', 'list' 버튼의 텍스트는 default 값으로 속성명과 동일하다( 'today', 'month', 'week', 'day', 'list' ). 버튼명을 변경하고자 할 때에는 'buttonText' 속성을 이용하여 버튼명을 변경할 수 있다.

var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay',
    },
    buttonText: {
        today : '현재날짜',
        month : '월',
        week: '주',
        day: '일',
        list: '목록'
    }
});

themeSystem

' 주어진 테마 시스템으로 달력을 랜더링 '

themeSystem 속성은 FullCalendar에 기본 CSS를 이용하여 달력 디자인 형태를 설정하거나 BootStrap을 이용하여 달력 디자인 형태를 설정할 수 있다. BootStrap4와 BootStrap5 버전 두 개 중 한 가지를 선택하여 설정할 수 있다. themeSystem 속성은 'standard'가 default값이고, 'bootstrap', 'bootstrap5' 두 개의 속성값이 존재한다.

BootStrap5 버전으로 달력 디자인을 설정하기 위해서는 관련 CSS와 JS가 필요하다. 상단에 link태그를 활용하여 CSS를 추가하고 하단에는 script태그를 활용하여 JS를 추가한다.

부트스트랩 5 관련 CSS와 부트스트랩 Icon관련 CSS를 추가

<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>

부트스트랩5 관련 JS를 추가

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.14/index.global.min.js"></script>

var calendar = new FullCalendar.Calendar(calendarEl, {
    themeSystem: 'bootstrap5',	// BootStrap5 버전으로 디자인 설정
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay',
    },
    buttonText: {
        today : '현재날짜',
        month : '월',
        week: '주',
        day: '일',
        list: '목록'
    },
    events: 'https://fullcalendar.io/api/demo-feeds/events.json'
});

부트스트랩 관련 CSS와 JS를 활용하여 FullCalendar JS themeSystem을 부트스트랩5 버전의 달력 디자인으로 설정한다. 기존 검은색으로 디자인되어 있던 버튼들의 색깔과 디자인이 부트스트랩 기본 primary 종류의 색깔과 디자인으로 변경된 것을 확인할 수 있다.

height

' 머리글과 바닥글을 포함한 전체 달력의 높이를 설정 '

height 설정을 통해서 FullCalendar JS 달력 높이를 설정할 수 있다. 기본 default는 'auto'이면서 CSS값 100%이다. div태그에 설정된 id속성 'calendar'에 출력되는 캘린더 크기는 100%이므로 화면 가득 차있는 모습이다. 기본적으로 해당 옵션이 설정되어 있지 않으면 달력의 높이는 'AspectRatio'에 의해 계산된다. 정수가 지정되면 달력의 높이는 정확한 픽셀 높이가 보정된다. 내용이 높이에 맞지 않으면 스크롤바가 나타난다.

var calendar = new FullCalendar.Calendar(calendarEl, {
    height: 650,
    events: 'https://fullcalendar.io/api/demo-feeds/events.json'
});

contentHeight

' 달력의 보기 영역 높이를 설정 '

contentHeight 속성은 달력의 보기 영역 높이를 설정한다. 일정이 출력되고 일정 바가 출력되는 일정 body부분의 높이가 설정된다. 기본적으로 해당 옵션의 default는 'auto'이다. 해당 옵션은 설정되어 있지 않고 달력의 높이는 'AspectRatio'에 의해 계산된다. 정수가 지정되면 뷰의 높이가 정확한 픽셀 높이로 보장되고 내용이 높이에 맞지 않으면 스크롤바가 나타난다.

var calendar = new FullCalendar.Calendar(calendarEl, {
    height: 300,
    contentHeight: 100,
    events: 'https://fullcalendar.io/api/demo-feeds/events.json'
});

전체 높이를 300으로 설정하고 내용 별 높이를 100으로 설정하였다. 내용 별 높이를 다 합쳤을 때 전체 높이 300을 넘기 때문에 세로 형태의 스크롤바가 자동 생성된다.

FullCalendar JS를 소개하는 내용은, FullCalendar 공식 홈페이지에 내용을 적극 참고하여 작성된 글임을 명시합니다. 모든 내용은 공식 홈페이지 메인 내용 및 Documents를 기반으로 작성하였습니다.

@Junesker

저작자표시

'OPEN SOURCE > FullCalendar' 카테고리의 다른 글

[FullCalendar] 풀캘린더(FullCalendar) 속성 - 2 (0)	2024.06.24
[FullCalendar] 풀캘린더(FullCalendar) 만들기 / 기본 풀캘린더 사용방법 (2)	2024.06.14
[FullCalendar] 풀캘린더(FullCalendar)란? (2)	2024.06.13

배워서 남주자

노력을 이기는 재능은 없고
노력을 외면하는 결과도 없다.
- 이창호 9단

[FullCalendar] 풀캘린더(FullCalendar) 속성 - 1

initialView

initialDate

headerToolbar

titleFormat

footerToolbar

buttonText

themeSystem

height

contentHeight

'OPEN SOURCE > FullCalendar' 카테고리의 다른 글

댓글

티스토리툴바

노력을 이기는 재능은 없고노력을 외면하는 결과도 없다. - 이창호 9단

[FullCalendar] 풀캘린더(FullCalendar) 속성 - 1

initialView

initialDate

headerToolbar

titleFormat

footerToolbar

buttonText

themeSystem

height

contentHeight

'OPEN SOURCE > FullCalendar' 카테고리의 다른 글

관련글

댓글

티스토리툴바

노력을 이기는 재능은 없고
노력을 외면하는 결과도 없다.
- 이창호 9단