calendar-in-react v1.0.5

calendar-in-react

calendar-in-react 라이브러리는 리액트에서 달력을 보다 쉽고 간편하게 다룰 수 있는 컴포넌트를 제공합니다.

스토리북에서도 각각의 컴포넌트에 대한 여러 스토리를 확인할 수 있습니다.

설치

$ npm install calendar-in-react

또는

$ yarn add calendar-in-react

Calendar Component

사용법

1. year, month 업데이트하기

달력의 year, month를 업데이트 하기 위해 onChangeCalendar props를 사용합니다. onChangeCalendar props은 달력의 year과 month을 매개변수로 받는 함수로 달력의 year과 month가 바뀔 때 호출됩니다.

받아온 year과 month를 상태로 만들고 해당 상태를 다시 Calendar 컴포넌트로 전달하세요.

import { Calendar } from 'calendar-in-react';
import { useState } from 'react';

function App() {
  const [year, setYear] = useState(2023);
  const [month, setMonth] = useState(11);

  return (
    <Calendar
      year={year}
      month={month}
      onChangeCalendar={(year, month) => {
        setYear(year);
        setMonth(month);
      }}
    ></Calendar>
  );
}

export default App;

1. 달력의 버튼(좌우 버튼, 오늘 버튼, 네이게이션)을 클릭하면 onChangeCalendar props로 전달한 함수가 호출됩니다.
2. 해당 함수에서 달력의 year, month를 받아올 수 있습니다.
3. 달력의 year, month를 바탕으로 부모 컴포넌트의 상태를 업데이트하고 이를 다시 Calendar 컴포넌트의 year, month에 전달하세요.

위와 같이 설계한 이유는 달력의 year, month을 바탕으로 외부에서 data fetching을 하기 위함입니다.

2. Calendar 컴포넌트 외부에서 데이터 주입하기

일정, 투두리스트와 같은 데이터를 달력에 렌더링을 하려면 Calendar.Item 컴포넌트를 Calendar 컴포넌트 자식으로 전달하세요.

import { Calendar } from 'calendar-in-react';
import { useEffect, useState } from 'react';

type Schedule = {
  id: number;
  title: string;
  date: string; // 날짜를 나타내는 속성이 꼭 있어야 합니다.
};

function App() {
  const [year, setYear] = useState(2023);
  const [month, setMonth] = useState(11);

  const [schedules, setSchedules] = useState<Schedule | null>(null);

  const scheduleFetching = async () => {
    const response = await fetch(`/schedule?year=${year}&month=${month}`);
    const data = await response.json();

    setSchedules(data);
  };

  useEffect(() => {
    scheduleFetching();
  }, []);

  return (
    <Calendar
      year={year}
      month={month}
      onChangeCalendar={(year, month) => {
        setYear(year);
        setMonth(month);
      }}
    >
      {schedules.map((schedule) => (
        <Calendar.Item key={schedule.id} date={new Date(schedule.date)}>
          {schedule.title}
        </Calendar.Item>
      ))}
    </Calendar>
  );
}

export default App;

이때, 주의해야할 점은 fetching으로 가져온 Data에 Date 즉, 날짜를 나타내는 속성이 있어야 합니다. 해당 속성을 Calendar.Item 컴포넌트의 date 속성으로 넘겨주어야 하기 때문입니다. date 속성의 타입은 Date입니다.

3. Data 다루기

Calendar 컴포넌트에 렌더링된 Data를 다루기 위한 여러 속성이 있습니다. 예시를 통해 살펴보겠습니다.

// ...

function App() {
  // ..

  return (
    <Calendar
      year={year}
      month={month}
      onChangeCalendar={(year, month) => {
        setYear(year);
        setMonth(month);
      }}
      limitedDataCount={3} // 1
      onClickRestDataCount={(date) => console.log(date)} // 2
    >
      {schedules.map((schedule) => (
        <Calendar.Item
          key={schedule.id}
          date={new Date(schedule.date)}
          onClickCalendarItem={(date) => console.log(date)} // 3
        >
          {schedule.title}
        </Calendar.Item>
      ))}
    </Calendar>
  );
}

export default App;

1. limitedDataCount: Data의 개수를 제한하는 속성입니다. 나머지 Data의 개수는 각 Day의 우측 상단에 표시됩니다.
2. onClickRestDataCount: 나머지 Data의 개수를 클릭할 때 호출되는 함수입니다.
3. onClickCalendarItem: Calendar Item를 클릭했을 때 호출되는 함수입니다.

