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. 80
      src/components/Calendar/index.js
  4. 106
      src/components/RangeDatePicker/index.css
  5. 2
      src/components/RangeDatePicker/index.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: [],
};

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

@ -1,27 +1,83 @@
import React, { useState } from "react";
import './index.css';
import Calendar from "./CalendarComponents/Calendar";
import Calendar from "./CalendarComponents/Calendar";
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
value={selectedDay}
onChange={setSelectedDay}
shouldHighlightWeekends
renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>}
locale="fa"
/>
<Calendar
value={selectedDay}
onChange={setSelectedDay}
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;

@ -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;

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

Loading…
Cancel
Save