From c8f37c1bf8063c96f4d24c3d4bc556c638c18211 Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Tue, 1 Feb 2022 14:41:42 +0330 Subject: [PATCH] Calendar Now Has Two Types Dashboard And Default --- .../Calendar/CalendarComponents/Calendar.js | 19 ++-- .../CalendarComponents/components/DaysList.js | 5 +- .../CalendarComponents/components/Header.js | 78 +++++++++------- src/components/Calendar/index.css | 90 +++++++++++++++++++ src/components/Calendar/index.js | 36 +++++++- 5 files changed, 187 insertions(+), 41 deletions(-) diff --git a/src/components/Calendar/CalendarComponents/Calendar.js b/src/components/Calendar/CalendarComponents/Calendar.js index cbcf0f8..b84e215 100644 --- a/src/components/Calendar/CalendarComponents/Calendar.js +++ b/src/components/Calendar/CalendarComponents/Calendar.js @@ -38,6 +38,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; customDaysClassName, events, renderEvents, + type }) => { const calendarElement = useRef(null); const [mainState, setMainState] = useState({ @@ -84,8 +85,8 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; : getComputedActiveDate(); const weekdays = weekDaysList.map((weekDay) => ( - - {weekDay.short} + + { type == 'dashboard' ? weekDay.name : weekDay.short} )); @@ -125,7 +126,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; return (
-
{weekdays}
+
{weekdays}
setEventInFooter(event)} + type={type} />
-

{eventInFooter}

+
+ { + type == 'dashboard' ? <>
رویداد ها:

{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}

: eventInFooter + } + + +
{renderFooter()}
); diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js index 531ce18..bb5e55d 100644 --- a/src/components/Calendar/CalendarComponents/components/DaysList.js +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -40,6 +40,7 @@ const DaysList = ({ customDaysClassName, events, showEvent, + type }) => { const calendarSectionWrapper = useRef(null); const { isRtl, weekDays: weekDaysList } = useLocaleLanguage(locale); @@ -292,7 +293,7 @@ const DaysList = ({ }} tabIndex={shouldEnableKeyboardNavigation ? '0' : '-1'} key={id} - className={`Calendar__day -${isRtl ? 'rtl' : 'ltr'} ${additionalClass}`} + className={`Calendar__day ${type} -${isRtl ? 'rtl' : 'ltr'} ${additionalClass}`} onClick={() => { handleDayPress({ ...dayItem, isDisabled }); // console.log(specialDate(day)); @@ -315,7 +316,7 @@ const DaysList = ({ role="gridcell" data-is-default-selectable={shouldEnableKeyboardNavigation} > - {!isStandard ? '' : getLanguageDigits(day)} +

{!isStandard ? '' : getLanguageDigits(day)}

{/* Dots Of Events */} {specialDate(day, month, year)} diff --git a/src/components/Calendar/CalendarComponents/components/Header.js b/src/components/Calendar/CalendarComponents/components/Header.js index 2091185..5677b94 100644 --- a/src/components/Calendar/CalendarComponents/components/Header.js +++ b/src/components/Calendar/CalendarComponents/components/Header.js @@ -15,6 +15,7 @@ const Header = ({ isMonthSelectorOpen, isYearSelectorOpen, locale, + type }) => { const headerElement = useRef(null); const monthYearWrapperElement = useRef(null); @@ -151,38 +152,53 @@ const Header = ({ }); return ( -
- -
-   - {monthYearButtons} -
- +
+ {type == 'dashboard' ? + +
+   + {monthYearButtons}
+ : + <> + +
+   + {monthYearButtons} +
+ + + + } +
); }; diff --git a/src/components/Calendar/index.css b/src/components/Calendar/index.css index a1681c8..754d509 100644 --- a/src/components/Calendar/index.css +++ b/src/components/Calendar/index.css @@ -101,6 +101,26 @@ max-width: 90vw; min-height: 38.7em; } + .Calendar.dashboard{ + --cl-color-black: #444444; + --cl-color-disabled: #d4d4d4; + --cl-color-error: #ff2929; + font-family:'iranSans'; + font-size: 10px; + background: rgba(255, 255, 255, 1); + border:1px solid #EDF2FB; + 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: 50em; + z-index: 10; + max-width: 90vw; + min-height: 38.7em; + } .DatePicker .Calendar, .DatePicker__calendarArrow { @@ -212,6 +232,23 @@ line-height: 1; color:#246E8A; } + .Calendar__monthYear.dashboard { + 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:#65A9FF; + } + .Calendar__monthYear.-hiddenNext { opacity: 0; @@ -470,6 +507,16 @@ padding: 0 2.6em; position: relative; } + .Calendar__weekDays.dashboard { + display: flex; + justify-content: space-between; + color: var(--cl-color-disabled); + font-size: 1.2em; + margin-bottom: 0.7em; + padding: 0.75em 2.6em; + position: relative; + background-color: #EDF2FB; + } .Calendar__weekDay { display: block; @@ -482,6 +529,9 @@ margin:0.2em; white-space: nowrap; } + .Calendar__weekDay.dashboard{ + color:#A2B4CB; + } .Calendar__weekDay[title]{ text-decoration: none; } @@ -558,6 +608,25 @@ background-color: #F3F3F3; color:#06BACE; + } + .Calendar__day.dashboard { + 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; + align-items: center; + + cursor: pointer; + vertical-align: middle; + background-color: transparent; + color:#00253A; + } .Calendar__day span{ padding: -10px; @@ -684,6 +753,27 @@ font-family: 'IranSans'; padding: 3px; } + .Calendar__footer .footer__Events.dashboard{ + display: flex; + justify-content: start; + width: 100%; + align-items: flex-start; + font-size: 12px; + font-family: 'IranSans'; + margin-top: 10px; + padding: 1em 2em; + border-top: 1px solid #EDF2FB; + + } + + .Calendar__footer .footer__Events.dashboard p{ + + font-size: 15px; + margin:2.5px 0px + + } + + .Calendar .holiday span{ color:#ff2929; diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index bba8cf4..1888261 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -7,19 +7,49 @@ import './index.css'; const SimpleCalendar = () => { const [selectedDay, setSelectedDay] = useState(null); + const [type, setType] = useState('dashboard'); + const list = { + 'default':
} + locale="fa" + events={eventsList} + />, + 'dashboard': , + } return ( -
+
-
} locale="fa" events={eventsList} - /> + type='dashboard' + /> */} + + + { + list[type] + }
); };