Reza_ashrafi
/
tailwind-shop-design-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

calendar Events Almost Done

Browse Source 
Has Some Errors
master
Pedram Keshavarzi 3 years ago
parent 517175d636
commit 1d9f4efa7c
5 changed files with 144 additions and 101 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

56
src/components/Calendar/CalendarComponents/Calendar.js
Unescape View File

@ -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
}
],
}; };

1
src/components/Calendar/CalendarComponents/components/DaysList.js
Unescape View File

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

72
src/components/Calendar/index.js
Unescape View File

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

102
src/components/RangeDatePicker/index.css
Unescape View File

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

2
src/components/RangeDatePicker/index.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save