CoreCalendar

Usage

기본 사용법 (단일 날짜 선택)

import { useState } from 'react';
import { CoreCalendar } from '@featuring-corp/components';

const [date, setDate] = useState<Date | null>(null);

<CoreCalendar 
  selected={date} 
  onChange={(date) => setDate(date)} 
  locale="ko" 
/>

월 선택 모드

import { useState } from 'react';
import { CoreCalendar } from '@featuring-corp/components';

const [date, setDate] = useState<Date | null>(null);

<CoreCalendar 
  selected={date} 
  onChange={(date) => setDate(date)} 
  locale="ko"
  showMonthYearPicker 
/>

날짜 범위 선택

import { useState } from 'react';
import { CoreCalendar } from '@featuring-corp/components';

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

<CoreCalendar
  startDate={startDate}
  endDate={endDate}
  locale="ko"
  selectsRange
  onChange={(dates) => {
    if (dates !== null && Array.isArray(dates)) {
      setStartDate(dates[0]);
      setEndDate(dates[1]);
    }
  }}
/>

월 범위 선택

import { useState } from 'react';
import { CoreCalendar } from '@featuring-corp/components';

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

<CoreCalendar
  startDate={startDate}
  endDate={endDate}
  locale="ko"
  selectsRange
  showMonthYearPicker
  monthsShown={2}
  onChange={(dates) => {
    if (dates !== null && Array.isArray(dates)) {
      setStartDate(dates[0]);
      setEndDate(dates[1]);
    }
  }}
/>

커스텀 Input과 함께 사용

import { useState, forwardRef } from 'react';
import { CoreCalendar } from '@featuring-corp/components';
import { CoreTextInput } from '@featuring-corp/components';
import { CoreButton } from '@featuring-corp/components';
import { IconCalendarFilled, IconChevronDownOutline } from '@featuring-corp/icons';

const [startDate, setStartDate] = useState<Date | null>(null);
const [endDate, setEndDate] = useState<Date | null>(null);
const [open, setOpen] = useState(false);

const CustomInput = forwardRef(({ value, onClick }: { value?: string; onClick?: any }, ref: any) => (
  <div
    ref={ref}
    onClick={() => {
      onClick();
      setOpen(!open);
    }}
    style={{ cursor: 'pointer' }}
  >
    <CoreTextInput
      leadingElement={<IconCalendarFilled />}
      trailingElement={<IconChevronDownOutline />}
      width="360px"
      defaultValue={value}
      style={{ cursor: 'pointer' }}
    />
  </div>
));

<CoreCalendar
  startDate={startDate}
  endDate={endDate}
  customInput={<CustomInput />}
  open={open}
  locale="ko"
  selectsRange
  inline={false}
  dateFormat="yyyy.MM.dd"
  monthsShown={2}
  elevation
  onClickOutside={() => {
    setOpen(false);
    setStartDate(null);
    setEndDate(null);
  }}
  onChange={(dates) => {
    if (dates !== null && Array.isArray(dates)) {
      setStartDate(dates[0]);
      setEndDate(dates[1]);
    }
  }}
  actionsChildren={[
    <CoreButton
      key="cancel"
      text="취소"
      buttonType="tertiary"
      onClick={() => {
        setStartDate(null);
        setEndDate(null);
        setOpen(false);
      }}
    />,
    <CoreButton
      key="apply"
      text="확인"
      buttonType="secondary"
      onClick={() => {
        setOpen(false);
        // 선택된 날짜 처리
      }}
    />,
  ]}
/>

제외할 날짜 설정

import { useState } from 'react';
import { CoreCalendar } from '@featuring-corp/components';
import { addDays, addMonths } from 'date-fns';

const [date, setDate] = useState<Date | null>(null);
const today = new Date();

// 특정 날짜 제외
const excludeDates = [
  addDays(today, -3), 
  addDays(today, 3), 
  addDays(today, 4)
];

<CoreCalendar 
  selected={date} 
  onChange={(date) => setDate(date)} 
  locale="ko"
  excludeDates={excludeDates}
/>

// 월 선택 모드에서 특정 월 제외
const excludeMonths = [
  addMonths(today, -2), 
  addMonths(today, 2)
];

<CoreCalendar 
  selected={date} 
  onChange={(date) => setDate(date)} 
  locale="ko"
  showMonthYearPicker
  excludeDates={excludeMonths}
/>

여러 달 표시

import { useState } from 'react';
import { CoreCalendar } from '@featuring-corp/components';

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

<CoreCalendar
  startDate={startDate}
  endDate={endDate}
  locale="ko"
  selectsRange
  monthsShown={2}
  onChange={(dates) => {
    if (dates !== null && Array.isArray(dates)) {
      setStartDate(dates[0]);
      setEndDate(dates[1]);
    }
  }}
/>