calendar Events Almost Done

Has Some Errors
3 years ago · 1d9f4efa7c
parent 517175d636
commit 1d9f4efa7c
5 changed files with 144 additions and 101 deletions
--- 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: [],
 };


--- a/src/components/Calendar/CalendarComponents/components/DaysList.js
+++ b/src/components/Calendar/CalendarComponents/components/DaysList.js
@ -275,6 +275,7 @@ const DaysList = ({
        }
      }
    }
+    
    return (
      <div
        style={{
--- a/src/components/Calendar/index.js
+++ b/src/components/Calendar/index.js
@ -5,11 +5,11 @@ import { utils } from "./CalendarComponents";

 import './index.css';

-const SimpleCalendar = () =>{
+const SimpleCalendar = () => {
    const [selectedDay, setSelectedDay] = useState(null);


-    return(
+    return (
        <div className="flex items-center justify-center w-full my-2">

            <Calendar
@ -18,10 +18,66 @@ const SimpleCalendar = () =>{
                shouldHighlightWeekends
                renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>}
                locale="fa"
+                events={eventsList}
            />
        </div>
    );
 };

+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;
--- 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,21 +540,29 @@
    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;
+    vertical-align: middle;
+    background-color: #F3F3F3;
+    color:#06BACE;
   
+  }
+  .Calendar__day span{
+    padding: -10px;
+    margin-top: -30px;
+    font-size: 28px;

  }
  
@ -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;
--- 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({