(React + typescript) 📃FullCalendar 사용

FullCalendar

• 이벤트 및 일정을 표시하고 관리하는  라이브러리
•  FullCalendar를 사용하면 월별, 주별, 일별로 일정을 시각적으로 표현 가능

필요 기능들과 관련 문서들이 친절하게 잘 나와있어서 한 번쯤 사용해도 좋을 것 같다..!! 정말 편해,,

 

FullCalendar를 이용한 캘린더

 

캘린더 뷰 사용법

<FullCalendar
    ref={this.calendarRef}
    plugins={[dayGridPlugin]}
    initialView={'dayGridMonth'}
    headerToolbar={{
      start: 'title',
      end: 'prev,next',
    }}
  />

 

1. ref={this.calendarRef}

    캘린더에 일정을 추가하기 위해 사용한 코드다.

    그냥 간단하게  events={일정} 넣어도 된다.  이게 더 쉬울지도ㅎㅎ

const Events = [{ title: '전과신청', start: '2024-01-15',end:'2024-01-19', color:'#b1aee5'}];

 

    위와 같은 형식으로 일정을 넣을 수 있고, background-color도 추가 가능하다

2. plugins={[dayGridPlugin]}

   FullCalendar에 사용할 플러그인을 설정

  월별, 주별, 일별 사용 가능하지만 나는 일간 뷰만 사용할거기 때문에 dayGridPlugin만 사용하였다.

3. initialView={[dayGridPlugin]}

   캘린더 초기 화면에 표시할 뷰를 설정합니다. 여기서는 월간 뷰를 설정

4. headerToolbar

  캘린더 헤더에 표시할 요소들을 설정

  타이틀과  이전 달, 다음 달 버튼을 표시하도록 설정하였다

 

https://fullcalendar.io/

FullCalendar - JavaScript Event Calendar

여기에 있는 문서들을 참고하면 쉽게 따라해볼 수 있다