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는 월간 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
'OPEN SOURCE > FullCalendar' 카테고리의 다른 글
| [FullCalendar] 풀캘린더(FullCalendar) 속성 - 2 (0) | 2024.06.24 |
|---|---|
| [FullCalendar] 풀캘린더(FullCalendar) 속성 - 1 (0) | 2024.06.17 |
| [FullCalendar] 풀캘린더(FullCalendar) 만들기 / 기본 풀캘린더 사용방법 (2) | 2024.06.14 |
댓글