calendar Events Almost Done

Has Some Errors
master
Pedram Keshavarzi 3 years ago
parent 517175d636
commit 1d9f4efa7c
  1. 56
      src/components/Calendar/CalendarComponents/Calendar.js
  2. 1
      src/components/Calendar/CalendarComponents/components/DaysList.js
  3. 72
      src/components/Calendar/index.js
  4. 102
      src/components/RangeDatePicker/index.css
  5. 2
      src/components/RangeDatePicker/index.js

@ -215,61 +215,7 @@ Calendar.defaultProps = {
renderFooter: () => null, renderFooter: () => null,
renderEvents : () => null, renderEvents : () => null,
customDaysClassName: [], customDaysClassName: [],
events: [ 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
}
],
}; };

@ -275,6 +275,7 @@ const DaysList = ({
} }
} }
} }
return ( return (
<div <div
style={{ style={{

@ -1,27 +1,83 @@
import React, { useState } from "react"; import React, { useState } from "react";
import './index.css'; import './index.css';
import Calendar from "./CalendarComponents/Calendar"; import Calendar from "./CalendarComponents/Calendar";
import { utils } from "./CalendarComponents"; import { utils } from "./CalendarComponents";
import './index.css'; import './index.css';
const SimpleCalendar = () =>{ const SimpleCalendar = () => {
const [selectedDay, setSelectedDay] = useState(null); const [selectedDay, setSelectedDay] = useState(null);
return( return (
<div className="flex items-center justify-center w-full my-2"> <div className="flex 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}
/> />
</div> </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; export default SimpleCalendar;

@ -1,3 +1,7 @@
.Calendar *{
font-family: 'iranSans';
}
.DatePicker { .DatePicker {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -49,16 +53,16 @@
bottom: calc(100% + 20px); bottom: calc(100% + 20px);
} }
.range-date-picker, .Calendar,
.range-date-picker * { .Calendar * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
direction: ltr; direction: ltr;
} }
.range-date-picker, .Calendar,
.range-date-picker.-rtl * { .Calendar.-rtl * {
direction: rtl; direction: rtl;
} }
@ -77,7 +81,7 @@
} }
.range-date-picker { .Calendar {
--cl-color-black: #444444; --cl-color-black: #444444;
--cl-color-disabled: #d4d4d4; --cl-color-disabled: #d4d4d4;
--cl-color-error: #ff2929; --cl-color-error: #ff2929;
@ -98,7 +102,7 @@
min-height: 38.7em; min-height: 38.7em;
} }
.DatePicker .range-date-picker, .DatePicker .Calendar,
.DatePicker__calendarArrow { .DatePicker__calendarArrow {
transform: translateY(2.5em); transform: translateY(2.5em);
opacity: 0; opacity: 0;
@ -106,15 +110,15 @@
} }
.DatePicker__calendarContainer.-top .range-date-picker { .DatePicker__calendarContainer.-top .Calendar {
transform: translateY(-2.5em); transform: translateY(-2.5em);
} }
.range-date-picker.-noFocusOutline *:focus { .Calendar.-noFocusOutline *:focus {
outline: none !important; outline: none !important;
} }
.range-date-picker > :not(.Calendar__footer) button { .Calendar > :not(.Calendar__footer) button {
font-family: inherit; font-family: inherit;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -156,7 +160,7 @@
.Calendar__monthArrowWrapper.-left { .Calendar__monthArrowWrapper.-left {
transform: rotate(180deg); transform: rotate(180deg);
} }
.range-date-picker.-rtl .Calendar__monthArrowWrapper.-left { .Calendar.-rtl .Calendar__monthArrowWrapper.-left {
transform: rotate(-180deg); transform: rotate(-180deg);
} }
@ -164,7 +168,7 @@
transform: rotate(-0deg); transform: rotate(-0deg);
} }
.range-date-picker.-rtl .Calendar__monthArrowWrapper.-right { .Calendar.-rtl .Calendar__monthArrowWrapper.-right {
transform: rotate(0deg); transform: rotate(0deg);
} }
@ -214,7 +218,7 @@
transform: translateX(50%); transform: translateX(50%);
} }
.range-date-picker.-rtl .Calendar__monthYear.-hiddenNext { .Calendar.-rtl .Calendar__monthYear.-hiddenNext {
transform: translateX(-150%); transform: translateX(-150%);
} }
@ -223,7 +227,7 @@
transform: translateX(-150%); transform: translateX(-150%);
} }
.range-date-picker.-rtl .Calendar__monthYear.-hiddenPrevious { .Calendar.-rtl .Calendar__monthYear.-hiddenPrevious {
transform: translateX(50%); transform: translateX(50%);
} }
@ -265,7 +269,7 @@
} }
.Calendar__monthYear.-shown > *:hover, .Calendar__monthYear.-shown > *:hover,
.range-date-picker:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus, .Calendar:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus,
.Calendar__monthYear > *.-activeBackground { .Calendar__monthYear > *.-activeBackground {
background: #f5f5f5; background: #f5f5f5;
} }
@ -273,14 +277,14 @@
.Calendar__monthText:hover { .Calendar__monthText:hover {
transform: translateX(-0.2em) scale(0.95); 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); transform: translateX(0.2em) scale(0.95);
} }
.Calendar__yearText:hover { .Calendar__yearText:hover {
transform: translateX(0.2em) scale(0.95); 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); transform: translateX(-0.2em) scale(0.95);
} }
@ -289,7 +293,7 @@
opacity: 0; opacity: 0;
} }
.range-date-picker.-rtl .Calendar__monthYear .Calendar__yearText.-hidden { .Calendar.-rtl .Calendar__monthYear .Calendar__yearText.-hidden {
transform: translateX(-50%); transform: translateX(-50%);
} }
@ -298,7 +302,7 @@
opacity: 0; opacity: 0;
} }
.range-date-picker.-rtl .Calendar__monthYear .Calendar__monthText.-hidden { .Calendar.-rtl .Calendar__monthYear .Calendar__monthText.-hidden {
transform: translateX(50%); transform: translateX(50%);
} }
@ -509,7 +513,7 @@
transform: translateX(-90%); transform: translateX(-90%);
} }
.range-date-picker.-rtl .Calendar__section.-hiddenPrevious { .Calendar.-rtl .Calendar__section.-hiddenPrevious {
transform: translateX(90%); transform: translateX(90%);
} }
@ -518,7 +522,7 @@
transform: translateX(90%); transform: translateX(90%);
} }
.range-date-picker.-rtl .Calendar__section.-hiddenNext { .Calendar.-rtl .Calendar__section.-hiddenNext {
transform: translateX(-90%); transform: translateX(-90%);
} }
@ -536,21 +540,29 @@
width: 100%; width: 100%;
} }
.range-date-picker .Calendar__section .Calendar__weekRow .Calendar__day { .Calendar__day {
display: block; width: calc(100% / 7 - 6px);
width: calc(100% / 7);
text-align: center; text-align: center;
padding: calc(0.25em - 1px); padding: calc(0.25em - 1px);
font-size: 1.6em; font-size: 1.6em;
border-radius: 7px;
transition: 0.2s; transition: 0.2s;
border: 1px solid transparent; border: 1px solid transparent;
margin:3px;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
cursor: pointer; 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; 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; color: #06BACE;
border:1px solid #06BACE; border:1px solid #06BACE;
} }
@ -664,14 +676,42 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.Calendar__footer .footer__Events{
.range-date-picker .specialDay span{ display: flex;
border-bottom: 4px dotted #444444; flex-direction: column;
align-items: center;
font-size: 12px;
font-family: 'IranSans';
padding: 3px;
} }
.range-date-picker .holiday span{
.Calendar .holiday span{
color:#ff2929; 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 { @keyframes fadeCalendar {
from { from {
opacity: 0; opacity: 0;

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import "./index.css"; import "./index.css";
import DatePicker from "react-modern-calendar-datepicker"; import DatePicker from "../Calendar/CalendarComponents";
const RangeDatePicker = () => { const RangeDatePicker = () => {
const [selectedDayRange, setSelectedDayRange] = useState({ const [selectedDayRange, setSelectedDayRange] = useState({

Loading…
Cancel
Save