[FullCalendar] 풀캘린더(FullCalendar)란?

FullCalendar - 자바스크립트 기반 오픈소스 라이브러리

 

 

 

 

 

FullCalendar란?

---

FullCalendar JS는 'The Most Popular Javascript Calendar', 자바스크립트 기반 오픈소스 라이브러리로 일정관리 기능을 구현할 때 많이들 이용하게되는 라이브러리이다. FullCalendar JS가 없었다면 Calendar 자체를 Date객체 정보를 이용해서 직접 구현하고 각 날짜별 데이터를 핸들링해서 일정을 등록/수정/삭제 및 관리 해야할 것 입니다.

FullCalendar JS는 그런 불편함들의 needs를 충분히 커버하고 있을만큼 기능적으로도 프로세스적으로도 잘 구성되어 있다고 생각된다. FullCalendar JS 라이브러리를 등록 후, 관련 HTML코드와 스크립트 구문 몇줄만 등록하면 예쁘고 잘 만들어진 달력이 출력된다.

날짜를 클릭하는 이벤트, 등록된 날짜별 일정바를 드래그 앤 드랍이벤트, 리사이즈 등등 다양한 이벤트를 제공하고 있어서 만들고자 하는 일정관리 기능 측면에서 다양하게 활용할 수 있다는 장점이 있다.

 

 

 

 

 

Open Source

---

FullCalendar JS는 10년이 넘는 오픈소스와 120명이 넘는 기여자를 보유하고 있습니다. FullCalendar JS는 항상 무료 오픈 소스 코어를 보유하고 있고, 유료 라이센스도 함께 보유하고 있어 기본/프리미엄/OEM 상품으로 라이센스 및 서비스, 기술지원을 제공하고 있습니다. 라이센스는 FullCalendar Standard와 FullCalendar Premium 둘 중 어느것을 사용하는지에 따라서 달라집니다. 

 

# FullCalendar 표준
프리미엄이 아닌 플러그인과 FullCalendar 번들은 MIT 라이센스에 따라 릴리즈됩니다. 이 라이센스는 모든 저작권 헤더가 보존된다는 가정하게 상업용 프로젝트에서의 무료 사용을 포함하여 광범위한 사용을 허용합니다.
MIT 라이센스 계약서

# FullCalendar 프리미엄
프리미엄이 플러그인과 FullCalendar-Schedular 번들은 라이센스가 더 복잡합니다. 라이센스는 사용 유형에 따라 다릅니다.

[ FullCalendar Licence ]

 

 

 

 

 

 

Usage

---

 

FullCalendar JS Usage

FullCalendar JS는 월간 200만 이상의 NPM 다운로드, 월별 7000만 이상 CDN 다운로드, GitHub 17,000개 이상의 스타게이저 등 많은 사용량을 가지고 있고 아마존, 우버, 넷플릭스, 페이팔, 야후, 시스코, 나사, 삼성 등 우리가 알만한 대기업에서 해당 서비스를 이용하고 있다. 그 중 한국사람인지라 유일한 한국 기업 삼성이 자리하고 있는걸 확인할 수 있다. (삼성의 로고가 일부 고객으로 들어있는것도 신기했는데, 역시 삼성! 글로벌 기업 답네요.)

 

 

 

 

 

Powerful

---

FullCalendar JS는 300개 이상의 설정과 매 릴리즈마다 더 많은 설정이 추가되어 있어 모든 작업을 수행할 수 있습니다.

번호	Documentation
1	Getting Started	Introduction, Premium Plugins, Date Library
2	Overall Display	Toolbar, Theme, Sizing
3	Views	Month, TimeGrid, List, DayGrid, Multi-Month Stack, Multi-Month Grid, Timeline, Vertical Resource, Custom Views, View API
4	Date & Time	Date & Time Display, Date Navigation, Date Nav Links, Week Numbers, Date Clicking & Selecting, Now Indicator, Business Hours
5	Events	Event Model, Event Sources, Event Display, Event Clicking & Hovering, Event Dragging & Resizing, Event Popover, Background Events
6	Resources	Resource Data, Resource Display
7	International	Locale, Time Zone
8	Third Party	TypeScript, React, Vue, Angular, Web Component
9	Accessibility	Accessibility, Touch Support, Optimizing for Print

 

 

 

 

 

LigntWeight

---

FullCalendar의 모듈형 플러그인을 사용할수 있습니다.

