리액트 빅 캘린더

난생처음 리액트 공부하다보니 하루종일 삽질만하는 것 같다 ㅠ 그래도 오류코드 꼼꼼하게 나와서 다행이다

오늘은 웹에서 자주 연동되는 풀캘린더를 찾아보다가 리액트 빅캘린더를 설치해보았음

 

yarn add react-big-calendar or npm install --save react-big-calendar

 

뭐이리 경고가 많이 뜨냐... 적당히 노란 워닝은 넘어감..

한번에 설치하고 바로 적용할리가 없지 일단은 이리 저리 삽질하다가 겨우겨우 소스파일 보고 적용했음..

 

// 한글 언어설정부분
import moment from 'moment'
import 'moment/locale/ko'; 
import { Calendar, Views, momentLocalizer } from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'


// 스타일시트부분

import '../vendor/libs/react-big-calendar/react-big-calendar.scss'
import 'react-big-calendar/lib/addons/dragAndDrop/styles.scss'


//세팅

const DragAndDropCalendar = withDragAndDrop(Calendar)
const allViews = Object.keys(Views).map(k => Views[k])
const localizer = momentLocalizer(moment) // or globalizeLocalizer
const NOW = new Date()



// 이벤트 
const EVENTS = [{
  id: 0,
  className: 'rbc-event-success',
  title: 'title',
  start: moment(NOW).subtract(16, 'days').toDate(),
  end: moment(NOW).subtract(16, 'days').toDate(),
  allDay: true,
}
  
  // 툴바세팅
  
  const CustomToolbar = (toolbar) => {
  return (
    <div className="d-flex flex-wrap justify-content-center justify-content-md-between align-items-center pb-4">
      <label className='text-large font-weight-light'>{toolbar.label}</label>
      <ButtonGroup size="sm" className="w-100 w-md-auto mt-3 mt-md-0">
        <Button active={toolbar.view === 'month'} onClick={() => toolbar.onView('month')}>Month</Button>
        <Button active={toolbar.view === 'week'} onClick={() => toolbar.onView('week')}>Week</Button>
        <Button active={toolbar.view === 'work_week'} onClick={() => toolbar.onView('work_week')}>Work week</Button>
        <Button active={toolbar.view === 'day'} onClick={() => toolbar.onView('day')}>Day</Button>
        <Button active={toolbar.view === 'agenda'} onClick={() => toolbar.onView('agenda')}>Agenda</Button>
      </ButtonGroup>
      <ButtonGroup size="sm" className="w-100 w-md-auto mt-2 mt-md-0">
        <Button onClick={() => toolbar.onNavigate('PREV')}><i className="ion ion-ios-arrow-back scaleX--1-rtl" /></Button>
        <Button onClick={() => toolbar.onNavigate('TODAY')}>Today</Button>
        <Button onClick={() => toolbar.onNavigate('NEXT')}><i className="ion ion-ios-arrow-forward scaleX--1-rtl" /></Button>
      </ButtonGroup>
    </div>
  )
}

 

 

 

 

 

근데 요즘은 잘 안쓰는건가.... 풀캘린더가 예제도 많고 사용하기 더 쉬움..일단 구글링하다가 리액트 함수타입은 못찾아서 그냥 클래스타입으로 예제 만들어봄..

한글까지 잘 적용된 모습.. 리액트 처음써보는데 확실히 편하긴편함... 정리가 더 잘되는 느낌....

그리고 쉬게 배울 수 있고 바로 적용가능...