[Fullcalendar] 라이브러리 이용해서 달력 만들기, 사용법 정리

FullCalendar

---

달력 기능을 구현할 때 많이들 사용하는 라이브러리로 간단하게 소개 및 사용법을 정리하고자 합니다. 포스팅의 모든 내용은 공식 홈페이지에서 확인할 수 있으며, 단순 정리와 어떻게 사용했는지에 대한 내용을 정리 용도로 작성하겠습니다.

js로 달력을 만들기 위해 fullcalendar를 사용할 것이며 아래의 공식 링크에서 보다 자세한 사용법을 알 수 있습니다.

FullCalendar - JavaScript Event Calendar

 

How to Use

---

공식 사이트 사용법 보러가기

See the Pen Untitled by 정재준 (@ihistdxo-the-builder) on CodePen.

위와 같이 html에 스크립트로 해당 라이브러리를 선언 후 js에서 생성만 해주면 바로 나타나게 됩니다. FullCalendar는 정말 많은 기능을 제공하고 있고 커스터 마이징까지 가능하기에 조금 더 정리하도록 하겠습니다.

 

See the Pen calendar_init by 정재준 (@ihistdxo-the-builder) on CodePen.

이렇게 클릭 이벤트 정의, toolbar의 위치 및 요소 정의 등 옵션에 따라 출력되는 결과가 다르다는 걸 알수있습니다. 

 

다음은 커스텀 입니다.

See the Pen Untitled by 정재준 (@ihistdxo-the-builder) on CodePen.

위 처럼 일반 div가 아닌 i태그를 사용하고 싶다든지 따로 커스텀이 필요할 경우 사용하면 좋습니다. 

 

더 자세한 내용은 공식 사이트에서 확인 바랍니다.

Documentation | FullCalendar