Calendar Now Has Two Types Dashboard And Default

master
Pedram Keshavarzi 3 years ago
parent 8e525c93aa
commit c8f37c1bf8
  1. 19
      src/components/Calendar/CalendarComponents/Calendar.js
  2. 5
      src/components/Calendar/CalendarComponents/components/DaysList.js
  3. 78
      src/components/Calendar/CalendarComponents/components/Header.js
  4. 90
      src/components/Calendar/index.css
  5. 36
      src/components/Calendar/index.js

@ -38,6 +38,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
customDaysClassName, customDaysClassName,
events, events,
renderEvents, renderEvents,
type
}) => { }) => {
const calendarElement = useRef(null); const calendarElement = useRef(null);
const [mainState, setMainState] = useState({ const [mainState, setMainState] = useState({
@ -84,8 +85,8 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
: getComputedActiveDate(); : getComputedActiveDate();
const weekdays = weekDaysList.map((weekDay) => ( const weekdays = weekDaysList.map((weekDay) => (
<abbr key={weekDay.name} title={weekDay.name} className="Calendar__weekDay"> <abbr key={weekDay.name} title={weekDay.name} className={`Calendar__weekDay ${type}`}>
{weekDay.short} { type == 'dashboard' ? weekDay.name : weekDay.short}
</abbr> </abbr>
)); ));
@ -125,7 +126,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
return ( return (
<div <div
className={`Calendar -noFocusOutline ${calendarClassName} -${isRtl ? 'rtl' : 'ltr' className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${isRtl ? 'rtl' : 'ltr'
}`} }`}
role="grid" role="grid"
style={{ style={{
@ -146,6 +147,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
isMonthSelectorOpen={mainState.isMonthSelectorOpen} isMonthSelectorOpen={mainState.isMonthSelectorOpen}
isYearSelectorOpen={mainState.isYearSelectorOpen} isYearSelectorOpen={mainState.isYearSelectorOpen}
locale={locale} locale={locale}
type={type}
/> />
<MonthSelector <MonthSelector
@ -168,7 +170,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
locale={locale} locale={locale}
/> />
<div className="Calendar__weekDays">{weekdays}</div> <div className={`Calendar__weekDays ${type}`}>{weekdays}</div>
<DaysList <DaysList
activeDate={activeDate} activeDate={activeDate}
@ -195,9 +197,16 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen
} }
showEvent={event => setEventInFooter(event)} showEvent={event => setEventInFooter(event)}
type={type}
/> />
<div className="Calendar__footer"> <div className="Calendar__footer">
<p className='footer__Events'>{eventInFooter}</p> <div className={`footer__Events ${type}`}>
{
type == 'dashboard' ? <><div className='text-xl font-black text-blue-400'>رویداد ها: </div><p className='text-blue-300 font-bold'>{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}</p></> : eventInFooter
}
</div>
{renderFooter()}</div> {renderFooter()}</div>
</div> </div>
); );

@ -40,6 +40,7 @@ const DaysList = ({
customDaysClassName, customDaysClassName,
events, events,
showEvent, showEvent,
type
}) => { }) => {
const calendarSectionWrapper = useRef(null); const calendarSectionWrapper = useRef(null);
const { isRtl, weekDays: weekDaysList } = useLocaleLanguage(locale); const { isRtl, weekDays: weekDaysList } = useLocaleLanguage(locale);
@ -292,7 +293,7 @@ const DaysList = ({
}} }}
tabIndex={shouldEnableKeyboardNavigation ? '0' : '-1'} tabIndex={shouldEnableKeyboardNavigation ? '0' : '-1'}
key={id} key={id}
className={`Calendar__day -${isRtl ? 'rtl' : 'ltr'} ${additionalClass}`} className={`Calendar__day ${type} -${isRtl ? 'rtl' : 'ltr'} ${additionalClass}`}
onClick={() => { onClick={() => {
handleDayPress({ ...dayItem, isDisabled }); handleDayPress({ ...dayItem, isDisabled });
// console.log(specialDate(day)); // console.log(specialDate(day));
@ -315,7 +316,7 @@ const DaysList = ({
role="gridcell" role="gridcell"
data-is-default-selectable={shouldEnableKeyboardNavigation} data-is-default-selectable={shouldEnableKeyboardNavigation}
> >
{!isStandard ? '' : getLanguageDigits(day)} <p>{!isStandard ? '' : getLanguageDigits(day)}</p>
{/* Dots Of Events */} {/* Dots Of Events */}
<span>{specialDate(day, month, year)}</span> <span>{specialDate(day, month, year)}</span>
</div> </div>

@ -15,6 +15,7 @@ const Header = ({
isMonthSelectorOpen, isMonthSelectorOpen,
isYearSelectorOpen, isYearSelectorOpen,
locale, locale,
type
}) => { }) => {
const headerElement = useRef(null); const headerElement = useRef(null);
const monthYearWrapperElement = useRef(null); const monthYearWrapperElement = useRef(null);
@ -151,38 +152,53 @@ const Header = ({
}); });
return ( return (
<div ref={headerElement} className="Calendar__header"> <div ref={headerElement} className={`Calendar__header ${type}`}>
<button {type == 'dashboard' ?
className="Calendar__monthArrowWrapper -right"
onClick={() => { <div
onMonthChangeTrigger('PREVIOUS'); className={`Calendar__monthYearContainer ${type}`}
}} ref={monthYearWrapperElement}
aria-label={previousMonth} data-testid="month-year-container"
type="button" >
disabled={isPreviousMonthArrowDisabled} &nbsp;
> {monthYearButtons}
<span className="Calendar__monthArrow" />
</button>
<div
className="Calendar__monthYearContainer"
ref={monthYearWrapperElement}
data-testid="month-year-container"
>
&nbsp;
{monthYearButtons}
</div>
<button
className="Calendar__monthArrowWrapper -left"
onClick={() => {
onMonthChangeTrigger('NEXT');
}}
aria-label={nextMonth}
type="button"
disabled={isNextMonthArrowDisabled}
>
<span className="Calendar__monthArrow" />
</button>
</div> </div>
:
<>
<button
className="Calendar__monthArrowWrapper -right"
onClick={() => {
onMonthChangeTrigger('PREVIOUS');
}}
aria-label={previousMonth}
type="button"
disabled={isPreviousMonthArrowDisabled}
>
<span className="Calendar__monthArrow" />
</button>
<div
className="Calendar__monthYearContainer"
ref={monthYearWrapperElement}
data-testid="month-year-container"
>
&nbsp;
{monthYearButtons}
</div>
<button
className="Calendar__monthArrowWrapper -left"
onClick={() => {
onMonthChangeTrigger('NEXT');
}}
aria-label={nextMonth}
type="button"
disabled={isNextMonthArrowDisabled}
>
<span className="Calendar__monthArrow" />
</button>
</>
}
</div>
); );
}; };

@ -101,6 +101,26 @@
max-width: 90vw; max-width: 90vw;
min-height: 38.7em; 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 .Calendar,
.DatePicker__calendarArrow { .DatePicker__calendarArrow {
@ -212,6 +232,23 @@
line-height: 1; line-height: 1;
color:#246E8A; 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 { .Calendar__monthYear.-hiddenNext {
opacity: 0; opacity: 0;
@ -470,6 +507,16 @@
padding: 0 2.6em; padding: 0 2.6em;
position: relative; 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 { .Calendar__weekDay {
display: block; display: block;
@ -482,6 +529,9 @@
margin:0.2em; margin:0.2em;
white-space: nowrap; white-space: nowrap;
} }
.Calendar__weekDay.dashboard{
color:#A2B4CB;
}
.Calendar__weekDay[title]{ .Calendar__weekDay[title]{
text-decoration: none; text-decoration: none;
} }
@ -558,6 +608,25 @@
background-color: #F3F3F3; background-color: #F3F3F3;
color:#06BACE; 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{ .Calendar__day span{
padding: -10px; padding: -10px;
@ -684,6 +753,27 @@
font-family: 'IranSans'; font-family: 'IranSans';
padding: 3px; 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{ .Calendar .holiday span{
color:#ff2929; color:#ff2929;

@ -7,19 +7,49 @@ import './index.css';
const SimpleCalendar = () => { const SimpleCalendar = () => {
const [selectedDay, setSelectedDay] = useState(null); const [selectedDay, setSelectedDay] = useState(null);
const [type, setType] = useState('dashboard');
const list = {
'default': <Calendar
value={selectedDay}
onChange={setSelectedDay}
shouldHighlightWeekends
renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>}
locale="fa"
events={eventsList}
/>,
'dashboard': <Calendar
value={selectedDay}
onChange={setSelectedDay}
shouldHighlightWeekends
locale="fa"
events={eventsList}
type='dashboard'
/>,
}
return ( return (
<div className="flex items-center justify-center w-full my-2"> <div className="flex flex-col items-center justify-center w-full my-2">
<Calendar {/* <Calendar
value={selectedDay} value={selectedDay}
onChange={setSelectedDay} onChange={setSelectedDay}
shouldHighlightWeekends shouldHighlightWeekends
renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>} renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>}
locale="fa" locale="fa"
events={eventsList} events={eventsList}
/> type='dashboard'
/> */}
<select className="mb-10 w-32 bg-gray-200" onChange={(e) => setType(e.target.value)}>
{
Object.keys(list).map((option, index) => <option key={index}>{option}</option>)
}
</select>
{
list[type]
}
</div> </div>
); );
}; };

Loading…
Cancel
Save