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,
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) => (
<abbr key={weekDay.name} title={weekDay.name} className="Calendar__weekDay">
{weekDay.short}
<abbr key={weekDay.name} title={weekDay.name} className={`Calendar__weekDay ${type}`}>
{ type == 'dashboard' ? weekDay.name : weekDay.short}
</abbr>
));
@ -125,7 +126,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
return (
<div
className={`Calendar -noFocusOutline ${calendarClassName} -${isRtl ? 'rtl' : 'ltr'
className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${isRtl ? 'rtl' : 'ltr'
}`}
role="grid"
style={{
@ -146,6 +147,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
isMonthSelectorOpen={mainState.isMonthSelectorOpen}
isYearSelectorOpen={mainState.isYearSelectorOpen}
locale={locale}
type={type}
/>
<MonthSelector
@ -168,7 +170,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
locale={locale}
/>
<div className="Calendar__weekDays">{weekdays}</div>
<div className={`Calendar__weekDays ${type}`}>{weekdays}</div>
<DaysList
activeDate={activeDate}
@ -195,9 +197,16 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen
}
showEvent={event => setEventInFooter(event)}
type={type}
/>
<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>
</div>
);

@ -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)}
<p>{!isStandard ? '' : getLanguageDigits(day)}</p>
{/* Dots Of Events */}
<span>{specialDate(day, month, year)}</span>
</div>

@ -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 (
<div ref={headerElement} className="Calendar__header">
<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 ref={headerElement} className={`Calendar__header ${type}`}>
{type == 'dashboard' ?
<div
className={`Calendar__monthYearContainer ${type}`}
ref={monthYearWrapperElement}
data-testid="month-year-container"
>
&nbsp;
{monthYearButtons}
</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;
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;

@ -7,19 +7,49 @@ import './index.css';
const SimpleCalendar = () => {
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 (
<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}
onChange={setSelectedDay}
shouldHighlightWeekends
renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>}
locale="fa"
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>
);
};

Loading…
Cancel
Save