번호	Plugin Name	Functionality / Views	Linence
1	@fullcalendar/core	- 핵심 class를 제공합니다.
2	@fullcalendar/interaction	- dateClick, selectable, event drag&drop, resizing - click, mouseEnter, mouseLeave event에는 사용되지 않는다.
3	@fullcalendar/daygrid	- 월별 DayGrid 보기 제공 - dayGridYear, dayGridMonth, dayGridWeek, dayGridDay, dayGrid
4	@fullcalendar/timegrid	- TimeGrid 보기 제공 - timeGridWeek, timeGridDay, timeGrid
5	@fullcalendar/list	- 오퍼 목록 보기 제공 - listYear, listMonth, listWeek, listDay, list
6	@fullcalendar/multimonth	- 여러 달 보기 제공 - multiMonthYear, multiMonth
7	@fullcalendar/scrollgrid	- 특정 보기에 대한 가로 스크롤과 같은 고급 스크롤 기능 제공
8	@fullcalendar/timeline	- 리소스 지원 없이 타임라인 보기 제공 - timelineYear, timelineMonth, timelineWeek, timelineDay, timeline	Premium
9	@fullcalendar/adaptive	- 향상된 인쇄 지원을 제공합니다. - 인쇄 시, 깨지지 않는 향상된 UI 제공	Premium
10	@fullcalendar/resource	- 리소스에 대한 기본 지원을 제공 - 모든 리소스 관련 플러그인에 필요	Premium
11	@fullcalendar/resource-daygrid	- 리소스가 활성회된 DayGrid 보기 제공 - resourceDayGridMonth, resourceDayGridWeek, resourceDayGridDay, resourceDayGrid	Premium
12	@fullcalendar/resource-timegrid	- 리소스 지원 TimeGrid 보기 제공 - resourceTimeGridWeek, resourceTimeGridDay, resourceTimeGrid	Premium
13	@fullcalendar/resource-timeline	- 리소스 지원 TimeGrid 보기 제공 - resourceTimelineYear, resourceTimelineMonth, resourceTimelineWeek,  resourceTimelineDay, resourceTimeline	Premium
14	@fullcalendar/bootstrap5	- Bootstarp5 테마 제공
15	@fullcalendar/bootstrap	- Bootstarp4 테마 제공
16	@fullcalendar/google-calendar	- [공개] Google 캘린더 피드에서 이벤트를 로드하는 경우
17	@fullcalendar/icalendar	- iCalendar 피드에서 이벤트를 로드하는 경우
18	@fullcalendar/rrule	- 이벤트 재발을 위해 RRule 라이브러리를 활용
19	@fullcalendar/luxon2	- 명명된 시간대 구현, 형식 지정 문자열 구현 및 Luxon Date Times로 변환ㄴ하기 위한 유틸리티 제공
20	@fullcalendar/luxon	- Luxon v1을 지원
21	@fullcalendar/moment	- Moment 객체로 변환하기 위한 형식화 문자열 구현 및 유틸리티 제공
22	@fullcalendar/moment-timezone	- 명명된 시간대 구현을 제공
23	@fullcalendar/react	- React 구성 요소를 제공
24	@fullcalendar/vue3	- Vue3 구성 요소를 제공
25	@fullcalendar/vue	- Vue2 구성 요소를 제공
26	@fullcalendar/angular	- Angular 구성 요소를 제공

 

 

 

 

 

SuperCharged

---

FullCalendar JS는 총 3가지의 상품을 제공하고 있습니다. 무료로 사용할 수 있는 기본 상품이 있고, 1년동안 개발자 1명이 사용할 수 있는 ＄480 프리미엄 상품과 기업 맞춤형 상품인 OEM이 있습니다.

 

라이센스 및 지원

	기준	프리미엄	OEM
라이센스 조건	MIT 라이센스	주식 상용 라이센스	사용자정의 가능한 라이선스 조건
개발자 수		1-10	제한 없는
이메일 지원		매월 2장의 티켓	제한 없는
응답 시간		48시간	24시간
소스 코드 편집	프리미엄이 아닌 기능만	전체 권한	전체 권한
복구	프리미엄이 아닌 기능만	최소화된 재배포	전체 재배포

 

특징

	기준	프리미엄	OEM
수백 가지 표준 기능	ν	ν	ν
React/Vue/Angular용 커넥터	ν	ν	ν
타임라인 보기		ν	ν
수직적 자원 보기		ν	ν
프린터 친화적인 렌더링		ν	ν

 

 

 

 

 

---

FullCalendar JS 공식 홈페이지에서 제공하는 Documents를 전체적으로 정독하면서 전보다 더 많은 기능들이 추가된것 같다. 그리고, FullCalendar JS에 다른 JS 라이브러리를 붙여서도 사용 가능하기 때문에 더 많은 기능들을 만들기 좋을 것 같다. 

 

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

 

 

 

 

 

@Junesker

---