From 1d9f4efa7c0b6580f1a4be7ebea830ce38cc3534 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Sun, 16 Jan 2022 15:15:14 +0330 Subject: [PATCH] calendar Events Almost Done Has Some Errors --- .../Calendar/CalendarComponents/Calendar.js | 56 +-------- .../CalendarComponents/components/DaysList.js | 1 + src/components/Calendar/index.js | 80 +++++++++++-- src/components/RangeDatePicker/index.css | 106 ++++++++++++------ src/components/RangeDatePicker/index.js | 2 +- 5 files changed, 144 insertions(+), 101 deletions(-) diff --git a/src/components/Calendar/CalendarComponents/Calendar.js b/src/components/Calendar/CalendarComponents/Calendar.js index 88f9d9f..cbcf0f8 100644 --- 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: [], }; diff --git a/src/components/Calendar/CalendarComponents/components/DaysList.js b/src/components/Calendar/CalendarComponents/components/DaysList.js index 33164eb..c217caf 100644 --- a/src/components/Calendar/CalendarComponents/components/DaysList.js +++ b/src/components/Calendar/CalendarComponents/components/DaysList.js @@ -275,6 +275,7 @@ const DaysList = ({ } } } + return (
{ +const SimpleCalendar = () => { const [selectedDay, setSelectedDay] = useState(null); - - return( + + return (
- -
} - locale="fa" - /> + +
} + locale="fa" + events={eventsList} + />
); }; +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; \ No newline at end of file diff --git a/src/components/RangeDatePicker/index.css b/src/components/RangeDatePicker/index.css index d19abc0..a1681c8 100644 --- 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,22 +540,30 @@ 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; + cursor: pointer; + vertical-align: middle; + background-color: #F3F3F3; + color:#06BACE; + } + .Calendar__day span{ + padding: -10px; + margin-top: -30px; + font-size: 28px; + } .Calendar__day:focus { @@ -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; diff --git a/src/components/RangeDatePicker/index.js b/src/components/RangeDatePicker/index.js index 1549a03..483a6fd 100644 --- 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({