From 9d31e4a48c9afbebc79d89eeec9dec6c06ecfca1 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Sat, 8 Jan 2022 16:10:58 +0330 Subject: [PATCH] Calendar Started --- package.json | 2 + src/components/Calender/index.css | 680 ++++++++++++++++++++++++++++++ src/components/Calender/index.js | 23 + src/redux/data.js | 12 + 4 files changed, 717 insertions(+) create mode 100644 src/components/Calender/index.css create mode 100644 src/components/Calender/index.js diff --git a/package.json b/package.json index 85e2959..bea6faa 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,14 @@ "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", + "jalali-react-datepicker": "^1.2.1", "lodash": "^4.17.21", "rc-slider": "^9.7.5", "react": "^17.0.2", "react-circular-progressbar": "^2.0.4", "react-code-blocks": "^0.0.9-0", "react-dom": "^17.0.2", + "react-modern-calendar-datepicker": "^3.1.6", "react-redux": "^7.2.6", "react-router-dom": "^6.2.1", "react-scripts": "4.0.3", diff --git a/src/components/Calender/index.css b/src/components/Calender/index.css new file mode 100644 index 0000000..0e34497 --- /dev/null +++ b/src/components/Calender/index.css @@ -0,0 +1,680 @@ +.DatePicker { + position: relative; + display: inline-block; + z-index: 100; + } + + .DatePicker__input { + background: #fff; + border: 1px solid #ddd; + padding: 0.4em 0.8em; + font-family: inherit; + text-align: center; + font-size: 12px; + } + + .DatePicker__input.-rtl { + direction: rtl; + } + + .DatePicker__input::placeholder { + color: #979797; + } + + .DatePicker__calendarContainer.-top + .DatePicker__calendarArrow { + top: auto; + bottom: calc(100% + 10px); + transform: translateY(-2.5rem) rotate(180deg); + animation: fadeArrowFlipped 0.3s forwards; + } + + .DatePicker__calendarContainer { + position: absolute; + top: calc(100% + 20px); + left: 50%; + transform: translateX(-50%); + } + + .DatePicker__calendarContainer.-top { + top: auto; + bottom: calc(100% + 20px); + } + + .Calendar, + .Calendar * { + margin: 0; + padding: 0; + box-sizing: border-box; + direction: ltr; + } + + .Calendar, + .Calendar.-rtl * { + direction: rtl; + } + + .DatePicker__calendarArrow { + position: absolute; + width: 0; + height: 0; + top: calc(100% + 10px); + left: 0; + right: 0; + margin: 0 auto; + border-style: solid; + z-index: 10; + border-width: 0 10px 10px 10px; + border-color: transparent transparent #fff transparent; + + } + + .Calendar { + --cl-color-black: #444444; + --cl-color-disabled: #d4d4d4; + --cl-color-error: #ff2929; + font-size: 10px; + background: rgba(245, 245, 245, 0.53); + border:1px solid #DBDBDB; + box-shadow: 0 1em 4em rgba(0, 0, 0, 0.07); + border-radius: 1em; + position: relative; + user-select: none; + padding-top: 1.2em; + display: flex; + flex-direction: column; + width: 33em; + z-index: 10; + max-width: 90vw; + min-height: 36.7em; + } + + .DatePicker .Calendar, + .DatePicker__calendarArrow { + transform: translateY(2.5em); + opacity: 0; + animation: fadeCalendar 0.3s forwards; + + } + + .DatePicker__calendarContainer.-top .Calendar { + transform: translateY(-2.5em); + } + + .Calendar.-noFocusOutline *:focus { + outline: none !important; + } + + .Calendar > :not(.Calendar__footer) button { + font-family: inherit; + background: transparent; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + outline: none; + } + + .Calendar__header { + display: flex; + color: var(--cl-color-black); + padding: 2em 2.9em; + align-items: center; + overflow: hidden; + } + + .Calendar__monthArrowWrapper { + line-height: 0; + font-size: 1em; + padding: 3px; + position: relative; + border: none; + z-index: 1; + opacity: 1; + transition: 0.2s; + background-color: royalblue; + } + + .Calendar__monthArrowWrapper:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; + } + + .Calendar__monthArrowWrapper:disabled, + .Calendar__monthArrowWrapper.-hidden { + opacity: 0; + pointer-events: none; + } + + .Calendar__monthArrowWrapper.-left { + transform: rotate(90deg); + } + .Calendar.-rtl .Calendar__monthArrowWrapper.-left { + transform: rotate(-90deg); + } + + .Calendar__monthArrowWrapper.-right { + transform: rotate(-90deg); + + } + .Calendar.-rtl .Calendar__monthArrowWrapper.-right { + transform: rotate(90deg); + } + + .Calendar__monthArrowWrapper:active .Calendar__monthArrow { + transform: scale(0.7); + } + + .Calendar__monthArrow { + border-radius: 50%; + transition: var(--animation-duration) transform; + pointer-events: none; + background-repeat: no-repeat; + display: block; + width: 1.7em; + height: 1.7em; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg class='nc-icon-wrapper' fill='%23000000'%3E%3Cdefs stroke='none'%3E%3C/defs%3E%3Cpath class='cls-1' d='M12 23.25V.75' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px'%3E%3C/path%3E%3Cpath class='cls-2' d='M22.5 11.25L12 .75 1.5 11.25' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + background-size: 100% 100%; + } + + .Calendar__monthYearContainer { + flex: 1; + position: relative; + } + + .Calendar__monthYear { + font-size: 1.6em; + font-weight: 500; + display: flex; + align-items: center; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + will-change: transform, opacity; + backface-visibility: hidden; + transform: translateZ(0); + transition: var(--animation-duration); + line-height: 1; + } + + .Calendar__monthYear.-hiddenNext { + opacity: 0; + transform: translateX(50%); + } + + .Calendar.-rtl .Calendar__monthYear.-hiddenNext { + transform: translateX(-150%); + } + + .Calendar__monthYear.-hiddenPrevious { + opacity: 0; + transform: translateX(-150%); + } + + .Calendar.-rtl .Calendar__monthYear.-hiddenPrevious { + transform: translateX(50%); + } + + .Calendar__monthYear.-shown { + opacity: 1; + margin-top: auto; + margin-bottom: auto; + transform: translateX(-50%); + } + + .Calendar__monthYear.-shownAnimated { + animation: var(--animation-duration) fadeTextToCenter forwards; + } + + .Calendar__monthYear > * { + padding: 0.2em 0.5em; + border: 1px solid transparent; + transition: var(--animation-duration); + font-size: 1.05em; + display: flex; + justify-content: center; + align-items: center; + transform: translateX(0) scale(0.95); + will-change: transform; + border-radius: 5px; + } + + .Calendar__monthYear:not(.-shown) > *, + .Calendar__monthYear > *.-hidden { + cursor: default; + pointer-events: none; + } + + .Calendar__monthText { + margin-left: -0.3em; + } + .Calendar__yearText:last-child { + margin-right: -0.3em; + } + + .Calendar__monthYear.-shown > *:hover, + .Calendar:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus, + .Calendar__monthYear > *.-activeBackground { + background: #f5f5f5; + } + + .Calendar__monthText:hover { + transform: translateX(-0.2em) scale(0.95); + } + .Calendar.-rtl .Calendar__monthText:hover { + transform: translateX(0.2em) scale(0.95); + } + + .Calendar__yearText:hover { + transform: translateX(0.2em) scale(0.95); + } + .Calendar.-rtl .Calendar__yearText:hover { + transform: translateX(-0.2em) scale(0.95); + } + + .Calendar__monthYear .Calendar__yearText.-hidden { + transform: translateX(50%); + opacity: 0; + } + + .Calendar.-rtl .Calendar__monthYear .Calendar__yearText.-hidden { + transform: translateX(-50%); + } + + .Calendar__monthYear .Calendar__monthText.-hidden { + transform: translateX(-50%); + opacity: 0; + } + + .Calendar.-rtl .Calendar__monthYear .Calendar__monthText.-hidden { + transform: translateX(50%); + } + + .Calendar__monthYear:not(.-shown) > * { + pointer-events: none; + } + + .Calendar__monthSelectorAnimationWrapper, + .Calendar__yearSelectorAnimationWrapper { + position: absolute; + width: 100%; + height: 80%; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .Calendar__monthSelectorWrapper { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .Calendar__monthSelector { + padding: 0 2.5em; + align-content: center; + padding-bottom: 2em; + } + + .Calendar__monthSelector, + .Calendar__yearSelector { + display: flex; + flex-wrap: wrap; + position: relative; + z-index: 2; + background-color: #fff; + transform: translateY(-150%); + will-change: transform; + transition: 0.6s; + height: 100%; + } + + .Calendar__yearSelectorWrapper { + width: 100%; + height: 100%; + } + + .Calendar__yearSelectorWrapper::after, + .Calendar__yearSelectorWrapper::before { + content: ''; + width: 100%; + height: 5em; + position: absolute; + left: 0; + opacity: 0; + transition: 0.4s; + transition-delay: 0.2s; + } + + .Calendar__yearSelectorWrapper::after { + background-image: linear-gradient(to bottom, #fff, #fff 10%, rgba(245, 245, 245, 0)); + top: -0.1em; + } + + .Calendar__yearSelectorWrapper::before { + background-image: linear-gradient(to top, #fff, #fff 10%, rgba(245, 245, 245, 0)); + bottom: 0; + } + + .Calendar__yearSelectorWrapper.-faded::after, + .Calendar__yearSelectorWrapper.-faded::before { + opacity: 1; + z-index: 3; + } + + .Calendar__yearSelector { + align-content: flex-start; + scrollbar-width: 0; + overflow: scroll; + position: relative; + width: 100%; + padding: 5em 2em; + -ms-overflow-style: none; + } + + .Calendar__yearSelector::-webkit-scrollbar { + display: none; + } + + .Calendar__yearSelectorItem { + width: 25%; + display: flex; + justify-content: center; + } + + .Calendar__yearSelectorItem:not(:nth-child(-n + 4)) { + margin-top: 1.5em; + } + + .Calendar__yearSelectorText { + border: none; + font-size: 1.4em; + min-width: 85%; + padding: 0.2em 0.5em; + border-radius: 8.5px; + } + + .Calendar__monthSelector.-open, + .Calendar__yearSelector.-open { + transform: translateY(0); + } + + .Calendar__yearSelectorText:focus, + .Calendar__monthSelectorItemText:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; + } + + .Calendar__monthSelectorItem { + width: calc(100% / 3); + display: flex; + justify-content: center; + } + + .Calendar__monthSelectorItem:not(:nth-child(-n + 3)) { + margin-top: 2em; + } + + .Calendar__monthSelectorItemText { + border: none; + padding: 0.4em 0.4em; + border-radius: 8.5px; + font-size: 1.3em; + min-width: 70%; + transition: 0.3s; + } + + .Calendar__monthSelectorItem:not(.-active) .Calendar__monthSelectorItemText:not(:disabled):hover, + .Calendar__yearSelectorItem:not(.-active) .Calendar__yearSelectorText:not(:disabled):hover { + background: #f5f5f5; + } + + .Calendar__monthSelectorItemText:disabled, + .Calendar__yearSelectorText:disabled { + opacity: 0.5; + cursor: default; + } + + .Calendar__monthSelectorItem.-active .Calendar__monthSelectorItemText, + .Calendar__yearSelectorItem.-active .Calendar__yearSelectorText { + background-color: var(--cl-color-primary); + color: #fff; + } + + .Calendar__weekDays { + display: flex; + justify-content: space-between; + color: var(--cl-color-disabled); + font-size: 1.2em; + margin-bottom: 0.7em; + padding: 0 2.6em; + position: relative; + } + + .Calendar__weekDay { + display: block; + width: calc(100% / 7); + text-align: center; + text-decoration: none; + } + + .Calendar__sectionWrapper { + position: relative; + min-height: 25.8em; + overflow: hidden; + } + + .Calendar__section { + display: flex; + flex-direction: column; + padding: 0 3.2em; + position: absolute; + color: var(--cl-color-black); + top: 0; + padding-top: 0.5em; + left: 0; + width: 100%; + will-change: transform, opacity; + transform: translateZ(0); + backface-visibility: hidden; + transition: var(--animation-duration); + } + + .Calendar__section.-hiddenPrevious { + opacity: 0.5; + transform: translateX(-90%); + } + + .Calendar.-rtl .Calendar__section.-hiddenPrevious { + transform: translateX(90%); + } + + .Calendar__section.-hiddenNext { + opacity: 0.5; + transform: translateX(90%); + } + + .Calendar.-rtl .Calendar__section.-hiddenNext { + transform: translateX(-90%); + } + + .Calendar__section.-shown { + opacity: 1; + transform: translateX(0); + } + + .Calendar__section.-shownAnimated { + animation: var(--animation-duration) FadeContentToCenter forwards; + } + + .Calendar__weekRow { + display: flex; + width: 100%; + } + + .Calendar__day { + display: block; + width: calc(100% / 7); + text-align: center; + padding: calc(0.25em - 1px) 0; + font-size: 1.6em; + border-radius: 11px; + transition: 0.2s; + border: 1px solid transparent; + margin: 0.3em; + color: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + background-color: #F3F3F3; + color:#06BACE; + } + + .Calendar__day:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; + } + + .Calendar__day.-ltr { + min-height: 2.6em; + font-size: 1.45em; + } + + .Calendar__day.-rtl { + font-size: 1.55em; + height: 2.45em; + } + + .Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover { + background: #eaeaea; + border-radius: 50%; + color: var(--cl-color-black); + border-color: transparent; + } + + .Calendar__day.-selected, + .Calendar__day.-selectedStart, + .Calendar__day.-selectedEnd { + background: var(--cl-color-primary); + color: #fff; + } + + .Calendar__day.-ltr.-selectedStart { + border-radius: 0; + border-top-left-radius: 100em; + border-bottom-left-radius: 100em; + } + + .Calendar__day.-rtl.-selectedStart { + border-radius: 0; + border-top-right-radius: 100em; + border-bottom-right-radius: 100em; + } + + .Calendar__day.-selectedBetween { + background: var(--cl-color-primary-light); + color: var(--cl-color-primary); + border-radius: 0; + } + + .Calendar__day.-ltr.-selectedEnd { + border-top-right-radius: 100em; + border-bottom-right-radius: 100em; + } + + .Calendar__day.-rtl.-selectedEnd { + border-top-left-radius: 100em; + border-bottom-left-radius: 100em; + } + + .Calendar__day.-weekend:not(.-selected):not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { + color: var(--cl-color-error); + } + + .Calendar__day.-weekend.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + background: var(--cl-color-error); + } + + .Calendar__day.-disabled { + color: var(--cl-color-disabled) !important; + background: transparent !important; + cursor: default !important; + } + .Calendar__day.-selected { + border-radius: 50%; + } + .Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { + font-weight: 600; + color: var(--cl-color-black); + color: #000; + position: relative; + } + + .Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + content: ''; + position: absolute; + bottom: 0.2em; + display: block; + width: 0.6em; + height: 1px; + background: #000; + left: 50%; + opacity: 0.5; + transform: translateX(-50%); + transition: 0.2s; + } + + .Calendar__day.-today:hover:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + opacity: 0; + } + + .Calendar__day.-blank { + color: transparent; + cursor: default; + pointer-events: none; + } + + .Calendar__footer { + position: relative; + z-index: 1; + } + + @keyframes fadeCalendar { + from { + opacity: 0; + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + @keyframes fadeArrowFlipped { + from { + opacity: 0; + } + + to { + opacity: 1; + transform: translateY(0) rotate(180deg); + } + } + + @keyframes fadeTextToCenter { + to { + opacity: 1; + transform: translateX(-50%); + } + } + + @keyframes FadeContentToCenter { + to { + opacity: 1; + transform: translateX(0); + } + } + \ No newline at end of file diff --git a/src/components/Calender/index.js b/src/components/Calender/index.js new file mode 100644 index 0000000..9f2a29a --- /dev/null +++ b/src/components/Calender/index.js @@ -0,0 +1,23 @@ +import React, { useState } from "react"; +import './index.css'; +import {Calendar, utils} from "react-modern-calendar-datepicker"; + +import './index.css'; + +const Calender = () =>{ + const [selectedDay, setSelectedDay] = useState(null); + return( +
+ + +
+ ); +}; + + +export default Calender; \ No newline at end of file diff --git a/src/redux/data.js b/src/redux/data.js index 16535c8..3e3263d 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -20,6 +20,7 @@ import Chart from "../components/Recharts"; import CircularProgressbar from "../components/CircularProgressbar"; import Stepper from "../components/Stepper"; import Product from "../components/Product"; +import Calender from '../components/Calender'; const components = [ { @@ -457,6 +458,17 @@ const components = [ code : null, } }, + { + name : "Calender", + props : [ + + ], + content : { + name : "Calender", + component : , + code : null, + } + }, ]; export default components;