From 89f68c5a50c33cb3bd89198d9acf12eb6e3922ab Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Wed, 12 Jan 2022 11:30:29 +0330 Subject: [PATCH 01/11] Calendar Main Components Added --- .../Calendar/CalendarComponents/Calendar.js | 242 ++++++ .../CalendarComponents/DatePicker.css | 672 +++++++++++++++++ .../Calendar/CalendarComponents/DatePicker.js | 203 +++++ .../CalendarComponents/DatePickerInput.js | 93 +++ .../CalendarComponents/components/DaysList.js | 385 ++++++++++ .../CalendarComponents/components/Header.js | 189 +++++ .../components/MonthSelector.js | 74 ++ .../components/YearSelector.js | 99 +++ .../CalendarComponents/components/index.js | 4 + .../Calendar/CalendarComponents/index.js | 3 + .../CalendarComponents/shared/constants.js | 104 +++ .../CalendarComponents/shared/generalUtils.js | 69 ++ .../CalendarComponents/shared/hooks.js | 10 + .../shared/keyboardNavigation.js | 44 ++ .../shared/localeLanguages.js | 85 +++ .../CalendarComponents/shared/localeUtils.js | 61 ++ .../shared/sliderHelpers.js | 33 + src/components/Calendar/index.css | 18 +- src/components/Calendar/index.js | 62 +- src/components/RangeDatePicker/index.css | 710 ++++++++++++++++++ src/components/RangeDatePicker/index.js | 3 +- src/components/SidebarCategoryHover/index.js | 2 +- 22 files changed, 3157 insertions(+), 8 deletions(-) create mode 100644 src/components/Calendar/CalendarComponents/Calendar.js create mode 100644 src/components/Calendar/CalendarComponents/DatePicker.css create mode 100644 src/components/Calendar/CalendarComponents/DatePicker.js create mode 100644 src/components/Calendar/CalendarComponents/DatePickerInput.js create mode 100644 src/components/Calendar/CalendarComponents/components/DaysList.js create mode 100644 src/components/Calendar/CalendarComponents/components/Header.js create mode 100644 src/components/Calendar/CalendarComponents/components/MonthSelector.js create mode 100644 src/components/Calendar/CalendarComponents/components/YearSelector.js create mode 100644 src/components/Calendar/CalendarComponents/components/index.js create mode 100644 src/components/Calendar/CalendarComponents/index.js create mode 100644 src/components/Calendar/CalendarComponents/shared/constants.js create mode 100644 src/components/Calendar/CalendarComponents/shared/generalUtils.js create mode 100644 src/components/Calendar/CalendarComponents/shared/hooks.js create mode 100644 src/components/Calendar/CalendarComponents/shared/keyboardNavigation.js create mode 100644 src/components/Calendar/CalendarComponents/shared/localeLanguages.js create mode 100644 src/components/Calendar/CalendarComponents/shared/localeUtils.js create mode 100644 src/components/Calendar/CalendarComponents/shared/sliderHelpers.js create mode 100644 src/components/RangeDatePicker/index.css diff --git a/src/components/Calendar/CalendarComponents/Calendar.js b/src/components/Calendar/CalendarComponents/Calendar.js new file mode 100644 index 0000000..1adde35 --- /dev/null +++ b/src/components/Calendar/CalendarComponents/Calendar.js @@ -0,0 +1,242 @@ +import React, { useState, useRef, useEffect } from 'react'; + +import { + getDateAccordingToMonth, + shallowClone, + getValueType, +} from './shared/generalUtils'; +import { + TYPE_SINGLE_DATE, + TYPE_RANGE, + TYPE_MUTLI_DATE, +} from './shared/constants'; +import { useLocaleUtils, useLocaleLanguage } from './shared/hooks'; + +import { Header, MonthSelector, YearSelector, DaysList } from './components'; + +export const Calendar = ({ + value, + onChange, + onDisabledDayError, + calendarClassName, + calendarTodayClassName, + calendarSelectedDayClassName, + calendarRangeStartClassName, + calendarRangeBetweenClassName, + calendarRangeEndClassName, + disabledDays, + colorPrimary, + colorPrimaryLight, + slideAnimationDuration, + minimumDate, + maximumDate, + selectorStartingYear, + selectorEndingYear, + locale, + shouldHighlightWeekends, + renderFooter, + customDaysClassName, + events, +}) => { + const calendarElement = useRef(null); + const [mainState, setMainState] = useState({ + activeDate: null, + monthChangeDirection: '', + isMonthSelectorOpen: false, + isYearSelectorOpen: false, + }); + + useEffect(() => { + const handleKeyUp = ({ key }) => { + /* istanbul ignore else */ + if (key === 'Tab') + calendarElement.current.classList.remove('-noFocusOutline'); + }; + calendarElement.current.addEventListener('keyup', handleKeyUp, false); + return () => { + // calendarElement.current.removeEventListener('keyup', handleKeyUp, false); + }; + }); + + const { getToday } = useLocaleUtils(locale); + const { weekDays: weekDaysList, isRtl } = useLocaleLanguage(locale); + const today = getToday(); + + const createStateToggler = (property) => () => { + setMainState({ ...mainState, [property]: !mainState[property] }); + }; + + const toggleMonthSelector = createStateToggler('isMonthSelectorOpen'); + const toggleYearSelector = createStateToggler('isYearSelectorOpen'); + + const getComputedActiveDate = () => { + const valueType = getValueType(value); + if (valueType === TYPE_MUTLI_DATE && value.length) + return shallowClone(value[0]); + if (valueType === TYPE_SINGLE_DATE && value) return shallowClone(value); + if (valueType === TYPE_RANGE && value.from) return shallowClone(value.from); + return shallowClone(today); + }; + + const activeDate = mainState.activeDate + ? shallowClone(mainState.activeDate) + : getComputedActiveDate(); + + const weekdays = weekDaysList.map((weekDay) => ( + + {weekDay.short} + + )); + + const handleMonthChange = (direction) => { + setMainState({ + ...mainState, + monthChangeDirection: direction, + }); + }; + + const updateDate = () => { + setMainState({ + ...mainState, + activeDate: getDateAccordingToMonth( + activeDate, + mainState.monthChangeDirection + ), + monthChangeDirection: '', + }); + }; + + const selectMonth = (newMonthNumber) => { + setMainState({ + ...mainState, + activeDate: { ...activeDate, month: newMonthNumber }, + isMonthSelectorOpen: false, + }); + }; + + const selectYear = (year) => { + setMainState({ + ...mainState, + activeDate: { ...activeDate, year }, + isYearSelectorOpen: false, + }); + }; + + return ( +
+
+ + + + + +
{weekdays}
+ + +
{renderFooter()}
+
+ ); +}; + +Calendar.defaultProps = { + minimumDate: null, + maximumDate: null, + colorPrimary: '#0eca2d', + colorPrimaryLight: '#cff4d5', + slideAnimationDuration: '0.4s', + calendarClassName: '', + locale: 'en', + value: null, + renderFooter: () => null, + customDaysClassName: [], + events: [ + { + id: 1, + day: 15, + occasions: [ + { + title: 'دی به دین روز، چهارمین جشن دیگان', + dotColor: '#eeffds1', + }, + { + title: 'lorem', + dotColor: 'blue' + } + ] + + }, + { + id: 2, + day: 22, + title: 'مصاحبه کاری', + dotColor: 'red', + }, + { + id: 3, + title: 'اجاره خانه', + day: 21, + dotColor: 'blue', + }, + ], +}; + + diff --git a/src/components/Calendar/CalendarComponents/DatePicker.css b/src/components/Calendar/CalendarComponents/DatePicker.css new file mode 100644 index 0000000..c7010fb --- /dev/null +++ b/src/components/Calendar/CalendarComponents/DatePicker.css @@ -0,0 +1,672 @@ +.DatePicker { + position: relative; + display: inline-block; + z-index: 100; +} + +.DatePicker__input { + background: #fff; + border: 1px solid #ddd; + padding: 0.4em 0.8em; + font-family: inherit; + text-align: center; + font-size: 12px; +} + +.DatePicker__input.-rtl { + direction: rtl; +} + +.DatePicker__input::placeholder { + color: #979797; +} + +.DatePicker__calendarContainer.-top + .DatePicker__calendarArrow { + top: auto; + bottom: calc(100% + 10px); + transform: translateY(-2.5rem) rotate(180deg); + animation: fadeArrowFlipped 0.3s forwards; +} + +.DatePicker__calendarContainer { + position: absolute; + top: calc(100% + 20px); + left: 50%; + transform: translateX(-50%); +} + +.DatePicker__calendarContainer.-top { + top: auto; + bottom: calc(100% + 20px); +} + +.Calendar, +.Calendar * { + margin: 0; + padding: 0; + box-sizing: border-box; + direction: ltr; +} + +.Calendar, +.Calendar.-rtl * { + direction: rtl; +} + +.DatePicker__calendarArrow { + position: absolute; + width: 0; + height: 0; + top: calc(100% + 10px); + left: 0; + right: 0; + margin: 0 auto; + border-style: solid; + z-index: 10; + border-width: 0 10px 10px 10px; + border-color: transparent transparent #fff transparent; +} + +.Calendar { + --cl-color-black: #444444; + --cl-color-disabled: #d4d4d4; + --cl-color-error: #ff2929; + font-size: 10px; + background: #fff; + box-shadow: 0 1em 4em rgba(0, 0, 0, 0.07); + border-radius: 1em; + position: relative; + user-select: none; + padding-top: 1.2em; + display: flex; + flex-direction: column; + width: 33em; + z-index: 10; + max-width: 90vw; + min-height: 36.7em; +} + +.DatePicker .Calendar, +.DatePicker__calendarArrow { + transform: translateY(2.5em); + opacity: 0; + animation: fadeCalendar 0.3s forwards; +} + +.DatePicker__calendarContainer.-top .Calendar { + transform: translateY(-2.5em); +} + +.Calendar.-noFocusOutline *:focus { + outline: none !important; +} + +.Calendar > :not(.Calendar__footer) button { + font-family: inherit; + background: transparent; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + outline: none; +} + +.Calendar__header { + display: flex; + color: var(--cl-color-black); + padding: 2em 2.9em; + align-items: center; + overflow: hidden; +} + +.Calendar__monthArrowWrapper { + line-height: 0; + font-size: 1em; + padding: 3px; + position: relative; + border: none; + z-index: 1; + opacity: 1; + transition: 0.2s; +} + +.Calendar__monthArrowWrapper:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; +} + +.Calendar__monthArrowWrapper:disabled, +.Calendar__monthArrowWrapper.-hidden { + opacity: 0; + pointer-events: none; +} + +.Calendar__monthArrowWrapper.-left { + transform: rotate(90deg); +} +.Calendar.-rtl .Calendar__monthArrowWrapper.-left { + transform: rotate(-90deg); +} + +.Calendar__monthArrowWrapper.-right { + transform: rotate(-90deg); +} +.Calendar.-rtl .Calendar__monthArrowWrapper.-right { + transform: rotate(90deg); +} + +.Calendar__monthArrowWrapper:active .Calendar__monthArrow { + transform: scale(0.7); +} + +.Calendar__monthArrow { + border-radius: 50%; + transition: var(--animation-duration) transform; + pointer-events: none; + background-repeat: no-repeat; + display: block; + width: 1.7em; + height: 1.7em; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg class='nc-icon-wrapper' fill='%23000000'%3E%3Cdefs stroke='none'%3E%3C/defs%3E%3Cpath class='cls-1' d='M12 23.25V.75' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px'%3E%3C/path%3E%3Cpath class='cls-2' d='M22.5 11.25L12 .75 1.5 11.25' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + background-size: 100% 100%; +} + +.Calendar__monthYearContainer { + flex: 1; + position: relative; +} + +.Calendar__monthYear { + font-size: 1.6em; + font-weight: 500; + display: flex; + align-items: center; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + will-change: transform, opacity; + backface-visibility: hidden; + transform: translateZ(0); + transition: var(--animation-duration); + line-height: 1; +} + +.Calendar__monthYear.-hiddenNext { + opacity: 0; + transform: translateX(50%); +} + +.Calendar.-rtl .Calendar__monthYear.-hiddenNext { + transform: translateX(-150%); +} + +.Calendar__monthYear.-hiddenPrevious { + opacity: 0; + transform: translateX(-150%); +} + +.Calendar.-rtl .Calendar__monthYear.-hiddenPrevious { + transform: translateX(50%); +} + +.Calendar__monthYear.-shown { + opacity: 1; + margin-top: auto; + margin-bottom: auto; + transform: translateX(-50%); +} + +.Calendar__monthYear.-shownAnimated { + animation: var(--animation-duration) fadeTextToCenter forwards; +} + +.Calendar__monthYear > * { + padding: 0.2em 0.5em; + border: 1px solid transparent; + transition: var(--animation-duration); + font-size: 1.05em; + display: flex; + justify-content: center; + align-items: center; + transform: translateX(0) scale(0.95); + will-change: transform; + border-radius: 5px; +} + +.Calendar__monthYear:not(.-shown) > *, +.Calendar__monthYear > *.-hidden { + cursor: default; + pointer-events: none; +} + +.Calendar__monthText { + margin-left: -0.3em; +} +.Calendar__yearText:last-child { + margin-right: -0.3em; +} + +.Calendar__monthYear.-shown > *:hover, +.Calendar:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus, +.Calendar__monthYear > *.-activeBackground { + background: #f5f5f5; +} + +.Calendar__monthText:hover { + transform: translateX(-0.2em) scale(0.95); +} +.Calendar.-rtl .Calendar__monthText:hover { + transform: translateX(0.2em) scale(0.95); +} + +.Calendar__yearText:hover { + transform: translateX(0.2em) scale(0.95); +} +.Calendar.-rtl .Calendar__yearText:hover { + transform: translateX(-0.2em) scale(0.95); +} + +.Calendar__monthYear .Calendar__yearText.-hidden { + transform: translateX(50%); + opacity: 0; +} + +.Calendar.-rtl .Calendar__monthYear .Calendar__yearText.-hidden { + transform: translateX(-50%); +} + +.Calendar__monthYear .Calendar__monthText.-hidden { + transform: translateX(-50%); + opacity: 0; +} + +.Calendar.-rtl .Calendar__monthYear .Calendar__monthText.-hidden { + transform: translateX(50%); +} + +.Calendar__monthYear:not(.-shown) > * { + pointer-events: none; +} + +.Calendar__monthSelectorAnimationWrapper, +.Calendar__yearSelectorAnimationWrapper { + position: absolute; + width: 100%; + height: 80%; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} + +.Calendar__monthSelectorWrapper { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.Calendar__monthSelector { + padding: 0 2.5em; + align-content: center; + padding-bottom: 2em; +} + +.Calendar__monthSelector, +.Calendar__yearSelector { + display: flex; + flex-wrap: wrap; + position: relative; + z-index: 2; + background-color: #fff; + transform: translateY(-150%); + will-change: transform; + transition: 0.6s; + height: 100%; +} + +.Calendar__yearSelectorWrapper { + width: 100%; + height: 100%; +} + +.Calendar__yearSelectorWrapper::after, +.Calendar__yearSelectorWrapper::before { + content: ''; + width: 100%; + height: 5em; + position: absolute; + left: 0; + opacity: 0; + transition: 0.4s; + transition-delay: 0.2s; +} + +.Calendar__yearSelectorWrapper::after { + background-image: linear-gradient(to bottom, #fff, #fff 10%, rgba(245, 245, 245, 0)); + top: -0.1em; +} + +.Calendar__yearSelectorWrapper::before { + background-image: linear-gradient(to top, #fff, #fff 10%, rgba(245, 245, 245, 0)); + bottom: 0; +} + +.Calendar__yearSelectorWrapper.-faded::after, +.Calendar__yearSelectorWrapper.-faded::before { + opacity: 1; + z-index: 3; +} + +.Calendar__yearSelector { + align-content: flex-start; + scrollbar-width: 0; + overflow: scroll; + position: relative; + width: 100%; + padding: 5em 2em; + -ms-overflow-style: none; +} + +.Calendar__yearSelector::-webkit-scrollbar { + display: none; +} + +.Calendar__yearSelectorItem { + width: 25%; + display: flex; + justify-content: center; +} + +.Calendar__yearSelectorItem:not(:nth-child(-n + 4)) { + margin-top: 1.5em; +} + +.Calendar__yearSelectorText { + border: none; + font-size: 1.4em; + min-width: 85%; + padding: 0.2em 0.5em; + border-radius: 8.5px; +} + +.Calendar__monthSelector.-open, +.Calendar__yearSelector.-open { + transform: translateY(0); +} + +.Calendar__yearSelectorText:focus, +.Calendar__monthSelectorItemText:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; +} + +.Calendar__monthSelectorItem { + width: calc(100% / 3); + display: flex; + justify-content: center; +} + +.Calendar__monthSelectorItem:not(:nth-child(-n + 3)) { + margin-top: 2em; +} + +.Calendar__monthSelectorItemText { + border: none; + padding: 0.4em 0.4em; + border-radius: 8.5px; + font-size: 1.3em; + min-width: 70%; + transition: 0.3s; +} + +.Calendar__monthSelectorItem:not(.-active) .Calendar__monthSelectorItemText:not(:disabled):hover, +.Calendar__yearSelectorItem:not(.-active) .Calendar__yearSelectorText:not(:disabled):hover { + background: #f5f5f5; +} + +.Calendar__monthSelectorItemText:disabled, +.Calendar__yearSelectorText:disabled { + opacity: 0.5; + cursor: default; +} + +.Calendar__monthSelectorItem.-active .Calendar__monthSelectorItemText, +.Calendar__yearSelectorItem.-active .Calendar__yearSelectorText { + background-color: var(--cl-color-primary); + color: #fff; +} + +.Calendar__weekDays { + display: flex; + justify-content: space-between; + color: var(--cl-color-disabled); + font-size: 1.2em; + margin-bottom: 0.7em; + padding: 0 2.6em; + position: relative; +} + +.Calendar__weekDay { + display: block; + width: calc(100% / 7); + text-align: center; + text-decoration: none; +} + +.Calendar__sectionWrapper { + position: relative; + min-height: 25.8em; + overflow: hidden; +} + +.Calendar__section { + display: flex; + flex-direction: column; + padding: 0 3.2em; + position: absolute; + color: var(--cl-color-black); + top: 0; + padding-top: 0.5em; + left: 0; + width: 100%; + will-change: transform, opacity; + transform: translateZ(0); + backface-visibility: hidden; + transition: var(--animation-duration); +} + +.Calendar__section.-hiddenPrevious { + opacity: 0.5; + transform: translateX(-90%); +} + +.Calendar.-rtl .Calendar__section.-hiddenPrevious { + transform: translateX(90%); +} + +.Calendar__section.-hiddenNext { + opacity: 0.5; + transform: translateX(90%); +} + +.Calendar.-rtl .Calendar__section.-hiddenNext { + transform: translateX(-90%); +} + +.Calendar__section.-shown { + opacity: 1; + transform: translateX(0); +} + +.Calendar__section.-shownAnimated { + animation: var(--animation-duration) FadeContentToCenter forwards; +} + +.Calendar__weekRow { + display: flex; + width: 100%; +} + +.Calendar__day { + display: block; + width: calc(100% / 7); + text-align: center; + padding: calc(0.25em - 1px) 0; + font-size: 1.6em; + border-radius: 50%; + transition: 0.2s; + border: 1px solid transparent; + margin-bottom: 0.3em; + color: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.Calendar__day:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; +} + +.Calendar__day.-ltr { + min-height: 2.6em; + font-size: 1.45em; +} + +.Calendar__day.-rtl { + font-size: 1.55em; + height: 2.45em; +} + +.Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover { + background: #eaeaea; + border-radius: 50%; + color: var(--cl-color-black); + border-color: transparent; +} + +.Calendar__day.-selected, +.Calendar__day.-selectedStart, +.Calendar__day.-selectedEnd { + background: var(--cl-color-primary); + color: #fff; +} + +.Calendar__day.-ltr.-selectedStart { + border-radius: 0; + border-top-left-radius: 100em; + border-bottom-left-radius: 100em; +} + +.Calendar__day.-rtl.-selectedStart { + border-radius: 0; + border-top-right-radius: 100em; + border-bottom-right-radius: 100em; +} + +.Calendar__day.-selectedBetween { + background: var(--cl-color-primary-light); + color: var(--cl-color-primary); + border-radius: 0; +} + +.Calendar__day.-ltr.-selectedEnd { + border-top-right-radius: 100em; + border-bottom-right-radius: 100em; +} + +.Calendar__day.-rtl.-selectedEnd { + border-top-left-radius: 100em; + border-bottom-left-radius: 100em; +} + +.Calendar__day.-weekend:not(.-selected):not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { + color: var(--cl-color-error); +} + +.Calendar__day.-weekend.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + background: var(--cl-color-error); +} + +.Calendar__day.-disabled { + color: var(--cl-color-disabled) !important; + background: transparent !important; + cursor: default !important; +} +.Calendar__day.-selected { + border-radius: 50%; +} +.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { + font-weight: 600; + color: var(--cl-color-black); + color: #000; + position: relative; +} + +.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + content: ''; + position: absolute; + bottom: 0.2em; + display: block; + width: 0.6em; + height: 1px; + background: #000; + left: 50%; + opacity: 0.5; + transform: translateX(-50%); + transition: 0.2s; +} + +.Calendar__day.-today:hover:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + opacity: 0; +} + +.Calendar__day.-blank { + color: transparent; + cursor: default; + pointer-events: none; +} + +.Calendar__footer { + position: relative; + z-index: 1; +} + +@keyframes fadeCalendar { + from { + opacity: 0; + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeArrowFlipped { + from { + opacity: 0; + } + + to { + opacity: 1; + transform: translateY(0) rotate(180deg); + } +} + +@keyframes fadeTextToCenter { + to { + opacity: 1; + transform: translateX(-50%); + } +} + +@keyframes FadeContentToCenter { + to { + opacity: 1; + transform: translateX(0); + } +} diff --git a/src/components/Calendar/CalendarComponents/DatePicker.js b/src/components/Calendar/CalendarComponents/DatePicker.js new file mode 100644 index 0000000..5b83b35 --- /dev/null +++ b/src/components/Calendar/CalendarComponents/DatePicker.js @@ -0,0 +1,203 @@ +import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'; + +import { Calendar } from './Calendar'; +import DatePickerInput from './DatePickerInput'; +import { getValueType } from './shared/generalUtils'; +import { TYPE_SINGLE_DATE, TYPE_MUTLI_DATE, TYPE_RANGE } from './shared/constants'; + +const DatePicker = ({ + value, + onChange, + formatInputText, + inputPlaceholder, + inputClassName, + inputName, + renderInput, + wrapperClassName, + calendarClassName, + calendarTodayClassName, + calendarSelectedDayClassName, + calendarRangeStartClassName, + calendarRangeBetweenClassName, + calendarRangeEndClassName, + calendarPopperPosition, + disabledDays, + onDisabledDayError, + colorPrimary, + colorPrimaryLight, + slideAnimationDuration, + minimumDate, + maximumDate, + selectorStartingYear, + selectorEndingYear, + locale, + shouldHighlightWeekends, + renderFooter, + customDaysClassName, +}) => { + const calendarContainerElement = useRef(null); + const inputElement = useRef(null); + const shouldPreventToggle = useRef(false); + const [isCalendarOpen, setCalendarVisiblity] = useState(false); + + useEffect(() => { + const handleBlur = () => { + setCalendarVisiblity(false); + }; + window.addEventListener('blur', handleBlur, false); + return () => { + window.removeEventListener('blur', handleBlur, false); + }; + }, []); + + // handle input focus/blur + useEffect(() => { + const valueType = getValueType(value); + if (valueType === TYPE_MUTLI_DATE) return; // no need to close the calendar + const shouldCloseCalendar = + valueType === TYPE_SINGLE_DATE ? !isCalendarOpen : !isCalendarOpen && value.from && value.to; + if (shouldCloseCalendar) inputElement.current.blur(); + }, [value, isCalendarOpen]); + + const handleBlur = e => { + e.persist(); + if (!isCalendarOpen) return; + const isInnerElementFocused = calendarContainerElement.current.contains(e.relatedTarget); + if (shouldPreventToggle.current) { + shouldPreventToggle.current = false; + inputElement.current.focus(); + } else if (isInnerElementFocused && e.relatedTarget) { + e.relatedTarget.focus(); + } else { + setCalendarVisiblity(false); + } + }; + + const openCalendar = () => { + if (!shouldPreventToggle.current) setCalendarVisiblity(true); + }; + + // Keep the calendar in the screen bounds if input is near the window edges + useLayoutEffect(() => { + if (!isCalendarOpen) return; + const { left, width, height, top } = calendarContainerElement.current.getBoundingClientRect(); + const { clientWidth, clientHeight } = document.documentElement; + const isOverflowingFromRight = left + width > clientWidth; + const isOverflowingFromLeft = left < 0; + const isOverflowingFromBottom = top + height > clientHeight; + + const getLeftStyle = () => { + const overflowFromRightDistance = left + width - clientWidth; + + if (!isOverflowingFromRight && !isOverflowingFromLeft) return; + const overflowFromLeftDistance = Math.abs(left); + const rightPosition = isOverflowingFromLeft ? overflowFromLeftDistance : 0; + + const leftStyle = isOverflowingFromRight + ? `calc(50% - ${overflowFromRightDistance}px)` + : `calc(50% + ${rightPosition}px)`; + return leftStyle; + }; + + calendarContainerElement.current.style.left = getLeftStyle(); + if ( + (calendarPopperPosition === 'auto' && isOverflowingFromBottom) || + calendarPopperPosition === 'top' + ) { + calendarContainerElement.current.classList.add('-top'); + } + }, [isCalendarOpen]); + + const handleCalendarChange = newValue => { + const valueType = getValueType(value); + onChange(newValue); + if (valueType === TYPE_SINGLE_DATE) setCalendarVisiblity(false); + else if (valueType === TYPE_RANGE && newValue.from && newValue.to) setCalendarVisiblity(false); + }; + + const handleKeyUp = ({ key }) => { + switch (key) { + case 'Enter': + setCalendarVisiblity(true); + break; + case 'Escape': + setCalendarVisiblity(false); + shouldPreventToggle.current = true; + break; + } + }; + + useEffect(() => { + if (!isCalendarOpen && shouldPreventToggle.current) { + inputElement.current.focus(); + shouldPreventToggle.current = false; + } + }, [shouldPreventToggle, isCalendarOpen]); + + return ( +
+ + {isCalendarOpen && ( + <> +
{ + shouldPreventToggle.current = true; + }} + > + +
+
+ + )} +
+ ); +}; + +DatePicker.defaultProps = { + wrapperClassName: '', + locale: 'en', + calendarPopperPosition: 'auto', +}; + +export default DatePicker; diff --git a/src/components/Calendar/CalendarComponents/DatePickerInput.js b/src/components/Calendar/CalendarComponents/DatePickerInput.js new file mode 100644 index 0000000..30d3ee7 --- /dev/null +++ b/src/components/Calendar/CalendarComponents/DatePickerInput.js @@ -0,0 +1,93 @@ +import React from 'react'; + +import { useLocaleUtils, useLocaleLanguage } from './shared/hooks'; +import { putZero, getValueType } from './shared/generalUtils'; +import { TYPE_SINGLE_DATE, TYPE_RANGE, TYPE_MUTLI_DATE } from './shared/constants'; + +const DatePickerInput = React.forwardRef( + ( + { value, inputPlaceholder, inputClassName, inputName, formatInputText, renderInput, locale }, + ref, + ) => { + const { getLanguageDigits } = useLocaleUtils(locale); + const { + from: fromWord, + to: toWord, + yearLetterSkip, + digitSeparator, + defaultPlaceholder, + isRtl, + } = useLocaleLanguage(locale); + + const getSingleDayValue = () => { + if (!value) return ''; + const year = getLanguageDigits(value.year); + const month = getLanguageDigits(putZero(value.month)); + const day = getLanguageDigits(putZero(value.day)); + return `${year}/${month}/${day}`; + }; + + const getDayRangeValue = () => { + if (!value.from || !value.to) return ''; + const { from, to } = value; + const fromText = `${getLanguageDigits(putZero(from.year)) + .toString() + .slice(yearLetterSkip)}/${getLanguageDigits(putZero(from.month))}/${getLanguageDigits( + putZero(from.day), + )}`; + const toText = `${getLanguageDigits(putZero(to.year)) + .toString() + .slice(yearLetterSkip)}/${getLanguageDigits(putZero(to.month))}/${getLanguageDigits( + putZero(to.day), + )}`; + return `${fromWord} ${fromText} ${toWord} ${toText}`; + }; + + const getMultiDateValue = () => { + return value.map(date => getLanguageDigits(date.day)).join(`${digitSeparator} `); + }; + + const getValue = () => { + if (formatInputText()) return formatInputText(); + const valueType = getValueType(value); + switch (valueType) { + case TYPE_SINGLE_DATE: + return getSingleDayValue(); + case TYPE_RANGE: + return getDayRangeValue(); + case TYPE_MUTLI_DATE: + return getMultiDateValue(); + } + }; + + const placeholderValue = inputPlaceholder || defaultPlaceholder; + const render = () => { + return ( + renderInput({ ref }) || ( + + ) + ); + }; + + return render(); + }, +); + +DatePickerInput.defaultProps = { + formatInputText: () => '', + renderInput: () => null, + inputPlaceholder: '', + inputClassName: '', + inputName: '', +}; + +export default DatePickerInput; diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js new file mode 100644 index 0000000..dda528f --- /dev/null +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -0,0 +1,385 @@ +import React, { useRef, useEffect } from 'react'; + +import { + getSlideDate, + handleSlideAnimationEnd, + animateContent, +} from '../shared/sliderHelpers'; +import { + deepCloneObject, + isSameDay, + createUniqueRange, + getValueType, +} from '../shared/generalUtils'; +import { + TYPE_SINGLE_DATE, + TYPE_RANGE, + TYPE_MUTLI_DATE, +} from '../shared/constants'; +import handleKeyboardNavigation from '../shared/keyboardNavigation'; +import { useLocaleUtils, useLocaleLanguage } from '../shared/hooks'; + +const DaysList = ({ + activeDate, + value, + monthChangeDirection, + onSlideChange, + disabledDays, + onDisabledDayError, + minimumDate, + maximumDate, + onChange, + locale, + calendarTodayClassName, + calendarSelectedDayClassName, + calendarRangeStartClassName, + calendarRangeEndClassName, + calendarRangeBetweenClassName, + shouldHighlightWeekends, + isQuickSelectorOpen, + customDaysClassName, + events, +}) => { + const calendarSectionWrapper = useRef(null); + const { isRtl, weekDays: weekDaysList } = useLocaleLanguage(locale); + const { + getToday, + isBeforeDate, + checkDayInDayRange, + getMonthFirstWeekday, + getMonthLength, + getLanguageDigits, + getMonthName, + } = useLocaleUtils(locale); + const today = getToday(); + + useEffect(() => { + if (!monthChangeDirection) return; + animateContent({ + direction: monthChangeDirection, + parent: calendarSectionWrapper.current, + }); + }, [monthChangeDirection]); + + const getDayRangeValue = (day) => { + const clonedDayRange = deepCloneObject(value); + const dayRangeValue = + clonedDayRange.from && clonedDayRange.to + ? { from: null, to: null } + : clonedDayRange; + const dayRangeProp = !dayRangeValue.from ? 'from' : 'to'; + dayRangeValue[dayRangeProp] = day; + const { from, to } = dayRangeValue; + + // swap from and to values if from is later than to + if (isBeforeDate(dayRangeValue.to, dayRangeValue.from)) { + dayRangeValue.from = to; + dayRangeValue.to = from; + } + + const checkIncludingDisabledDay = (disabledDay) => { + return checkDayInDayRange({ + day: disabledDay, + from: dayRangeValue.from, + to: dayRangeValue.to, + }); + }; + const includingDisabledDay = disabledDays.find(checkIncludingDisabledDay); + if (includingDisabledDay) { + onDisabledDayError(includingDisabledDay); + return value; + } + + return dayRangeValue; + }; + + const getMultiDateValue = (day) => { + const isAlreadyExisting = value.some((valueDay) => + isSameDay(valueDay, day) + ); + const addedToValue = [...value, day]; + const removedFromValue = value.filter( + (valueDay) => !isSameDay(valueDay, day) + ); + return isAlreadyExisting ? removedFromValue : addedToValue; + }; + + const handleDayClick = (day) => { + const getNewValue = () => { + const valueType = getValueType(value); + switch (valueType) { + case TYPE_SINGLE_DATE: + return day; + case TYPE_RANGE: + return getDayRangeValue(day); + case TYPE_MUTLI_DATE: + return getMultiDateValue(day); + } + }; + const newValue = getNewValue(); + onChange(newValue); + }; + + const isSingleDateSelected = (day) => { + const valueType = getValueType(value); + if (valueType === TYPE_SINGLE_DATE) return isSameDay(day, value); + if (valueType === TYPE_MUTLI_DATE) + return value.some((valueDay) => isSameDay(valueDay, day)); + }; + + const getDayStatus = (dayItem) => { + const isToday = isSameDay(dayItem, today); + const isSelected = isSingleDateSelected(dayItem); + const { from: startingDay, to: endingDay } = value || {}; + const isStartingDayRange = isSameDay(dayItem, startingDay); + const isEndingDayRange = isSameDay(dayItem, endingDay); + const isWithinRange = checkDayInDayRange({ + day: dayItem, + from: startingDay, + to: endingDay, + }); + return { + isToday, + isSelected, + isStartingDayRange, + isEndingDayRange, + isWithinRange, + }; + }; + + const getDayClassNames = (dayItem) => { + const { + isToday, + isSelected, + isStartingDayRange, + isEndingDayRange, + isWithinRange, + } = getDayStatus(dayItem); + const customDayItemClassName = customDaysClassName.find((day) => + isSameDay(dayItem, day) + ); + const classNames = '' + .concat(isToday && !isSelected ? ` -today ${calendarTodayClassName}` : '') + .concat(!dayItem.isStandard ? ' -blank' : '') + .concat(dayItem.isWeekend && shouldHighlightWeekends ? ' -weekend' : '') + .concat( + customDayItemClassName ? ` ${customDayItemClassName.className}` : '' + ) + .concat(isSelected ? ` -selected ${calendarSelectedDayClassName}` : '') + .concat( + isStartingDayRange + ? ` -selectedStart ${calendarRangeStartClassName}` + : '' + ) + .concat( + isEndingDayRange ? ` -selectedEnd ${calendarRangeEndClassName}` : '' + ) + .concat( + isWithinRange + ? ` -selectedBetween ${calendarRangeBetweenClassName}` + : '' + ) + .concat(dayItem.isDisabled ? ' -disabled' : ''); + return classNames; + }; + + const getViewMonthDays = (date) => { + // to match month starting date with the correct weekday label + const prependingBlankDays = createUniqueRange( + getMonthFirstWeekday(date), + 'starting-blank' + ); + const standardDays = createUniqueRange(getMonthLength(date)).map((day) => ({ + ...day, + isStandard: true, + month: date.month, + year: date.year, + })); + const allDays = [...prependingBlankDays, ...standardDays]; + return allDays; + }; + + const handleDayPress = ({ isDisabled, ...dayItem }) => { + if (isDisabled) { + onDisabledDayError(dayItem); // good for showing error messages + } else handleDayClick(dayItem); + }; + + const isDayReachableByKeyboard = ({ + isOnActiveSlide, + isStandard, + isSelected, + isStartingDayRange, + isToday, + day, + }) => { + if (isQuickSelectorOpen || !isOnActiveSlide || !isStandard) return false; + if (isSelected || isStartingDayRange || isToday || day === 1) return true; + }; + + const renderEachWeekDays = ( + { id, value: day, month, year, isStandard }, + index + ) => { + const dayItem = { day, month, year }; + const isInDisabledDaysRange = disabledDays.some((disabledDay) => + isSameDay(dayItem, disabledDay) + ); + const isBeforeMinimumDate = isBeforeDate(dayItem, minimumDate); + const isAfterMaximumDate = isBeforeDate(maximumDate, dayItem); + const isNotInValidRange = + isStandard && (isBeforeMinimumDate || isAfterMaximumDate); + const isDisabled = isInDisabledDaysRange || isNotInValidRange; + const isWeekend = weekDaysList.some( + (weekDayItem, weekDayItemIndex) => + weekDayItem.isWeekend && weekDayItemIndex === index + ); + const additionalClass = getDayClassNames({ + ...dayItem, + isWeekend, + isStandard, + isDisabled, + }); + const dayLabel = `${weekDaysList[index].name}, ${day} ${getMonthName( + month + )} ${year}`; + const isOnActiveSlide = month === activeDate.month; + const dayStatus = getDayStatus(dayItem); + const { isSelected, isStartingDayRange, isEndingDayRange, isWithinRange } = + dayStatus; + const shouldEnableKeyboardNavigation = isDayReachableByKeyboard({ + ...dayItem, + ...dayStatus, + isOnActiveSlide, + isStandard, + }); + const specialDay = (sDay) => { + // let specialDayArray = []; + // console.log(sDay); + + // specialDayArray.push(events[i].day); + var eventDate; + for (var i = 0; i < events.length; i++) { + if (sDay == events[i].day) { + + return sDay; + + } + } + // sDay = events[0].day; + // return sDay; + // console.log(sDay); + + // console.log(specialDayArray[0]) + }; + + return ( +
{ + handleDayPress({ ...dayItem, isDisabled }); + console.log(specialDay(day)); + console.log(day) + }} + onKeyDown={({ key }) => { + /* istanbul ignore else */ + if (key === 'Enter') handleDayPress({ ...dayItem, isDisabled }); + }} + aria-disabled={isDisabled} + aria-label={dayLabel} + aria-selected={ + isSelected || isStartingDayRange || isEndingDayRange || isWithinRange + } + {...(!isStandard || !isOnActiveSlide || isQuickSelectorOpen + ? { 'aria-hidden': true } + : {})} + role="gridcell" + data-is-default-selectable={shouldEnableKeyboardNavigation} + > + {!isStandard ? '' : getLanguageDigits(day)} + {specialDay(day) == day ? '.' : null} +
+ ); + }; + + const renderMonthDays = (isInitialActiveChild) => { + const date = getSlideDate({ + activeDate, + isInitialActiveChild, + monthChangeDirection, + parent: calendarSectionWrapper.current, + }); + const allDays = getViewMonthDays(date); + const renderSingleWeekRow = (weekRowIndex) => { + const eachWeekDays = allDays + .slice(weekRowIndex * 7, weekRowIndex * 7 + 7) + .map(renderEachWeekDays); + return ( +
+ {eachWeekDays} +
+ ); + }; + return Array.from(Array(6).keys()).map(renderSingleWeekRow); + }; + + const handleKeyDown = (e) => { + handleKeyboardNavigation(e, { allowVerticalArrows: true }); + }; + + return ( +
+
{ + handleSlideAnimationEnd(e); + onSlideChange(); + }} + className="Calendar__section -shown" + role="rowgroup" + > + {renderMonthDays(true)} +
+
{ + handleSlideAnimationEnd(e); + onSlideChange(); + }} + className="Calendar__section -hiddenNext" + role="rowgroup" + > + {renderMonthDays(false)} +
+
+ ); +}; + +DaysList.defaultProps = { + onChange: () => {}, + onDisabledDayError: () => {}, + disabledDays: [], + calendarTodayClassName: '', + calendarSelectedDayClassName: '', + calendarRangeStartClassName: '', + calendarRangeBetweenClassName: '', + calendarRangeEndClassName: '', + shouldHighlightWeekends: false, +}; + +export default DaysList; diff --git a/src/components/Calendar/CalendarComponents/components/Header.js b/src/components/Calendar/CalendarComponents/components/Header.js new file mode 100644 index 0000000..2091185 --- /dev/null +++ b/src/components/Calendar/CalendarComponents/components/Header.js @@ -0,0 +1,189 @@ +import React, { useEffect, useRef } from 'react'; + +import { isSameDay } from '../shared/generalUtils'; +import { getSlideDate, animateContent, handleSlideAnimationEnd } from '../shared/sliderHelpers'; +import { useLocaleUtils, useLocaleLanguage } from '../shared/hooks'; + +const Header = ({ + maximumDate, + minimumDate, + onMonthChange, + activeDate, + monthChangeDirection, + onMonthSelect, + onYearSelect, + isMonthSelectorOpen, + isYearSelectorOpen, + locale, +}) => { + const headerElement = useRef(null); + const monthYearWrapperElement = useRef(null); + + const { getMonthName, isBeforeDate, getLanguageDigits } = useLocaleUtils(locale); + const { + isRtl, + nextMonth, + previousMonth, + openMonthSelector, + closeMonthSelector, + openYearSelector, + closeYearSelector, + } = useLocaleLanguage(locale); + + useEffect(() => { + if (!monthChangeDirection) return; + animateContent({ + direction: monthChangeDirection, + parent: monthYearWrapperElement.current, + }); + }, [monthChangeDirection]); + + useEffect(() => { + const isOpen = isMonthSelectorOpen || isYearSelectorOpen; + const monthText = headerElement.current.querySelector( + '.Calendar__monthYear.-shown .Calendar__monthText', + ); + const yearText = monthText.nextSibling; + const hasActiveBackground = element => element.classList.contains('-activeBackground'); + const isInitialRender = + !isOpen && !hasActiveBackground(monthText) && !hasActiveBackground(yearText); + if (isInitialRender) return; + + const arrows = [...headerElement.current.querySelectorAll('.Calendar__monthArrowWrapper')]; + const hasMonthSelectorToggled = isMonthSelectorOpen || hasActiveBackground(monthText); + const primaryElement = hasMonthSelectorToggled ? monthText : yearText; + const secondaryElement = hasMonthSelectorToggled ? yearText : monthText; + + let translateXDirection = hasMonthSelectorToggled ? 1 : -1; + if (isRtl) translateXDirection *= -1; + const scale = !isOpen ? 0.95 : 1; + const translateX = !isOpen ? 0 : `${(translateXDirection * secondaryElement.offsetWidth) / 2}`; + if (!isOpen) { + secondaryElement.removeAttribute('aria-hidden'); + } else { + secondaryElement.setAttribute('aria-hidden', true); + } + secondaryElement.setAttribute('tabindex', isOpen ? '-1' : '0'); + secondaryElement.style.transform = ''; + primaryElement.style.transform = `scale(${scale}) ${ + translateX ? `translateX(${translateX}px)` : '' + }`; + primaryElement.classList.toggle('-activeBackground'); + secondaryElement.classList.toggle('-hidden'); + arrows.forEach(arrow => { + const isHidden = arrow.classList.contains('-hidden'); + arrow.classList.toggle('-hidden'); + if (isHidden) { + arrow.removeAttribute('aria-hidden'); + arrow.setAttribute('tabindex', '0'); + } else { + arrow.setAttribute('aria-hidden', true); + arrow.setAttribute('tabindex', '-1'); + } + }); + }, [isMonthSelectorOpen, isYearSelectorOpen]); + + const getMonthYearText = isInitialActiveChild => { + const date = getSlideDate({ + isInitialActiveChild, + monthChangeDirection, + activeDate, + parent: monthYearWrapperElement.current, + }); + const year = getLanguageDigits(date.year); + const month = getMonthName(date.month); + return { month, year }; + }; + + const isNextMonthArrowDisabled = + maximumDate && + isBeforeDate(maximumDate, { ...activeDate, month: activeDate.month + 1, day: 1 }); + const isPreviousMonthArrowDisabled = + minimumDate && + (isBeforeDate({ ...activeDate, day: 1 }, minimumDate) || + isSameDay(minimumDate, { ...activeDate, day: 1 })); + + const onMonthChangeTrigger = direction => { + const isMonthChanging = Array.from(monthYearWrapperElement.current.children).some(child => + child.classList.contains('-shownAnimated'), + ); + if (isMonthChanging) return; + onMonthChange(direction); + }; + + // first button text is the one who shows the current month and year(initial active child) + const monthYearButtons = [true, false].map(isInitialActiveChild => { + const { month, year } = getMonthYearText(isInitialActiveChild); + const isActiveMonth = month === getMonthName(activeDate.month); + const hiddenStatus = { + ...(isActiveMonth ? {} : { 'aria-hidden': true }), + }; + return ( +
+ + +
+ ); + }); + + return ( +
+ +
+   + {monthYearButtons} +
+ +
+ ); +}; + +export default Header; diff --git a/src/components/Calendar/CalendarComponents/components/MonthSelector.js b/src/components/Calendar/CalendarComponents/components/MonthSelector.js new file mode 100644 index 0000000..aafbd2c --- /dev/null +++ b/src/components/Calendar/CalendarComponents/components/MonthSelector.js @@ -0,0 +1,74 @@ +import React, { useRef, useEffect } from 'react'; + +import { isSameDay } from '../shared/generalUtils'; +import handleKeyboardNavigation from '../shared/keyboardNavigation'; +import { useLocaleUtils, useLocaleLanguage } from '../shared/hooks'; + +const MonthSelector = ({ activeDate, maximumDate, minimumDate, onMonthSelect, isOpen, locale }) => { + const monthSelector = useRef(null); + + useEffect(() => { + const classToggleMethod = isOpen ? 'add' : 'remove'; + monthSelector.current.classList[classToggleMethod]('-open'); + }, [isOpen]); + + const { getMonthNumber, isBeforeDate } = useLocaleUtils(locale); + const { months: monthsList } = useLocaleLanguage(locale); + + const handleKeyDown = e => { + handleKeyboardNavigation(e, { allowVerticalArrows: false }); + }; + + const renderMonthSelectorItems = () => + monthsList.map(persianMonth => { + const monthNumber = getMonthNumber(persianMonth); + const monthDate = { day: 1, month: monthNumber, year: activeDate.year }; + const isAfterMaximumDate = + maximumDate && isBeforeDate(maximumDate, { ...monthDate, month: monthNumber }); + const isBeforeMinimumDate = + minimumDate && + (isBeforeDate({ ...monthDate, month: monthNumber + 1 }, minimumDate) || + isSameDay({ ...monthDate, month: monthNumber + 1 }, minimumDate)); + const isSelected = monthNumber === activeDate.month; + return ( +
  • + +
  • + ); + }); + return ( +
    +
    +
      + {renderMonthSelectorItems()} +
    +
    +
    + ); +}; + +export default MonthSelector; diff --git a/src/components/Calendar/CalendarComponents/components/YearSelector.js b/src/components/Calendar/CalendarComponents/components/YearSelector.js new file mode 100644 index 0000000..115bad6 --- /dev/null +++ b/src/components/Calendar/CalendarComponents/components/YearSelector.js @@ -0,0 +1,99 @@ +import React, { useRef, useEffect } from 'react'; + +import { MINIMUM_SELECTABLE_YEAR_SUBTRACT, MAXIMUM_SELECTABLE_YEAR_SUM } from '../shared/constants'; +import handleKeyboardNavigation from '../shared/keyboardNavigation'; +import { useLocaleUtils } from '../shared/hooks'; + +const YearSelector = ({ + isOpen, + activeDate, + onYearSelect, + selectorStartingYear, + selectorEndingYear, + maximumDate, + minimumDate, + locale, +}) => { + const wrapperElement = useRef(null); + const yearListElement = useRef(null); + + const { getLanguageDigits, getToday } = useLocaleUtils(locale); + const startingYearValue = + selectorStartingYear || getToday().year - MINIMUM_SELECTABLE_YEAR_SUBTRACT; + const endingYearValue = selectorEndingYear || getToday().year + MAXIMUM_SELECTABLE_YEAR_SUM; + const allYears = []; + for (let i = startingYearValue; i <= endingYearValue; i += 1) { + allYears.push(i); + } + useEffect(() => { + const classToggleMethod = isOpen ? 'add' : 'remove'; + const activeSelectorYear = wrapperElement.current.querySelector( + '.Calendar__yearSelectorItem.-active', + ); + if (!activeSelectorYear) { + throw new RangeError( + `Provided value for year is out of selectable year range. You're probably using a wrong locale prop value or your provided value's locale is different from the date picker locale. Try changing the 'locale' prop or the value you've provided.`, + ); + } + wrapperElement.current.classList[classToggleMethod]('-faded'); + yearListElement.current.scrollTop = + activeSelectorYear.offsetTop - activeSelectorYear.offsetHeight * 5; + yearListElement.current.classList[classToggleMethod]('-open'); + }, [isOpen]); + + const renderSelectorYears = () => { + return allYears.map(item => { + const isAfterMaximumDate = maximumDate && item > maximumDate.year; + const isBeforeMinimumDate = minimumDate && item < minimumDate.year; + const isSelected = activeDate.year === item; + return ( +
  • + +
  • + ); + }); + }; + + const handleKeyDown = e => { + handleKeyboardNavigation(e, { allowVerticalArrows: false }); + }; + + return ( +
    +
    +
      + {renderSelectorYears()} +
    +
    +
    + ); +}; + +YearSelector.defaultProps = { + selectorStartingYear: 0, + selectorEndingYear: 0, +}; + +export default YearSelector; diff --git a/src/components/Calendar/CalendarComponents/components/index.js b/src/components/Calendar/CalendarComponents/components/index.js new file mode 100644 index 0000000..7cc422f --- /dev/null +++ b/src/components/Calendar/CalendarComponents/components/index.js @@ -0,0 +1,4 @@ +export { default as Header } from './Header'; +export { default as MonthSelector } from './MonthSelector'; +export { default as YearSelector } from './YearSelector'; +export { default as DaysList } from './DaysList'; diff --git a/src/components/Calendar/CalendarComponents/index.js b/src/components/Calendar/CalendarComponents/index.js new file mode 100644 index 0000000..75667ad --- /dev/null +++ b/src/components/Calendar/CalendarComponents/index.js @@ -0,0 +1,3 @@ +export { default } from './DatePicker'; +export * from './Calendar'; +export { default as utils } from './shared/localeUtils'; diff --git a/src/components/Calendar/CalendarComponents/shared/constants.js b/src/components/Calendar/CalendarComponents/shared/constants.js new file mode 100644 index 0000000..bceb3a1 --- /dev/null +++ b/src/components/Calendar/CalendarComponents/shared/constants.js @@ -0,0 +1,104 @@ +export const PERSIAN_NUMBERS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']; + +export const PERSIAN_MONTHS = [ + 'فروردین', + 'اردیبهشت', + 'خرداد', + 'تیر', + 'مرداد', + 'شهریور', + 'مهر', + 'آبان', + 'آذر', + 'دی', + 'بهمن', + 'اسفند', +]; + +export const GREGORIAN_MONTHS = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', +]; + +export const PERSIAN_WEEK_DAYS = [ + { + name: 'شنبه', + short: 'ش', + }, + { + name: 'یکشنبه', + short: 'ی', + }, + { + name: 'دوشنبه', + short: 'د', + }, + { + name: 'سه شنبه', + short: 'س', + }, + { + name: 'چهارشنبه', + short: 'چ', + }, + { + name: 'پنجشنبه', + short: 'پ', + }, + { + name: 'جمعه', + short: 'ج', + isWeekend: true, + }, +]; + +export const GREGORIAN_WEEK_DAYS = [ + { + name: 'Sunday', + short: 'S', + isWeekend: true, + }, + { + name: 'Monday', + short: 'M', + }, + { + name: 'Tuesday', + short: 'T', + }, + { + name: 'Wednesday', + short: 'W', + }, + { + name: 'Thursday', + short: 'T', + }, + { + name: 'Friday', + short: 'F', + }, + { + name: 'Saturday', + short: 'S', + isWeekend: true, + }, +]; + +export const MINIMUM_SELECTABLE_YEAR_SUBTRACT = 100; + +export const MAXIMUM_SELECTABLE_YEAR_SUM = 50; + +export const TYPE_SINGLE_DATE = 'SINGLE_DATE'; +export const TYPE_RANGE = 'RANGE'; +export const TYPE_MUTLI_DATE = 'MUTLI_DATE'; diff --git a/src/components/Calendar/CalendarComponents/shared/generalUtils.js b/src/components/Calendar/CalendarComponents/shared/generalUtils.js new file mode 100644 index 0000000..fd379b6 --- /dev/null +++ b/src/components/Calendar/CalendarComponents/shared/generalUtils.js @@ -0,0 +1,69 @@ +import { TYPE_SINGLE_DATE, TYPE_RANGE, TYPE_MUTLI_DATE } from './constants'; + +/* + These utility functions don't depend on locale of the date picker(Persian or Gregorian) +*/ + +const createUniqueRange = (number, startingId) => + Array.from(Array(number).keys()).map(key => ({ + value: key + 1, + id: `${startingId}-${key}`, + })); + +const isSameDay = (day1, day2) => { + if (!day1 || !day2) return false; + return day1.day === day2.day && day1.month === day2.month && day1.year === day2.year; +}; + +const putZero = number => (number.toString().length === 1 ? `0${number}` : number); + +const toExtendedDay = date => [date.year, date.month, date.day]; + +const shallowClone = value => ({ ...value }); + +const deepCloneObject = obj => + JSON.parse(JSON.stringify(obj, (key, value) => (typeof value === 'undefined' ? null : value))); + +const getDateAccordingToMonth = (date, direction) => { + const toSum = direction === 'NEXT' ? 1 : -1; + let newMonthIndex = date.month + toSum; + let newYear = date.year; + if (newMonthIndex < 1) { + newMonthIndex = 12; + newYear -= 1; + } + if (newMonthIndex > 12) { + newMonthIndex = 1; + newYear += 1; + } + const newDate = { year: newYear, month: newMonthIndex, day: 1 }; + return newDate; +}; + +const hasProperty = (object, propertyName) => + Object.prototype.hasOwnProperty.call(object || {}, propertyName); + +const getValueType = value => { + if (Array.isArray(value)) return TYPE_MUTLI_DATE; + if (hasProperty(value, 'from') && hasProperty(value, 'to')) return TYPE_RANGE; + if ( + !value || + (hasProperty(value, 'year') && hasProperty(value, 'month') && hasProperty(value, 'day')) + ) { + return TYPE_SINGLE_DATE; + } + throw new TypeError( + `The passed value is malformed! Please make sure you're using one of the valid value types for date picker.`, + ); +}; + +export { + createUniqueRange, + isSameDay, + putZero, + toExtendedDay, + shallowClone, + deepCloneObject, + getDateAccordingToMonth, + getValueType, +}; diff --git a/src/components/Calendar/CalendarComponents/shared/hooks.js b/src/components/Calendar/CalendarComponents/shared/hooks.js new file mode 100644 index 0000000..1656e5b --- /dev/null +++ b/src/components/Calendar/CalendarComponents/shared/hooks.js @@ -0,0 +1,10 @@ +import { useMemo } from 'react'; + +import utils from './localeUtils'; +import getLanguageText from './localeLanguages'; + +const useLocaleUtils = locale => useMemo(() => utils(locale), [locale]); + +const useLocaleLanguage = locale => useMemo(() => getLanguageText(locale), [locale]); + +export { useLocaleUtils, useLocaleLanguage }; diff --git a/src/components/Calendar/CalendarComponents/shared/keyboardNavigation.js b/src/components/Calendar/CalendarComponents/shared/keyboardNavigation.js new file mode 100644 index 0000000..f72d0ae --- /dev/null +++ b/src/components/Calendar/CalendarComponents/shared/keyboardNavigation.js @@ -0,0 +1,44 @@ +const handleArrowKeys = (e, { allowVerticalArrows }) => { + const { activeElement } = document; + const getNthChildSafe = (element, index) => (element ? element.children[index] : null); + const getStandardItem = item => item && (item.hasAttribute('aria-hidden') ? null : item); + const { nextSibling: nextRow, previousSibling: previousRow } = activeElement.parentElement; + const nextSibling = getStandardItem(activeElement.nextSibling || getNthChildSafe(nextRow, 0)); + const previousRowLength = previousRow ? previousRow.children.length - 1 : 0; + const previousSibling = getStandardItem( + activeElement.previousSibling || getNthChildSafe(previousRow, previousRowLength), + ); + const getVerticalSibling = row => + getNthChildSafe(row, Array.from(activeElement.parentElement.children).indexOf(activeElement)); + const downSibling = getStandardItem(getVerticalSibling(nextRow)); + const upSibling = getStandardItem(getVerticalSibling(previousRow)); + const isDefaultSelectable = activeElement.dataset.isDefaultSelectable === 'true'; + + if (!isDefaultSelectable) activeElement.tabIndex = '-1'; + const focusIfAvailable = element => { + e.preventDefault(); + /* istanbul ignore else */ + if (element) { + element.setAttribute('tabindex', '0'); + element.focus(); + } + }; + switch (e.key) { + case 'ArrowRight': + focusIfAvailable(nextSibling); + break; + case 'ArrowLeft': + focusIfAvailable(previousSibling); + break; + case 'ArrowDown': + /* istanbul ignore else */ + if (allowVerticalArrows) focusIfAvailable(downSibling); + break; + case 'ArrowUp': + /* istanbul ignore else */ + if (allowVerticalArrows) focusIfAvailable(upSibling); + break; + } +}; + +export default handleArrowKeys; diff --git a/src/components/Calendar/CalendarComponents/shared/localeLanguages.js b/src/components/Calendar/CalendarComponents/shared/localeLanguages.js new file mode 100644 index 0000000..806b1f5 --- /dev/null +++ b/src/components/Calendar/CalendarComponents/shared/localeLanguages.js @@ -0,0 +1,85 @@ +import jalaali from 'jalaali-js'; + +import { + GREGORIAN_MONTHS, + PERSIAN_MONTHS, + GREGORIAN_WEEK_DAYS, + PERSIAN_WEEK_DAYS, + PERSIAN_NUMBERS, +} from './constants'; +import { toExtendedDay } from './generalUtils'; + +const localeLanguages = { + en: { + months: GREGORIAN_MONTHS, + weekDays: GREGORIAN_WEEK_DAYS, + weekStartingIndex: 0, + getToday(gregorainTodayObject) { + return gregorainTodayObject; + }, + toNativeDate(date) { + return new Date(date.year, date.month - 1, date.day); + }, + getMonthLength(date) { + return new Date(date.year, date.month, 0).getDate(); + }, + transformDigit(digit) { + return digit; + }, + nextMonth: 'Next Month', + previousMonth: 'Previous Month', + openMonthSelector: 'Open Month Selector', + openYearSelector: 'Open Year Selector', + closeMonthSelector: 'Close Month Selector', + closeYearSelector: 'Close Year Selector', + from: 'from', + to: 'to', + defaultPlaceholder: 'Select...', + digitSeparator: ',', + yearLetterSkip: 0, + isRtl: false, + }, + fa: { + months: PERSIAN_MONTHS, + weekDays: PERSIAN_WEEK_DAYS, + weekStartingIndex: 1, + getToday({ year, month, day }) { + const { jy, jm, jd } = jalaali.toJalaali(year, month, day); + return { year: jy, month: jm, day: jd }; + }, + toNativeDate(date) { + const gregorian = jalaali.toGregorian(...toExtendedDay(date)); + return new Date(gregorian.gy, gregorian.gm - 1, gregorian.gd); + }, + getMonthLength(date) { + return jalaali.jalaaliMonthLength(date.year, date.month); + }, + transformDigit(digit) { + return digit + .toString() + .split('') + .map(letter => PERSIAN_NUMBERS[Number(letter)]) + .join(''); + }, + nextMonth: 'ماه بعد', + previousMonth: 'ماه قبل', + openMonthSelector: 'نمایش انتخابگر ماه', + openYearSelector: 'نمایش انتخابگر سال', + closeMonthSelector: 'بستن انتخابگر ماه', + closeYearSelector: 'بستن انتخابگر ماه', + from: 'از', + to: 'تا', + defaultPlaceholder: 'انتخاب...', + digitSeparator: '،', + yearLetterSkip: -2, + isRtl: true, + }, +}; + +const getLocaleDetails = locale => { + if (typeof locale === 'string') return localeLanguages[locale]; + return locale; +}; + +export { localeLanguages }; +export default getLocaleDetails; diff --git a/src/components/Calendar/CalendarComponents/shared/localeUtils.js b/src/components/Calendar/CalendarComponents/shared/localeUtils.js new file mode 100644 index 0000000..1055f94 --- /dev/null +++ b/src/components/Calendar/CalendarComponents/shared/localeUtils.js @@ -0,0 +1,61 @@ +/* + These utility functions highly depend on locale of the date picker(Persian or Gregorian) +*/ + +import getLocaleDetails from './localeLanguages'; + +const utils = (locale = 'en') => { + const { + months: monthsList, + getToday: localeGetToday, + toNativeDate, + getMonthLength, + weekStartingIndex, + transformDigit: getLanguageDigits, + } = typeof locale === 'string' ? getLocaleDetails(locale) : locale; + + const getToday = () => { + const todayDate = new Date(); + const year = todayDate.getFullYear(); + const month = todayDate.getMonth() + 1; + const day = todayDate.getDate(); + return localeGetToday({ year, month, day }); + }; + + const getMonthName = month => monthsList[month - 1]; + + const getMonthNumber = monthName => monthsList.indexOf(monthName) + 1; + + const getMonthFirstWeekday = date => { + const gregorianDate = toNativeDate({ ...date, day: 1 }); + const weekday = gregorianDate.getDay(); + const dayIndex = weekday + weekStartingIndex; + return dayIndex % 7; + }; + + const isBeforeDate = (day1, day2) => { + if (!day1 || !day2) return false; + return toNativeDate(day1) < toNativeDate(day2); + }; + + const checkDayInDayRange = ({ day, from, to }) => { + if (!day || !from || !to) return false; + const nativeDay = toNativeDate(day); + const nativeFrom = toNativeDate(from); + const nativeTo = toNativeDate(to); + return nativeDay > nativeFrom && nativeDay < nativeTo; + }; + + return { + getToday, + getMonthName, + getMonthNumber, + getMonthLength, + getMonthFirstWeekday, + isBeforeDate, + checkDayInDayRange, + getLanguageDigits, + }; +}; + +export default utils; diff --git a/src/components/Calendar/CalendarComponents/shared/sliderHelpers.js b/src/components/Calendar/CalendarComponents/shared/sliderHelpers.js new file mode 100644 index 0000000..524e49a --- /dev/null +++ b/src/components/Calendar/CalendarComponents/shared/sliderHelpers.js @@ -0,0 +1,33 @@ +import { getDateAccordingToMonth } from './generalUtils'; + +const getSlideDate = ({ parent, isInitialActiveChild, activeDate, monthChangeDirection }) => { + if (!parent) { + return isInitialActiveChild ? activeDate : getDateAccordingToMonth(activeDate, 'NEXT'); + } + const child = parent.children[isInitialActiveChild ? 0 : 1]; + const isActiveSlide = + child.classList.contains('-shown') || child.classList.contains('-shownAnimated'); // check -shownAnimated for Safari bug + return isActiveSlide ? activeDate : getDateAccordingToMonth(activeDate, monthChangeDirection); +}; + +const animateContent = ({ parent, direction }) => { + const wrapperChildren = Array.from(parent.children); + const shownItem = wrapperChildren.find(child => child.classList.contains('-shown')); + const hiddenItem = wrapperChildren.find(child => child !== shownItem); + const baseClass = shownItem.classList[0]; + const isNextMonth = direction === 'NEXT'; + const getAnimationClass = value => (value ? '-hiddenNext' : '-hiddenPrevious'); + hiddenItem.style.transition = 'none'; + shownItem.style.transition = ''; + shownItem.className = `${baseClass} ${getAnimationClass(!isNextMonth)}`; + hiddenItem.className = `${baseClass} ${getAnimationClass(isNextMonth)}`; + hiddenItem.classList.add('-shownAnimated'); +}; + +const handleSlideAnimationEnd = ({ target }) => { + target.classList.remove('-hiddenNext'); + target.classList.remove('-hiddenPrevious'); + target.classList.replace('-shownAnimated', '-shown'); +}; + +export { animateContent, getSlideDate, handleSlideAnimationEnd }; diff --git a/src/components/Calendar/index.css b/src/components/Calendar/index.css index b27a926..3918dba 100644 --- a/src/components/Calendar/index.css +++ b/src/components/Calendar/index.css @@ -666,7 +666,23 @@ position: relative; z-index: 1; } - + + .Calendar .holiday span{ + color:#ff2929; + } + .Calendar .DayNumDiv{ + display: flex; + flex-direction: column; + } + .Calendar .DayNumDiv span{ + margin: 0; + padding: 0; + margin-bottom: -5px; + } + .Calendar .DayNumDiv .eventDots{ + margin-top: -10px; + font-size: 20px; + } @keyframes fadeCalendar { from { opacity: 0; diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 08e03e4..091b177 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -1,15 +1,14 @@ import React, { useState } from "react"; import './index.css'; -import {Calendar, utils} from "react-modern-calendar-datepicker"; +import Calendar from "./CalendarComponents"; +import { utils } from "./CalendarComponents"; import './index.css'; const SimpleCalendar = () =>{ const [selectedDay, setSelectedDay] = useState(null); - const gotoToday = () =>{ - setSelectedDay(utils('fa').getToday()); - } + return(
    @@ -17,12 +16,65 @@ const SimpleCalendar = () =>{ value={selectedDay} onChange={setSelectedDay} shouldHighlightWeekends - renderFooter={() =>
    } + renderFooter={() =>
    } + // customDaysClassName={specialDays} + events={[]} locale="fa" // add this />
    ); }; +// const specialDays = [ +// { +// year: 1400, +// month: 10, +// day: 23, +// className: 'specialDay', +// events:[ +// { +// id:1, +// title:'دی به دین روز، چهارمین جشن دیگان', +// dotColor: '#eeffds1' +// }, +// { +// id:2, +// title:'مصاحبه کاری', +// dotColor: 'red' +// }, +// { +// id:3, +// title:'اجاره خانه', +// dotColor: 'blue' +// } +// ] +// }, +// { +// year: 1400, +// month: 10, +// day: 16, +// className: 'specialDay holiday' +// }, +// { +// year: 1400, +// month: 10, +// day: 30, +// className: 'specialDay' +// }, +// { +// year: 1400, +// month: 10, +// day: 4, +// className: 'specialDay' +// }, +// { +// year: 1400, +// month: 10, +// day: 13, +// className: 'specialDay' +// }, + +// ]; + export default SimpleCalendar; \ No newline at end of file diff --git a/src/components/RangeDatePicker/index.css b/src/components/RangeDatePicker/index.css new file mode 100644 index 0000000..d19abc0 --- /dev/null +++ b/src/components/RangeDatePicker/index.css @@ -0,0 +1,710 @@ +.DatePicker { + position: relative; + display: inline-block; + z-index: 100; + } + + .DatePicker__input { + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.4); + padding: 0.6em 1.2em; + font-family:'iranSans'; + text-align: center; + font-size: 12px; + border-radius: 7px; + + } + .DatePicker__input:focus{ + outline:1px solid #06BACE; + color: #06BACE; + } + + .DatePicker__input.-rtl { + direction: rtl; + } + + .DatePicker__input::placeholder { + color: #979797; + } + .DatePicker__input:focus::placeholder{ + color: #06BACE; + } + + .DatePicker__calendarContainer.-top + .DatePicker__calendarArrow { + top: auto; + bottom: calc(100% + 10px); + transform: translateY(-2.5rem) rotate(180deg); + animation: fadeArrowFlipped 0.3s forwards; + } + + .DatePicker__calendarContainer { + position: absolute; + top: calc(100% + 20px); + left: 50%; + transform: translateX(-50%); + } + + .DatePicker__calendarContainer.-top { + top: auto; + bottom: calc(100% + 20px); + } + + .range-date-picker, + .range-date-picker * { + margin: 0; + padding: 0; + box-sizing: border-box; + direction: ltr; + } + + .range-date-picker, + .range-date-picker.-rtl * { + direction: rtl; + } + + .DatePicker__calendarArrow { + position: absolute; + width: 0; + height: 0; + top: calc(100% + 10px); + left: 0; + right: 0; + margin: 0 auto; + border-style: solid; + z-index: 10; + border-width: 0 10px 10px 10px; + border-color: transparent transparent #fff transparent; + + } + + .range-date-picker { + --cl-color-black: #444444; + --cl-color-disabled: #d4d4d4; + --cl-color-error: #ff2929; + font-family:'iranSans'; + font-size: 10px; + background: rgba(245, 245, 245, 0.53); + border:1px solid #DBDBDB; + box-shadow: 0 1em em rgba(0, 0, 0, 0.07); + border-radius: 1em; + position: relative; + user-select: none; + padding-top: 1.2em; + display: flex; + flex-direction: column; + width: 40em; + z-index: 10; + max-width: 90vw; + min-height: 38.7em; + } + + .DatePicker .range-date-picker, + .DatePicker__calendarArrow { + transform: translateY(2.5em); + opacity: 0; + animation: fadeCalendar 0.3s forwards; + + } + + .DatePicker__calendarContainer.-top .range-date-picker { + transform: translateY(-2.5em); + } + + .range-date-picker.-noFocusOutline *:focus { + outline: none !important; + } + + .range-date-picker > :not(.Calendar__footer) button { + font-family: inherit; + background: transparent; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + outline: none; + } + + .Calendar__header { + display: flex; + color: var(--cl-color-black); + padding: 2em 2.9em; + align-items: center; + overflow: hidden; + } + + .Calendar__monthArrowWrapper { + line-height: 0; + font-size: 1em; + padding: 3px; + position: relative; + border: none; + z-index: 1; + opacity: 1; + transition: 0.2s; + background-color: #06BACE; + } + + .Calendar__monthArrowWrapper:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; + } + + .Calendar__monthArrowWrapper:disabled, + .Calendar__monthArrowWrapper.-hidden { + opacity: 0; + pointer-events: none; + } + + .Calendar__monthArrowWrapper.-left { + transform: rotate(180deg); + } + .range-date-picker.-rtl .Calendar__monthArrowWrapper.-left { + transform: rotate(-180deg); + } + + .Calendar__monthArrowWrapper.-right { + transform: rotate(-0deg); + + } + .range-date-picker.-rtl .Calendar__monthArrowWrapper.-right { + transform: rotate(0deg); + } + + .Calendar__monthArrowWrapper:active .Calendar__monthArrow { + transform: scale(0.7); + } + + .Calendar__monthArrow { + border-radius: 7px; + padding: 12px; + transition: var(--animation-duration) transform; + pointer-events: none; + background-repeat: no-repeat; + display: block; + width: 0.7em; + height: 0.7em; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15' viewBox='0 0 50 80' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23FFFFFF' stroke-width='15' stroke-linecap='round' stroke-linejoin='round' points=' 0.375,0.375 45.63,38.087 0.375,75.8 '/%3E%3C/svg%3E"); background-size: 100% 100%; + background-color: #06BACE; + background-size: 10px; + background-position: center; + } + + .Calendar__monthYearContainer { + flex: 1; + position: relative; + } + + .Calendar__monthYear { + font-size: 2em; + font-weight: 500; + display: flex; + align-items: center; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + will-change: transform, opacity; + backface-visibility: hidden; + transform: translateZ(0); + transition: var(--animation-duration); + line-height: 1; + color:#246E8A; + } + + .Calendar__monthYear.-hiddenNext { + opacity: 0; + transform: translateX(50%); + } + + .range-date-picker.-rtl .Calendar__monthYear.-hiddenNext { + transform: translateX(-150%); + } + + .Calendar__monthYear.-hiddenPrevious { + opacity: 0; + transform: translateX(-150%); + } + + .range-date-picker.-rtl .Calendar__monthYear.-hiddenPrevious { + transform: translateX(50%); + } + + .Calendar__monthYear.-shown { + opacity: 1; + margin-top: auto; + margin-bottom: auto; + transform: translateX(-50%); + } + + .Calendar__monthYear.-shownAnimated { + animation: var(--animation-duration) fadeTextToCenter forwards; + } + + .Calendar__monthYear > * { + padding: 0.2em 0.5em; + border: 1px solid transparent; + transition: var(--animation-duration); + font-size: 1.05em; + display: flex; + justify-content: center; + align-items: center; + transform: translateX(0) scale(0.95); + will-change: transform; + border-radius: 5px; + } + + .Calendar__monthYear:not(.-shown) > *, + .Calendar__monthYear > *.-hidden { + cursor: default; + pointer-events: none; + } + + .Calendar__monthText { + margin-left: -0.3em; + } + .Calendar__yearText:last-child { + margin-right: -0.3em; + } + + .Calendar__monthYear.-shown > *:hover, + .range-date-picker:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus, + .Calendar__monthYear > *.-activeBackground { + background: #f5f5f5; + } + + .Calendar__monthText:hover { + transform: translateX(-0.2em) scale(0.95); + } + .range-date-picker.-rtl .Calendar__monthText:hover { + transform: translateX(0.2em) scale(0.95); + } + + .Calendar__yearText:hover { + transform: translateX(0.2em) scale(0.95); + } + .range-date-picker.-rtl .Calendar__yearText:hover { + transform: translateX(-0.2em) scale(0.95); + } + + .Calendar__monthYear .Calendar__yearText.-hidden { + transform: translateX(50%); + opacity: 0; + } + + .range-date-picker.-rtl .Calendar__monthYear .Calendar__yearText.-hidden { + transform: translateX(-50%); + } + + .Calendar__monthYear .Calendar__monthText.-hidden { + transform: translateX(-50%); + opacity: 0; + } + + .range-date-picker.-rtl .Calendar__monthYear .Calendar__monthText.-hidden { + transform: translateX(50%); + } + + .Calendar__monthYear:not(.-shown) > * { + pointer-events: none; + } + + .Calendar__monthSelectorAnimationWrapper, + .Calendar__yearSelectorAnimationWrapper { + position: absolute; + width: 100%; + height: 80%; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .Calendar__monthSelectorWrapper { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .Calendar__monthSelector { + padding: 0 2.5em; + align-content: center; + padding-bottom: 2em; + } + + .Calendar__monthSelector, + .Calendar__yearSelector { + display: flex; + flex-wrap: wrap; + position: relative; + z-index: 2; + background-color: #fff; + transform: translateY(-150%); + will-change: transform; + transition: 0.6s; + height: 100%; + } + + .Calendar__yearSelectorWrapper { + width: 100%; + height: 100%; + } + + .Calendar__yearSelectorWrapper::after, + .Calendar__yearSelectorWrapper::before { + content: ''; + width: 100%; + height: 5em; + position: absolute; + left: 0; + opacity: 0; + transition: 0.4s; + transition-delay: 0.2s; + } + + .Calendar__yearSelectorWrapper::after { + background-image: linear-gradient(to bottom, #fff, #fff 10%, rgba(245, 245, 245, 0)); + top: -0.1em; + } + + .Calendar__yearSelectorWrapper::before { + background-image: linear-gradient(to top, #fff, #fff 10%, rgba(245, 245, 245, 0)); + bottom: 0; + } + + .Calendar__yearSelectorWrapper.-faded::after, + .Calendar__yearSelectorWrapper.-faded::before { + opacity: 1; + z-index: 3; + } + + .Calendar__yearSelector { + align-content: flex-start; + scrollbar-width: 0; + overflow: scroll; + position: relative; + width: 100%; + padding: 5em 2em; + -ms-overflow-style: none; + } + + .Calendar__yearSelector::-webkit-scrollbar { + display: none; + } + + .Calendar__yearSelectorItem { + width: 25%; + display: flex; + justify-content: center; + } + + .Calendar__yearSelectorItem:not(:nth-child(-n + 4)) { + margin-top: 1.5em; + } + + .Calendar__yearSelectorText { + border: none; + font-size: 1.4em; + min-width: 85%; + padding: 0.2em 0.5em; + border-radius: 5px; + } + + .Calendar__monthSelector.-open, + .Calendar__yearSelector.-open { + transform: translateY(0); + } + + .Calendar__yearSelectorText:focus, + .Calendar__monthSelectorItemText:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; + } + + .Calendar__monthSelectorItem { + width: calc(100% / 3); + display: flex; + justify-content: center; + } + + .Calendar__monthSelectorItem:not(:nth-child(-n + 3)) { + margin-top: 2em; + } + + .Calendar__monthSelectorItemText { + border: none; + padding: 0.4em 0.4em; + border-radius: 8.5px; + font-size: 1.3em; + min-width: 70%; + transition: 0.3s; + } + + .Calendar__monthSelectorItem:not(.-active) .Calendar__monthSelectorItemText:not(:disabled):hover, + .Calendar__yearSelectorItem:not(.-active) .Calendar__yearSelectorText:not(:disabled):hover { + background: #f5f5f5; + } + + .Calendar__monthSelectorItemText:disabled, + .Calendar__yearSelectorText:disabled { + opacity: 0.5; + cursor: default; + } + + .Calendar__monthSelectorItem.-active .Calendar__monthSelectorItemText, + .Calendar__yearSelectorItem.-active .Calendar__yearSelectorText { + background-color: #006C94; + color: #fff; + } + + .Calendar__weekDays { + display: flex; + justify-content: space-between; + color: var(--cl-color-disabled); + font-size: 1.2em; + margin-bottom: 0.7em; + padding: 0 2.6em; + position: relative; + } + + .Calendar__weekDay { + display: block; + width: calc(100% / 7); + + text-align: center; + text-decoration: none; + border: 0px; + color: #06BACE; + margin:0.2em; + white-space: nowrap; + } + .Calendar__weekDay[title]{ + text-decoration: none; + } + + .Calendar__sectionWrapper { + position: relative; + min-height: 25.8em; + overflow: hidden; + } + + .Calendar__section { + display: flex; + flex-direction: column; + padding: 0 3.2em; + position: absolute; + color: var(--cl-color-black); + top: 0; + padding-top: 0.5em; + left: 0; + width: 100%; + will-change: transform, opacity; + transform: translateZ(0); + backface-visibility: hidden; + transition: var(--animation-duration); + } + + .Calendar__section.-hiddenPrevious { + opacity: 0.5; + transform: translateX(-90%); + } + + .range-date-picker.-rtl .Calendar__section.-hiddenPrevious { + transform: translateX(90%); + } + + .Calendar__section.-hiddenNext { + opacity: 0.5; + transform: translateX(90%); + } + + .range-date-picker.-rtl .Calendar__section.-hiddenNext { + transform: translateX(-90%); + } + + .Calendar__section.-shown { + opacity: 1; + transform: translateX(0); + } + + .Calendar__section.-shownAnimated { + animation: var(--animation-duration) FadeContentToCenter forwards; + } + + .Calendar__weekRow { + display: flex; + width: 100%; + } + + .range-date-picker .Calendar__section .Calendar__weekRow .Calendar__day { + display: block; + width: calc(100% / 7); + text-align: center; + padding: calc(0.25em - 1px); + font-size: 1.6em; + transition: 0.2s; + border: 1px solid transparent; + color: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + border-radius: 7px; + + + } + + .Calendar__day:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; + } + + .Calendar__day.-ltr { + min-height: 2.6em; + font-size: 1.45em; + } + + .Calendar__day.-rtl { + font-size: 1.55em; + height: 2.45em; + } + + .range-date-picker .Calendar__section .Calendar__weekRow .Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover { + + + color: #06BACE; + border:1px solid #06BACE; + } + + .Calendar__day.-selected, + .Calendar__day.-selectedStart, + .Calendar__day.-selectedEnd { + background: #006C94; + color: #fff; + } + + .Calendar__day.-ltr.-selectedStart { + border-radius: 0; + border-top-left-radius: 7px; + border-bottom-left-radius: 7px; + } + + .Calendar__day.-rtl.-selectedStart { + border-radius: 0; + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; + } + + .Calendar__day.-selectedBetween { + background:rgba(0, 108, 148, 0.07); + + border-radius: 0; + } + + .Calendar__day.-ltr.-selectedEnd { + border-radius: 0; + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; + } + + .Calendar__day.-rtl.-selectedEnd { + border-radius: 0; + border-top-left-radius: 7px; + border-bottom-left-radius: 7px; + } + + .Calendar__day.-weekend:not(.-selected):not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { + color: var(--cl-color-error); + } + + .Calendar__day.-weekend.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + background: var(--cl-color-error); + } + + .Calendar__day.-disabled { + color: var(--cl-color-disabled) !important; + background: transparent !important; + cursor: default !important; + } + .Calendar__day.-selected { + + } + .Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { + font-weight: 600; + color: var(--cl-color-black); + color: #000; + position: relative; + } + + .Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + content: ''; + position: absolute; + bottom: 0.2em; + display: block; + width: 0.6em; + height: 1px; + background: #000; + left: 50%; + opacity: 0.5; + transform: translateX(-50%); + transition: 0.2s; + } + + .Calendar__day.-today:hover:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + opacity: 0; + } + + .Calendar__day.-blank { + color: transparent; + cursor: default; + pointer-events: none; + } + + .Calendar__footer { + position: relative; + z-index: 1; + } + + .range-date-picker .specialDay span{ + border-bottom: 4px dotted #444444; + } + .range-date-picker .holiday span{ + color:#ff2929; + } + + @keyframes fadeCalendar { + from { + opacity: 0; + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + @keyframes fadeArrowFlipped { + from { + opacity: 0; + } + + to { + opacity: 1; + transform: translateY(0) rotate(180deg); + } + } + + @keyframes fadeTextToCenter { + to { + opacity: 1; + transform: translateX(-50%); + } + } + + @keyframes FadeContentToCenter { + to { + opacity: 1; + transform: translateX(0); + } + } + \ No newline at end of file diff --git a/src/components/RangeDatePicker/index.js b/src/components/RangeDatePicker/index.js index 1c9dbc6..1549a03 100644 --- a/src/components/RangeDatePicker/index.js +++ b/src/components/RangeDatePicker/index.js @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import "../Calendar/index.css"; +import "./index.css"; import DatePicker from "react-modern-calendar-datepicker"; const RangeDatePicker = () => { @@ -15,6 +15,7 @@ const RangeDatePicker = () => { inputPlaceholder="یک بازه زمانی انتخاب کنید" shouldHighlightWeekends locale='fa' + /> ); }; diff --git a/src/components/SidebarCategoryHover/index.js b/src/components/SidebarCategoryHover/index.js index 1c82ed8..72c9731 100644 --- a/src/components/SidebarCategoryHover/index.js +++ b/src/components/SidebarCategoryHover/index.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import category from "./data"; -import List from "./List"; +import List from "./list"; import _ from "lodash"; export default function SidebarCategoryHover() { From 503ad23094da9e67b47928a69871cddde0dc7f73 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Wed, 12 Jan 2022 11:43:26 +0330 Subject: [PATCH 02/11] Calendar Days Style Done --- src/components/Calendar/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Calendar/index.css b/src/components/Calendar/index.css index 3918dba..5ef400c 100644 --- a/src/components/Calendar/index.css +++ b/src/components/Calendar/index.css @@ -538,14 +538,14 @@ .Calendar__day { display: block; - width: calc(100% / 7); + width: calc(100% / 7 - 6px); text-align: center; padding: calc(0.25em - 1px); font-size: 1.6em; border-radius: 7px; transition: 0.2s; border: 1px solid transparent; - margin:0.2em; + margin:3px; color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; From 44f6c02a025240d8d63c78b8cd1c0b2bb1a1cd5c Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Sun, 16 Jan 2022 13:47:09 +0330 Subject: [PATCH 03/11] Various Changes On Calendar Component Separating components from each other (it was showing them all as date pickers) Adding The Data Model Mr.Gorji Made and Using it Adding The Description of Event Showing in footer By Clicking the Day Next Step: Making Changes On The Dots in Days Lists Getting And Comparing Month and year from Data and into The Component --- .../Calendar/CalendarComponents/Calendar.js | 90 +++++++++++++------ .../Calendar/CalendarComponents/DatePicker.js | 2 +- .../CalendarComponents/components/DaysList.js | 22 ++--- .../Calendar/CalendarComponents/index.js | 2 +- src/components/Calendar/index.css | 8 ++ src/components/Calendar/index.js | 3 +- src/components/SimpleDatePicker/index.js | 3 +- 7 files changed, 87 insertions(+), 43 deletions(-) diff --git a/src/components/Calendar/CalendarComponents/Calendar.js b/src/components/Calendar/CalendarComponents/Calendar.js index 1adde35..88f9d9f 100644 --- a/src/components/Calendar/CalendarComponents/Calendar.js +++ b/src/components/Calendar/CalendarComponents/Calendar.js @@ -14,7 +14,7 @@ import { useLocaleUtils, useLocaleLanguage } from './shared/hooks'; import { Header, MonthSelector, YearSelector, DaysList } from './components'; -export const Calendar = ({ + const Calendar = ({ value, onChange, onDisabledDayError, @@ -37,6 +37,7 @@ export const Calendar = ({ renderFooter, customDaysClassName, events, + renderEvents, }) => { const calendarElement = useRef(null); const [mainState, setMainState] = useState({ @@ -45,7 +46,7 @@ export const Calendar = ({ isMonthSelectorOpen: false, isYearSelectorOpen: false, }); - + const [eventInFooter, setEventInFooter] = useState(null); useEffect(() => { const handleKeyUp = ({ key }) => { /* istanbul ignore else */ @@ -188,11 +189,16 @@ export const Calendar = ({ shouldHighlightWeekends={shouldHighlightWeekends} customDaysClassName={customDaysClassName} events={events} + renderFooter={renderFooter} + renderEvents={renderEvents} isQuickSelectorOpen={ mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen } + showEvent={event => setEventInFooter(event)} /> -
    {renderFooter()}
    +
    +

    {eventInFooter}

    + {renderFooter()}
    ); }; @@ -207,36 +213,64 @@ Calendar.defaultProps = { locale: 'en', value: null, renderFooter: () => null, + renderEvents : () => null, customDaysClassName: [], events: [ - { - id: 1, - day: 15, - occasions: [ - { - title: 'دی به دین روز، چهارمین جشن دیگان', - dotColor: '#eeffds1', - }, - { - title: 'lorem', - dotColor: 'blue' - } - ] - - }, { id: 2, - day: 22, - title: 'مصاحبه کاری', - dotColor: 'red', - }, - { - id: 3, - title: 'اجاره خانه', - day: 21, - dotColor: 'blue', - }, + description: "تست 2", + type: "global", + isHoliday: false, + date: "2022-01-04T00:00:00.000Z", + year: 2022, + month: 1, + day: 2 + }, + { + id: 4, + description: "تست 4", + type: "global", + isHoliday: true, + date: "2022-01-12T00:00:00.000Z", + year: 2022, + month: 1, + day: 3 + }, + { + id: 1, + description: "تست کاربر 1", + type: "userDefined", + userId: "5", + date: "2022-01-12T00:00:00.000Z", + categoryId: 1, + year: 2022, + month: 1, + day: 3 + }, + { + id: 4, + description: "تست کاربر 4", + type: "userDefined", + userId: "5", + date: "2022-01-08T00:00:00.000Z", + categoryId: 3, + year: 2022, + month: 1, + day: 6 + }, + { + id: 5, + description: "تست کاربر 5", + type: "userDefined", + userId: "5", + date: "2022-01-12T00:00:00.000Z", + categoryId: 1, + year: 2022, + month: 1, + day: 3 + } ], }; +export default Calendar; \ No newline at end of file diff --git a/src/components/Calendar/CalendarComponents/DatePicker.js b/src/components/Calendar/CalendarComponents/DatePicker.js index 5b83b35..6f81669 100644 --- a/src/components/Calendar/CalendarComponents/DatePicker.js +++ b/src/components/Calendar/CalendarComponents/DatePicker.js @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'; -import { Calendar } from './Calendar'; +import Calendar from './Calendar'; import DatePickerInput from './DatePickerInput'; import { getValueType } from './shared/generalUtils'; import { TYPE_SINGLE_DATE, TYPE_MUTLI_DATE, TYPE_RANGE } from './shared/constants'; diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js index dda528f..5681646 100644 --- a/src/components/Calendar/CalendarComponents/components/DaysList.js +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -39,6 +39,7 @@ const DaysList = ({ isQuickSelectorOpen, customDaysClassName, events, + showEvent, }) => { const calendarSectionWrapper = useRef(null); const { isRtl, weekDays: weekDaysList } = useLocaleLanguage(locale); @@ -254,10 +255,6 @@ const DaysList = ({ isStandard, }); const specialDay = (sDay) => { - // let specialDayArray = []; - // console.log(sDay); - - // specialDayArray.push(events[i].day); var eventDate; for (var i = 0; i < events.length; i++) { if (sDay == events[i].day) { @@ -266,13 +263,18 @@ const DaysList = ({ } } - // sDay = events[0].day; - // return sDay; - // console.log(sDay); - // console.log(specialDayArray[0]) }; - + const showEventDescription = (sDay) => { + var eventDate; + for (var i = 0; i < events.length; i++) { + if (sDay == events[i].day) { + + return(events[i].description); + + } + } + } return (
    { handleDayPress({ ...dayItem, isDisabled }); console.log(specialDay(day)); - console.log(day) + showEvent(showEventDescription(day)) }} onKeyDown={({ key }) => { /* istanbul ignore else */ diff --git a/src/components/Calendar/CalendarComponents/index.js b/src/components/Calendar/CalendarComponents/index.js index 75667ad..a983b77 100644 --- a/src/components/Calendar/CalendarComponents/index.js +++ b/src/components/Calendar/CalendarComponents/index.js @@ -1,3 +1,3 @@ -export { default } from './DatePicker'; +export { default} from './DatePicker'; export * from './Calendar'; export { default as utils } from './shared/localeUtils'; diff --git a/src/components/Calendar/index.css b/src/components/Calendar/index.css index 5ef400c..84fcee7 100644 --- a/src/components/Calendar/index.css +++ b/src/components/Calendar/index.css @@ -666,6 +666,14 @@ position: relative; z-index: 1; } + .Calendar__footer .footer__Events{ + display: flex; + flex-direction: column; + align-items: center; + font-size: 12px; + font-family: 'IranSans'; + padding: 3px; + } .Calendar .holiday span{ color:#ff2929; diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 091b177..7ca6858 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import './index.css'; -import Calendar from "./CalendarComponents"; +import Calendar from "./CalendarComponents/Calendar"; import { utils } from "./CalendarComponents"; import './index.css'; @@ -18,7 +18,6 @@ const SimpleCalendar = () =>{ shouldHighlightWeekends renderFooter={() =>
    } // customDaysClassName={specialDays} - events={[]} locale="fa" // add this />
    diff --git a/src/components/SimpleDatePicker/index.js b/src/components/SimpleDatePicker/index.js index bfef5af..25c00f8 100644 --- a/src/components/SimpleDatePicker/index.js +++ b/src/components/SimpleDatePicker/index.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import DatePicker, {utils} from "react-modern-calendar-datepicker"; +import DatePicker from "../Calendar/CalendarComponents"; +import { utils } from "../Calendar/CalendarComponents"; import '../Calendar/index.css'; const SimpleDatePicker = (props) =>{ const [selectedDay, setSelectedDay] = useState(null); From 517175d6368437d6d902f73f249ced3da1b21510 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Sun, 16 Jan 2022 14:55:26 +0330 Subject: [PATCH 04/11] Dots Styling Done --- .../CalendarComponents/components/DaysList.js | 16 +++--- src/components/Calendar/index.css | 25 ++++++++- src/components/Calendar/index.js | 56 +------------------ 3 files changed, 33 insertions(+), 64 deletions(-) diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js index 5681646..33164eb 100644 --- a/src/components/Calendar/CalendarComponents/components/DaysList.js +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -258,9 +258,9 @@ const DaysList = ({ var eventDate; for (var i = 0; i < events.length; i++) { if (sDay == events[i].day) { - + return sDay; - + } } @@ -269,9 +269,9 @@ const DaysList = ({ var eventDate; for (var i = 0; i < events.length; i++) { if (sDay == events[i].day) { - - return(events[i].description); - + + return (events[i].description); + } } } @@ -306,7 +306,7 @@ const DaysList = ({ data-is-default-selectable={shouldEnableKeyboardNavigation} > {!isStandard ? '' : getLanguageDigits(day)} - {specialDay(day) == day ? '.' : null} + {specialDay(day) == day ? . : ' '} ); }; @@ -373,8 +373,8 @@ const DaysList = ({ }; DaysList.defaultProps = { - onChange: () => {}, - onDisabledDayError: () => {}, + onChange: () => { }, + onDisabledDayError: () => { }, disabledDays: [], calendarTodayClassName: '', calendarSelectedDayClassName: '', diff --git a/src/components/Calendar/index.css b/src/components/Calendar/index.css index 84fcee7..a1681c8 100644 --- a/src/components/Calendar/index.css +++ b/src/components/Calendar/index.css @@ -1,3 +1,7 @@ +.Calendar *{ + font-family: 'iranSans'; +} + .DatePicker { position: relative; display: inline-block; @@ -537,7 +541,6 @@ } .Calendar__day { - display: block; width: calc(100% / 7 - 6px); text-align: center; padding: calc(0.25em - 1px); @@ -548,12 +551,19 @@ margin:3px; color: rgba(0, 0, 0, 0.8); display: flex; - justify-content: center; align-items: center; + cursor: pointer; + vertical-align: middle; background-color: #F3F3F3; color:#06BACE; + } + .Calendar__day span{ + padding: -10px; + margin-top: -30px; + font-size: 28px; + } .Calendar__day:focus { @@ -691,6 +701,17 @@ margin-top: -10px; font-size: 20px; } + .GoToTodayButton{ + background-color: #006C94; + padding: 7.5px; + font-size: 12px; + color:white; + font-family: 'iranSans'; + border-radius: 50%; + float: left; + margin: 15px; + + } @keyframes fadeCalendar { from { opacity: 0; diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 7ca6858..b8e91cb 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -16,64 +16,12 @@ const SimpleCalendar = () =>{ value={selectedDay} onChange={setSelectedDay} shouldHighlightWeekends - renderFooter={() =>
    } - // customDaysClassName={specialDays} - locale="fa" // add this + renderFooter={() =>
    } + locale="fa" /> ); }; -// const specialDays = [ -// { -// year: 1400, -// month: 10, -// day: 23, -// className: 'specialDay', -// events:[ -// { -// id:1, -// title:'دی به دین روز، چهارمین جشن دیگان', -// dotColor: '#eeffds1' -// }, -// { -// id:2, -// title:'مصاحبه کاری', -// dotColor: 'red' -// }, -// { -// id:3, -// title:'اجاره خانه', -// dotColor: 'blue' -// } -// ] -// }, -// { -// year: 1400, -// month: 10, -// day: 16, -// className: 'specialDay holiday' -// }, -// { -// year: 1400, -// month: 10, -// day: 30, -// className: 'specialDay' -// }, -// { -// year: 1400, -// month: 10, -// day: 4, -// className: 'specialDay' -// }, -// { -// year: 1400, -// month: 10, -// day: 13, -// className: 'specialDay' -// }, - -// ]; - export default SimpleCalendar; \ No newline at end of file From 1d9f4efa7c0b6580f1a4be7ebea830ce38cc3534 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Sun, 16 Jan 2022 15:15:14 +0330 Subject: [PATCH 05/11] calendar Events Almost Done Has Some Errors --- .../Calendar/CalendarComponents/Calendar.js | 56 +-------- .../CalendarComponents/components/DaysList.js | 1 + src/components/Calendar/index.js | 80 +++++++++++-- src/components/RangeDatePicker/index.css | 106 ++++++++++++------ src/components/RangeDatePicker/index.js | 2 +- 5 files changed, 144 insertions(+), 101 deletions(-) diff --git a/src/components/Calendar/CalendarComponents/Calendar.js b/src/components/Calendar/CalendarComponents/Calendar.js index 88f9d9f..cbcf0f8 100644 --- a/src/components/Calendar/CalendarComponents/Calendar.js +++ b/src/components/Calendar/CalendarComponents/Calendar.js @@ -215,61 +215,7 @@ Calendar.defaultProps = { renderFooter: () => null, renderEvents : () => null, customDaysClassName: [], - events: [ - { - id: 2, - description: "تست 2", - type: "global", - isHoliday: false, - date: "2022-01-04T00:00:00.000Z", - year: 2022, - month: 1, - day: 2 - }, - { - id: 4, - description: "تست 4", - type: "global", - isHoliday: true, - date: "2022-01-12T00:00:00.000Z", - year: 2022, - month: 1, - day: 3 - }, - { - id: 1, - description: "تست کاربر 1", - type: "userDefined", - userId: "5", - date: "2022-01-12T00:00:00.000Z", - categoryId: 1, - year: 2022, - month: 1, - day: 3 - }, - { - id: 4, - description: "تست کاربر 4", - type: "userDefined", - userId: "5", - date: "2022-01-08T00:00:00.000Z", - categoryId: 3, - year: 2022, - month: 1, - day: 6 - }, - { - id: 5, - description: "تست کاربر 5", - type: "userDefined", - userId: "5", - date: "2022-01-12T00:00:00.000Z", - categoryId: 1, - year: 2022, - month: 1, - day: 3 - } - ], + events: [], }; diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js index 33164eb..c217caf 100644 --- a/src/components/Calendar/CalendarComponents/components/DaysList.js +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -275,6 +275,7 @@ const DaysList = ({ } } } + return (
    { +const SimpleCalendar = () => { const [selectedDay, setSelectedDay] = useState(null); - - return( + + return (
    - -
    } - locale="fa" - /> + +
    } + locale="fa" + events={eventsList} + />
    ); }; +const eventsList = [ + { + id: 2, + description: "تست 2", + type: "global", + isHoliday: true, + date: "2022-01-04T00:00:00.000Z", + year: 2022, + month: 1, + day: 2 + }, + { + id: 4, + description: "تست 4", + type: "global", + isHoliday: true, + date: "2022-01-12T00:00:00.000Z", + year: 2022, + month: 1, + day: 1 + }, + { + id: 1, + description: "تست کاربر 1", + type: "userDefined", + userId: "5", + date: "2022-01-12T00:00:00.000Z", + categoryId: 1, + year: 2022, + month: 1, + day: 3 + }, + { + id: 4, + description: "تست کاربر 4", + type: "userDefined", + userId: "5", + date: "2022-01-08T00:00:00.000Z", + categoryId: 3, + year: 2022, + month: 1, + day: 6 + }, + { + id: 5, + description: "تست کاربر 5", + type: "userDefined", + userId: "5", + date: "2022-01-12T00:00:00.000Z", + categoryId: 1, + year: 2022, + month: 1, + day: 3 + } +]; export default SimpleCalendar; \ No newline at end of file diff --git a/src/components/RangeDatePicker/index.css b/src/components/RangeDatePicker/index.css index d19abc0..a1681c8 100644 --- a/src/components/RangeDatePicker/index.css +++ b/src/components/RangeDatePicker/index.css @@ -1,3 +1,7 @@ +.Calendar *{ + font-family: 'iranSans'; +} + .DatePicker { position: relative; display: inline-block; @@ -49,16 +53,16 @@ bottom: calc(100% + 20px); } - .range-date-picker, - .range-date-picker * { + .Calendar, + .Calendar * { margin: 0; padding: 0; box-sizing: border-box; direction: ltr; } - .range-date-picker, - .range-date-picker.-rtl * { + .Calendar, + .Calendar.-rtl * { direction: rtl; } @@ -77,7 +81,7 @@ } - .range-date-picker { + .Calendar { --cl-color-black: #444444; --cl-color-disabled: #d4d4d4; --cl-color-error: #ff2929; @@ -98,7 +102,7 @@ min-height: 38.7em; } - .DatePicker .range-date-picker, + .DatePicker .Calendar, .DatePicker__calendarArrow { transform: translateY(2.5em); opacity: 0; @@ -106,15 +110,15 @@ } - .DatePicker__calendarContainer.-top .range-date-picker { + .DatePicker__calendarContainer.-top .Calendar { transform: translateY(-2.5em); } - .range-date-picker.-noFocusOutline *:focus { + .Calendar.-noFocusOutline *:focus { outline: none !important; } - .range-date-picker > :not(.Calendar__footer) button { + .Calendar > :not(.Calendar__footer) button { font-family: inherit; background: transparent; cursor: pointer; @@ -156,7 +160,7 @@ .Calendar__monthArrowWrapper.-left { transform: rotate(180deg); } - .range-date-picker.-rtl .Calendar__monthArrowWrapper.-left { + .Calendar.-rtl .Calendar__monthArrowWrapper.-left { transform: rotate(-180deg); } @@ -164,7 +168,7 @@ transform: rotate(-0deg); } - .range-date-picker.-rtl .Calendar__monthArrowWrapper.-right { + .Calendar.-rtl .Calendar__monthArrowWrapper.-right { transform: rotate(0deg); } @@ -214,7 +218,7 @@ transform: translateX(50%); } - .range-date-picker.-rtl .Calendar__monthYear.-hiddenNext { + .Calendar.-rtl .Calendar__monthYear.-hiddenNext { transform: translateX(-150%); } @@ -223,7 +227,7 @@ transform: translateX(-150%); } - .range-date-picker.-rtl .Calendar__monthYear.-hiddenPrevious { + .Calendar.-rtl .Calendar__monthYear.-hiddenPrevious { transform: translateX(50%); } @@ -265,7 +269,7 @@ } .Calendar__monthYear.-shown > *:hover, - .range-date-picker:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus, + .Calendar:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus, .Calendar__monthYear > *.-activeBackground { background: #f5f5f5; } @@ -273,14 +277,14 @@ .Calendar__monthText:hover { transform: translateX(-0.2em) scale(0.95); } - .range-date-picker.-rtl .Calendar__monthText:hover { + .Calendar.-rtl .Calendar__monthText:hover { transform: translateX(0.2em) scale(0.95); } .Calendar__yearText:hover { transform: translateX(0.2em) scale(0.95); } - .range-date-picker.-rtl .Calendar__yearText:hover { + .Calendar.-rtl .Calendar__yearText:hover { transform: translateX(-0.2em) scale(0.95); } @@ -289,7 +293,7 @@ opacity: 0; } - .range-date-picker.-rtl .Calendar__monthYear .Calendar__yearText.-hidden { + .Calendar.-rtl .Calendar__monthYear .Calendar__yearText.-hidden { transform: translateX(-50%); } @@ -298,7 +302,7 @@ opacity: 0; } - .range-date-picker.-rtl .Calendar__monthYear .Calendar__monthText.-hidden { + .Calendar.-rtl .Calendar__monthYear .Calendar__monthText.-hidden { transform: translateX(50%); } @@ -509,7 +513,7 @@ transform: translateX(-90%); } - .range-date-picker.-rtl .Calendar__section.-hiddenPrevious { + .Calendar.-rtl .Calendar__section.-hiddenPrevious { transform: translateX(90%); } @@ -518,7 +522,7 @@ transform: translateX(90%); } - .range-date-picker.-rtl .Calendar__section.-hiddenNext { + .Calendar.-rtl .Calendar__section.-hiddenNext { transform: translateX(-90%); } @@ -536,22 +540,30 @@ width: 100%; } - .range-date-picker .Calendar__section .Calendar__weekRow .Calendar__day { - display: block; - width: calc(100% / 7); + .Calendar__day { + width: calc(100% / 7 - 6px); text-align: center; padding: calc(0.25em - 1px); font-size: 1.6em; + border-radius: 7px; transition: 0.2s; border: 1px solid transparent; + margin:3px; color: rgba(0, 0, 0, 0.8); display: flex; - justify-content: center; align-items: center; - cursor: pointer; - border-radius: 7px; + cursor: pointer; + vertical-align: middle; + background-color: #F3F3F3; + color:#06BACE; + } + .Calendar__day span{ + padding: -10px; + margin-top: -30px; + font-size: 28px; + } .Calendar__day:focus { @@ -569,9 +581,9 @@ height: 2.45em; } - .range-date-picker .Calendar__section .Calendar__weekRow .Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover { + .Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover { - + background-color: #DAFBFF; color: #06BACE; border:1px solid #06BACE; } @@ -664,14 +676,42 @@ position: relative; z-index: 1; } - - .range-date-picker .specialDay span{ - border-bottom: 4px dotted #444444; + .Calendar__footer .footer__Events{ + display: flex; + flex-direction: column; + align-items: center; + font-size: 12px; + font-family: 'IranSans'; + padding: 3px; } - .range-date-picker .holiday span{ + + .Calendar .holiday span{ color:#ff2929; } - + .Calendar .DayNumDiv{ + display: flex; + flex-direction: column; + } + .Calendar .DayNumDiv span{ + margin: 0; + padding: 0; + margin-bottom: -5px; + } + .Calendar .DayNumDiv .eventDots{ + margin-top: -10px; + font-size: 20px; + } + .GoToTodayButton{ + background-color: #006C94; + padding: 7.5px; + font-size: 12px; + color:white; + font-family: 'iranSans'; + border-radius: 50%; + float: left; + margin: 15px; + + } @keyframes fadeCalendar { from { opacity: 0; diff --git a/src/components/RangeDatePicker/index.js b/src/components/RangeDatePicker/index.js index 1549a03..483a6fd 100644 --- a/src/components/RangeDatePicker/index.js +++ b/src/components/RangeDatePicker/index.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import "./index.css"; -import DatePicker from "react-modern-calendar-datepicker"; +import DatePicker from "../Calendar/CalendarComponents"; const RangeDatePicker = () => { const [selectedDayRange, setSelectedDayRange] = useState({ From fe22886ea00f8ede8d1e1f298c7d4640491ea7aa Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Sun, 16 Jan 2022 15:41:24 +0330 Subject: [PATCH 06/11] fixed Something in Comment "Star Rating Section" --- src/components/Comments/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Comments/index.js b/src/components/Comments/index.js index a9e37bb..0314108 100644 --- a/src/components/Comments/index.js +++ b/src/components/Comments/index.js @@ -47,7 +47,7 @@ export const Comments = ({ comments }) => {
    -
    fuck
    +
    Stars
    {comment.status === true && ( <> From bf4d7a1ec7cdf4fdc68b7538b70ea60877f09d47 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Mon, 17 Jan 2022 13:53:21 +0330 Subject: [PATCH 07/11] Calendar Events Getting Day Month And Year --- src/App.css | 2 +- .../CalendarComponents/components/DaysList.js | 27 ++++++++++--------- src/components/Calendar/index.js | 20 +++++++------- 3 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/App.css b/src/App.css index a1dc8bc..84ca00a 100644 --- a/src/App.css +++ b/src/App.css @@ -3,5 +3,5 @@ body{ } *{ - font-family: iranSansX; + font-family: 'iranSans'; } \ No newline at end of file diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js index c217caf..fdf2f8e 100644 --- a/src/components/Calendar/CalendarComponents/components/DaysList.js +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -159,6 +159,7 @@ const DaysList = ({ const customDayItemClassName = customDaysClassName.find((day) => isSameDay(dayItem, day) ); + const classNames = '' .concat(isToday && !isSelected ? ` -today ${calendarTodayClassName}` : '') .concat(!dayItem.isStandard ? ' -blank' : '') @@ -254,23 +255,23 @@ const DaysList = ({ isOnActiveSlide, isStandard, }); - const specialDay = (sDay) => { - var eventDate; + const specialDate = (sDay, sMonth, sYear) => { for (var i = 0; i < events.length; i++) { - if (sDay == events[i].day) { - - return sDay; + if (sDay == events[i].day && sMonth == events[i].month && sYear == events[i].year) { + return (sDay, sMonth, sYear); + } } }; - const showEventDescription = (sDay) => { - var eventDate; + + + const showEventDescription = (sDay , sMonth, sYear) => { for (var i = 0; i < events.length; i++) { - if (sDay == events[i].day) { + if (sDay == events[i].day && sMonth == events[i].month && sYear == events[i].year) { - return (events[i].description); + return(events[i].description); } } @@ -288,8 +289,10 @@ const DaysList = ({ className={`Calendar__day -${isRtl ? 'rtl' : 'ltr'} ${additionalClass}`} onClick={() => { handleDayPress({ ...dayItem, isDisabled }); - console.log(specialDay(day)); - showEvent(showEventDescription(day)) + console.log(specialDate(day)); + console.log(showEventDescription(day)) + showEvent(showEventDescription(day, month, year)) + console.log(month) }} onKeyDown={({ key }) => { /* istanbul ignore else */ @@ -307,7 +310,7 @@ const DaysList = ({ data-is-default-selectable={shouldEnableKeyboardNavigation} > {!isStandard ? '' : getLanguageDigits(day)} - {specialDay(day) == day ? . : ' '} + {specialDate(day, month, year) == (day, month, year) ? . : ' '}
    ); }; diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index cf1477a..9fa84dc 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -31,8 +31,8 @@ const eventsList = [ type: "global", isHoliday: true, date: "2022-01-04T00:00:00.000Z", - year: 2022, - month: 1, + year: 1400, + month: 10, day: 2 }, { @@ -41,8 +41,8 @@ const eventsList = [ type: "global", isHoliday: true, date: "2022-01-12T00:00:00.000Z", - year: 2022, - month: 1, + year: 1400, + month: 10, day: 1 }, { @@ -52,8 +52,8 @@ const eventsList = [ userId: "5", date: "2022-01-12T00:00:00.000Z", categoryId: 1, - year: 2022, - month: 1, + year: 1400, + month: 11, day: 3 }, { @@ -63,8 +63,8 @@ const eventsList = [ userId: "5", date: "2022-01-08T00:00:00.000Z", categoryId: 3, - year: 2022, - month: 1, + year: 1400, + month: 11, day: 6 }, { @@ -74,8 +74,8 @@ const eventsList = [ userId: "5", date: "2022-01-12T00:00:00.000Z", categoryId: 1, - year: 2022, - month: 1, + year: 1400, + month: 10, day: 3 } ]; From a5ca336e39d073f379a320c45997cc2e004ce983 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Mon, 17 Jan 2022 14:35:30 +0330 Subject: [PATCH 08/11] Event Description Showing Correctly --- .../CalendarComponents/components/DaysList.js | 31 ++++++++++++++----- src/components/Calendar/index.js | 2 +- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js index fdf2f8e..7349c7f 100644 --- a/src/components/Calendar/CalendarComponents/components/DaysList.js +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -255,28 +255,45 @@ const DaysList = ({ isOnActiveSlide, isStandard, }); + + const specialDate = (sDay, sMonth, sYear) => { for (var i = 0; i < events.length; i++) { if (sDay == events[i].day && sMonth == events[i].month && sYear == events[i].year) { - return (sDay, sMonth, sYear); } } }; + + const logEachDateDes = (sDay, sMonth, sYear) =>{ + return events.map((e) =>{ + + if (sDay == e.day && sMonth == e.month && sYear == e.year) { + + return

    {e.description}

    + + } + + }) + + + } const showEventDescription = (sDay , sMonth, sYear) => { + for (var i = 0; i < events.length; i++) { if (sDay == events[i].day && sMonth == events[i].month && sYear == events[i].year) { - + return(events[i].description); } } + + } - return (
    { handleDayPress({ ...dayItem, isDisabled }); - console.log(specialDate(day)); - console.log(showEventDescription(day)) - showEvent(showEventDescription(day, month, year)) - console.log(month) + // console.log(specialDate(day)); + // console.log(showEventDescription(day)) + // showEvent(showEventDescription(day, month, year)) + showEvent(logEachDateDes(day, month, year)) }} onKeyDown={({ key }) => { /* istanbul ignore else */ diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 9fa84dc..77343e7 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -53,7 +53,7 @@ const eventsList = [ date: "2022-01-12T00:00:00.000Z", categoryId: 1, year: 1400, - month: 11, + month: 10, day: 3 }, { From 60624da2a2e218473a4b31c08e6e1db9124bc0b2 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Mon, 17 Jan 2022 14:43:27 +0330 Subject: [PATCH 09/11] Number of Events working Correctly --- .../CalendarComponents/components/DaysList.js | 56 ++++++++----------- 1 file changed, 22 insertions(+), 34 deletions(-) diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js index 7349c7f..a10d750 100644 --- a/src/components/Calendar/CalendarComponents/components/DaysList.js +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -159,7 +159,7 @@ const DaysList = ({ const customDayItemClassName = customDaysClassName.find((day) => isSameDay(dayItem, day) ); - + const classNames = '' .concat(isToday && !isSelected ? ` -today ${calendarTodayClassName}` : '') .concat(!dayItem.isStandard ? ' -blank' : '') @@ -256,43 +256,30 @@ const DaysList = ({ isStandard, }); - - const specialDate = (sDay, sMonth, sYear) => { - for (var i = 0; i < events.length; i++) { - if (sDay == events[i].day && sMonth == events[i].month && sYear == events[i].year) { - return (sDay, sMonth, sYear); - + // showing Dots Of Events + const specialDate = (sDay, sMonth, sYear) => { + return events.map((e) => { + if (sDay == e.day && sMonth == e.month && sYear == e.year) { + return '.'; + } - } + }) }; + + const showEventDescription = (sDay, sMonth, sYear) => { - const logEachDateDes = (sDay, sMonth, sYear) =>{ - return events.map((e) =>{ - - if (sDay == e.day && sMonth == e.month && sYear == e.year) { - - return

    {e.description}

    - - } - - }) - - - } - + return events.map((e) => { + + if (sDay == e.day && sMonth == e.month && sYear == e.year) { - const showEventDescription = (sDay , sMonth, sYear) => { - - for (var i = 0; i < events.length; i++) { - if (sDay == events[i].day && sMonth == events[i].month && sYear == events[i].year) { - - return(events[i].description); + return (

    {e.description}

    ) } - } - - + + }) + + } return (
    { /* istanbul ignore else */ @@ -327,7 +314,8 @@ const DaysList = ({ data-is-default-selectable={shouldEnableKeyboardNavigation} > {!isStandard ? '' : getLanguageDigits(day)} - {specialDate(day, month, year) == (day, month, year) ? . : ' '} + {/* Dots Of Events */} + {specialDate(day, month, year)}
    ); }; From b6790d0e04de02c53105bbb1b9fef424235a1ff6 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Mon, 17 Jan 2022 14:47:58 +0330 Subject: [PATCH 10/11] DotColor Working Fine --- .../Calendar/CalendarComponents/components/DaysList.js | 6 ++++-- src/components/Calendar/index.js | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js index a10d750..f53da28 100644 --- a/src/components/Calendar/CalendarComponents/components/DaysList.js +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -260,13 +260,15 @@ const DaysList = ({ const specialDate = (sDay, sMonth, sYear) => { return events.map((e) => { if (sDay == e.day && sMonth == e.month && sYear == e.year) { - return '.'; + return .; } }) }; - + const showEventDescription = (sDay, sMonth, sYear) => { return events.map((e) => { diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 77343e7..a8e5292 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -54,7 +54,8 @@ const eventsList = [ categoryId: 1, year: 1400, month: 10, - day: 3 + day: 3, + dotColor: 'blue' }, { id: 4, From 30af3a534d805ab9dc0c7f2c0959570e52513bac Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Mon, 17 Jan 2022 15:15:59 +0330 Subject: [PATCH 11/11] DotColor Changed to Color --- .../Calendar/CalendarComponents/components/DaysList.js | 2 +- src/components/Calendar/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js index f53da28..531ce18 100644 --- a/src/components/Calendar/CalendarComponents/components/DaysList.js +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -261,7 +261,7 @@ const DaysList = ({ return events.map((e) => { if (sDay == e.day && sMonth == e.month && sYear == e.year) { return .; } diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index a8e5292..bba8cf4 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -55,7 +55,7 @@ const eventsList = [ year: 1400, month: 10, day: 3, - dotColor: 'blue' + color: 'blue' }, { id: 4,