135 lines
3.7 KiB
TypeScript
135 lines
3.7 KiB
TypeScript
import moment, { locale } from 'moment';
|
|
import styled from "styled-components";
|
|
import { useState } from 'react';
|
|
import Calendar from 'react-calendar';
|
|
import 'react-calendar/dist/Calendar.css';
|
|
import { useEffect } from 'react';
|
|
import { CalendarType } from '@/entities/common/model/types';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface NiceCalendarProps {
|
|
calendarOpen: boolean;
|
|
setCalendarOpen: (calendarOpen: boolean) => void;
|
|
startMonth?: string;
|
|
endMonth?: string;
|
|
singleMonth?: string;
|
|
calendarType: CalendarType;
|
|
setNewMonth: (month: string) => void;
|
|
};
|
|
|
|
const NiceCalendarMonth = ({
|
|
calendarOpen,
|
|
setCalendarOpen,
|
|
startMonth,
|
|
endMonth,
|
|
singleMonth,
|
|
calendarType,
|
|
setNewMonth
|
|
}: NiceCalendarProps) => {
|
|
const { i18n } = useTranslation();
|
|
const currentLocale = i18n.language || 'en';
|
|
|
|
const [valueYear, setValueYear] = useState<string>();
|
|
const [minMonth, setMinMonth] = useState<Date | undefined>();
|
|
const [maxMonth, setMaxMonth] = useState<Date | undefined>();
|
|
const onChangeToMonth = (selectedMonth: any) => {
|
|
setNewMonth(moment(selectedMonth).format('YYYY.MM'));
|
|
setCalendarOpen(false);
|
|
};
|
|
|
|
const onClickToClose = () => {
|
|
// setCalendarOpen(false);
|
|
};
|
|
const setMinMaxValueDate = () => {
|
|
if(calendarType === CalendarType.Start){
|
|
setMinMonth(undefined);
|
|
if(!!endMonth){
|
|
setMaxMonth(new Date(moment(endMonth+'01').format('YYYY.MM.DD')));
|
|
}
|
|
setValueYear(startMonth?.substring(0, 4));
|
|
}
|
|
else if(calendarType === CalendarType.End){
|
|
if(!!startMonth){
|
|
setMinMonth(new Date(moment(startMonth+'01').format('YYYY.MM.DD')));
|
|
}
|
|
setMaxMonth(new Date());
|
|
setValueYear(endMonth?.substring(0, 4));
|
|
}
|
|
else if(calendarType === CalendarType.Single){
|
|
setValueYear(singleMonth?.substring(0, 4));
|
|
}
|
|
};
|
|
|
|
const formatMonthYear = (locale: string | undefined, date: Date) => {
|
|
return date.toLocaleDateString(currentLocale, {
|
|
month: 'long',
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
const formatYear = (locale: string | undefined, date: Date) => {
|
|
return date.toLocaleDateString(currentLocale, {
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
const formmatMonth = (locale: string | undefined, date: Date) => {
|
|
return date.toLocaleDateString(currentLocale, {
|
|
month: 'short'
|
|
});
|
|
};
|
|
const formatDay = (locale: string | undefined, date: Date) => {
|
|
// For Korean locale, return only the day number without '일'
|
|
if (currentLocale === 'ko') {
|
|
return date.getDate().toString();
|
|
}
|
|
return date.toLocaleString(currentLocale, {
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
const formatShortWeekday = (locale: string | undefined, date: Date) => {
|
|
return date.toLocaleString(currentLocale, {
|
|
weekday: 'short'
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
setMinMaxValueDate();
|
|
|
|
}, [calendarOpen])
|
|
|
|
return (
|
|
<>
|
|
{ (calendarOpen) &&
|
|
<>
|
|
<div className="bg-dim"></div>
|
|
<CalendarWrapper onClick={ () => onClickToClose() }>
|
|
<Calendar
|
|
locale={currentLocale}
|
|
minDate={ minMonth }
|
|
maxDate={ maxMonth }
|
|
onClickMonth={ onChangeToMonth }
|
|
value={ valueYear }
|
|
formatMonthYear={ formatMonthYear }
|
|
formatYear= { formatYear }
|
|
formatMonth={ formmatMonth }
|
|
formatDay={ formatDay }
|
|
formatShortWeekday={ formatShortWeekday }
|
|
showNeighboringMonth={ true }
|
|
defaultView='year'
|
|
view='year'
|
|
></Calendar>
|
|
</CalendarWrapper>
|
|
</>
|
|
}
|
|
</>
|
|
);
|
|
};
|
|
const CalendarWrapper = styled.div`
|
|
z-index: 1100;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 100px;
|
|
left: 0;
|
|
`;
|
|
|
|
export default NiceCalendarMonth; |