Calendar Now Has Two Types Dashboard And Default

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) => (
-    <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>
   );

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

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 (
-    <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>
   );
 };
 

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;

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': <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>
     );
 };