다음은 다른 예시입니다.

// ...

function App() {
  // ..

  return (
    <Calendar
      year={year}
      month={month}
      onChangeCalendar={(year, month) => {
        setYear(year);
        setMonth(month);
      }}
      formatChangedWidth={700} // 1
      onClickTotalDataCount={(date) => console.log(date)} // 2
    >
      {schedules.map((schedule) => (
        <Calendar.Item key={schedule.id} date={new Date(schedule.date)}>
          {schedule.title}
        </Calendar.Item>
      ))}
    </Calendar>
  );
}

export default App;

1. formatChangedWidth: 달력에 렌더링 되는 Data 형식이 바뀌는 기준 너비를 지정하는 속성입니다. 지정된 값보다 달력의 너비가 줄어들면 Data의 전체 개수가 렌더링됩니다.
2. onClickTotalDataCount: formatChangedWidth 속성의 값보다 달력의 너비가 줄어들었을 때, 전체 Data의 개수를 클릭할 때 호출되는 함수입니다.

마지막은 데이터 로딩 될 때의 예시입니다.

// ...

function App() {
  // ..

  return (
    <Calendar
      year={year}
      month={month}
      onChangeCalendar={(year, month) => {
        setYear(year);
        setMonth(month);
      }}
      dataLoading={true} // 1
    >
      {schedules.map((schedule) => (
        <Calendar.Item key={schedule.id} date={new Date(schedule.date)}>
          {schedule.title}
        </Calendar.Item>
      ))}
    </Calendar>
  );
}

export default App;

1. dataLoading: 달력에 렌더링되는 Data의 로딩 상태를 지정하는 속성입니다.

전체 Props

Calendar Component

Calendar.Item Component

DatePicker Component

사용법

1. startDate, endDate 가져오기

DatePicker 컴포넌트에서 startDate, endDate를 가져오기 위해 onChangeDate 속성을 사용하세요.

import { DatePicker } from 'calendar-in-react';
import { useState } from 'react';

function App() {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  return (
    <DatePicker
      startDate={startDate}
      endDate={endDate}
      onChangeDate={(start, end) => {
        setStartDate(start);
        setEndDate(end);
        if (start && end) alert(`${start} ~ ${end}`);
      }}
    />
  );
}

export default App;

선택된 두 개의 date는 onChangeDate 속성으로 전달된 함수의 매개변수로 받을 수 있습니다.

2. 하나의 Date만 선택하기

하나의 Date만 선택하기 위해 isOnlyOneDay 속성을 true로 하세요.

import { DatePicker } from 'calendar-in-react';
import { useState } from 'react';

function App() {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  return (
    <DatePicker
      startDate={startDate}
      onChangeDate={(start, end) => {
        console.log(start); // Date
        console.log(end); // null
      }}
    />
  );
}

export default App;

isOnlyOneDay 속성이 true 라면 onChangeDate 속성으로 전달된 함수의 두 번째 매개변수의 값은 항상 null 입니다. 또한 endDate 속성은 무시됩니다.

3. ConfirmButton, CancelButton

달력 하단에 두 개의 버튼(ConfirmButton, CancelButton)을 활성하기 위해 showButtons 속성을 true로 하세요.

import { DatePicker } from 'calendar-in-react';
import { useState } from 'react';

function App() {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  return (
    <DatePicker
      startDate={startDate}
      endDate={endDate}
      showButtons={true}
      onClickConfirm={(start, end) => {
        console.log(start); // Date
        console.log(end); // Date
      }} // 1
      onClickCancel={() => alert('취소했습니다.')} // 2
    />
  );
}

export default App;

1. onClickConfirm: 확인 버튼을 클릭했을 때 호출되는 함수입니다.
2. onClickCancel: 취소 버튼을 클릭했을 때 호출되는 함수입니다.

4. 두 개의 달력으로 DatePicker 사용하기

두 개의 달력을 렌더링하기 위해 mode 속성을 double 로 하세요.

import { DatePicker } from 'calendar-in-react';
import { useState } from 'react';

function App() {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  return (
    <DatePicker
      startDate={startDate}
      endDate={endDate}
      mode="double"
      onChangeDate={(start, end) => {
        setStartDate(start);
        setEndDate(end);
        if (start && end) alert(`${start} ~ ${end}`);
      }}
    />
  );
}

export default App;

전체 Props

DatePicker Component