Portfolio

달력 라이브러리 결정 ant design calendar tui react calendar 요약 페이지 후기 작성 분석 페이지 관련

달력 라이브러리 결정

ant design calendar

모바일 버전의 경우 다음과 같은 형태

height 조절 아마도 불가능

글씨가 안보이는 문제

fullscreen={false}

숫자만 출력되는 형태라서 글씨, 뱃지입력 불가능

뱃지의 타입 상관 없이 변경 가능

"blue" | "pink" | "red" | "yellow" | "orange" | "cyan" | "green"| "purple" | "geekblue" | "magenta" | "volcano" | "gold" | "lime"
<Badge status={item.type} text={item.content} color={item.color} />

루틴 데이터의 형태


// date에 맞게 switch문으로 넣어주는 형태 
switch (value.date()) {
      case 8:
        listData = [
          { type: 'warning', content: 'This is warning event.' },
          { type: 'success', content: 'This is usual event.' },
        ];
        break;
      case 10:
        listData = [
          { type: 'warning', content: 'This is warning event.' },
          { type: 'success', content: 'This is usual event.' },
          { type: 'error', content: 'This is error event.' },
        ];
        break;
      case 15:
        listData = [
          { type: 'warning', content: 'This is warning event' },
          { type: 'success', content: 'This is very long usual event。。....' },
          { type: 'error', content: 'This is error event 1.' },
          { type: 'error', content: 'This is error event 2.' },
          { type: 'error', content: 'This is error event 3.' },
          { type: 'error', content: 'This is error event 4.' },
        ];
        break;
      default:
    }

moment js가 우려되는 경우 다른 날짜 라이브러리로 변경 가능

Replace Moment.js - Ant Design

You might want to replace Moment.js with another date library (Ant design currently supports and ) to reduce bundle size. We provide two ways to customize:

https://ant.design/docs/react/replace-moment#Calendar

참고 사이트

Calendar - Ant Design

Container for displaying data in calendar form.

https://ant.design/components/calendar/#API

Notice Calendar - antd@4.18.2

Notice Calendar - antd@4.18.2 using @ant-design/icons, antd, react, react-dom, react-scripts

https://codesandbox.io/s/6kohi?file=/index.js

tui react calendar

react v^16.3.0 에서 사용 가능

현재 YAS의 경우 react v^17.0.2

따로 모바일 버전이 존재하지는 않지만 다음과 같은 형태로 width, height 줄여서 사용 가능

글씨가 안보이는 문제

날짜 안의 루틴 데이터의 경우 다음과 같은 형태로 구성 필요


schedules={[
          {
            calendarId: '1',
            category: 'time',
            isVisible: true,
            title: '코딩 공부하기',
            id: '1',
            body: 'Test',
          },
          {
            calendarId: '2',
            category: 'time',
            isVisible: true,
            title: '운동하기',
            id: '2',
            body: 'Description',
          },
]}

뱃지 색깔 및 팝업창의 경우 style 설정


calendars={[
          {
            id: '1',
            name: 'My Calendar',
            color: '#ffffff',
            bgColor: '#9e5fff', // popup창 배경 컬러
            dragBgColor: '#9e5fff', // 드래그 시 컬러
            borderColor: '#9e5fff', // 뱃지 컬러
          },
          {
            id: '2',
            name: 'Company',
            color: '#ffffff',
            bgColor: '#00a9ff',
            dragBgColor: '#00a9ff',
            borderColor: '#00a9ff',
          },
]}

이전, 다음달, 오늘 날짜 이동의 경우 useRef 사용


const calRef = useRef();
  const handleTodayClick = () => {
    const calInstance = calRef.current.getInstance();
    calInstance.today();
  };
  const handleNextClick = () => {
    const calInstance = calRef.current.getInstance();
    calInstance.next();
  };
  const handlePrevClick = () => {
    const calInstance = calRef.current.getInstance();
    calInstance.prev();
  };

<button onClick={handleTodayClick}>Today</button>
<button onClick={handlePrevClick}>이전 달</button>
<button onClick={handleNextClick}>다음 달</button>