add and styled calendar
This commit is contained in:
DmitriyB
@@ -0,0 +1,192 @@
|
||||
.react-calendar {
|
||||
width: 350px;
|
||||
width: 540px;
|
||||
width: 100%;
|
||||
/* max-width: 100%; */
|
||||
/* border: 1px solid #a0a096; */
|
||||
border: none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
line-height: 1.125em;
|
||||
}
|
||||
.react-calendar--doubleView {
|
||||
width: 700px;
|
||||
}
|
||||
.react-calendar--doubleView .react-calendar__viewContainer {
|
||||
display: flex;
|
||||
margin: -0.5em;
|
||||
}
|
||||
.react-calendar--doubleView .react-calendar__viewContainer > * {
|
||||
width: 50%;
|
||||
margin: 0.5em;
|
||||
}
|
||||
.react-calendar,
|
||||
.react-calendar *,
|
||||
.react-calendar *:before,
|
||||
.react-calendar *:after {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.react-calendar button {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
.react-calendar button:enabled:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.react-calendar__navigation {
|
||||
display: flex;
|
||||
height: 44px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.react-calendar__navigation button {
|
||||
min-width: 44px;
|
||||
background: none;
|
||||
color: transparent;
|
||||
/* background: url('navigateRightIcon.svg') 50% 50% no-repeat; */
|
||||
}
|
||||
.react-calendar__navigation button:nth-child(1) {
|
||||
background: url('navigateCalendarButtonIcon.svg') 50% 50% no-repeat;
|
||||
}
|
||||
.react-calendar__navigation button:nth-child(3) {
|
||||
background: url('navigateCalendarButtonIcon.svg') 50% 50% no-repeat;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.react-calendar__navigation button:disabled {
|
||||
background-color: #f0f0f0;
|
||||
|
||||
}
|
||||
.react-calendar__navigation button:disabled:nth-child(1) {
|
||||
background-color: transparent;
|
||||
opacity: .7;
|
||||
}
|
||||
.react-calendar__navigation button:disabled:nth-child(2) {
|
||||
background-color: transparent;
|
||||
}
|
||||
.react-calendar__navigation button:enabled:hover,
|
||||
.react-calendar__navigation button:enabled:focus {
|
||||
/* background-color: #e6e6e6; */
|
||||
opacity: .6;
|
||||
}
|
||||
.react-calendar__month-view__weekdays {
|
||||
text-align: center;
|
||||
/* text-transform: uppercase; */
|
||||
font-weight: bold;
|
||||
font-size: 0.75em;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 130%;
|
||||
}
|
||||
.react-calendar__month-view__weekdays__weekday {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.react-calendar__month-view__weekNumbers .react-calendar__tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.react-calendar__month-view__days__day--weekend {
|
||||
/* color: #d10000; */
|
||||
}
|
||||
.react-calendar__month-view__days__day--neighboringMonth {
|
||||
color: #757575;
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
text-indent: 200%;
|
||||
}
|
||||
.react-calendar__year-view .react-calendar__tile,
|
||||
.react-calendar__decade-view .react-calendar__tile,
|
||||
.react-calendar__century-view .react-calendar__tile {
|
||||
padding: 2em 0.5em;
|
||||
}
|
||||
.react-calendar__tile {
|
||||
max-width: 100%;
|
||||
padding: 10px 6.6667px;
|
||||
background: none;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 130%;
|
||||
|
||||
color: #CE56C2;
|
||||
}
|
||||
.react-calendar__tile:disabled {
|
||||
/* background-color: #f0f0f0; */
|
||||
color: #B196AF;
|
||||
}
|
||||
.react-calendar__tile:enabled:hover,
|
||||
.react-calendar__tile:enabled:focus {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.react-calendar__tile--now {
|
||||
/* background: #ffff76; */
|
||||
}
|
||||
.react-calendar__tile--now:enabled:hover,
|
||||
.react-calendar__tile--now:enabled:focus {
|
||||
/* background: #ffffa9; */
|
||||
}
|
||||
.react-calendar__tile--hasActive {
|
||||
background: #76baff;
|
||||
}
|
||||
.react-calendar__tile--hasActive:enabled:hover,
|
||||
.react-calendar__tile--hasActive:enabled:focus {
|
||||
background: #a9d4ff;
|
||||
}
|
||||
.react-calendar__tile--active {
|
||||
background: #006edc;
|
||||
color: white;
|
||||
}
|
||||
.react-calendar__tile--active:enabled:hover,
|
||||
.react-calendar__tile--active:enabled:focus {
|
||||
background: #1087ff;
|
||||
}
|
||||
.react-calendar--selectRange .react-calendar__tile--hover {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
|
||||
abbr[title] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.react-calendar__navigation__label__labelText.react-calendar__navigation__label__labelText--from {
|
||||
color: #333333;
|
||||
color: white;
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
/* .react-calendar__month-view__days button:nth-child(-n+7) {
|
||||
background-color: #006edc;
|
||||
} */
|
||||
|
||||
.react-calendar__month-view__days button:nth-child(-n+35) {
|
||||
background-color: #FAFAFA;
|
||||
background: #322948;
|
||||
}
|
||||
|
||||
.react-calendar__month-view__days button:nth-child(-n+28) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.react-calendar__month-view__days button:nth-child(-n+21) {
|
||||
background-color: #FAFAFA;
|
||||
background: #322948;
|
||||
}
|
||||
|
||||
.react-calendar__month-view__days button:nth-child(-n+14) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.react-calendar__month-view__days button:nth-child(-n+7) {
|
||||
background-color: #FAFAFA;
|
||||
background: #322948;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
import Calendar from "react-calendar";
|
||||
import './calendar.css';
|
||||
|
||||
export const CalendarComponent:React.FC = React.memo(() => {
|
||||
return <Calendar
|
||||
showDoubleView={false}
|
||||
next2Label={null}
|
||||
prev2Label={null}
|
||||
view={"month"}
|
||||
maxDetail={"month"}
|
||||
minDetail={"month"}
|
||||
// tileDisabled={(a) => {
|
||||
// return props.disableDays.includes(a.date.getDate())
|
||||
// }}
|
||||
minDate={new Date()}
|
||||
// onClickDay={(e) => onClickDay(e.getDate(), e.getMonth())}
|
||||
/>
|
||||
})
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 19L8 12L15 5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 194 B |
@@ -211,4 +211,12 @@
|
||||
opacity: 0;
|
||||
transition: .3s;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.main-part-plan-content {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 80px 0;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
@@ -6,11 +6,15 @@ import { ContentContainer } from "./contentContainer";
|
||||
import { MainPartFooter } from "./main-part-footer";
|
||||
import { OrLineContainer } from "./orLineContainer";
|
||||
import { CSSTransition, TransitionGroup } from "react-transition-group";
|
||||
import Calendar from "react-calendar";
|
||||
import { CalendarComponent } from "./calendar/calendar";
|
||||
import { PlanContentContainer } from "./planContentContainer";
|
||||
|
||||
|
||||
export const MainPart: React.FC = React.memo(() => {
|
||||
const changeContent = useRef(0);
|
||||
const [showBackground, setShowBackground] = useState<boolean>(false);
|
||||
const [planContent, setPlaneContent] = useState<JSX.Element>();
|
||||
const [currentContent, setCurrentContent] = useState<JSX.Element>(
|
||||
<ContentContainer
|
||||
titleText="Удаленная демонстрация жилого комплекса"
|
||||
@@ -57,6 +61,13 @@ export const MainPart: React.FC = React.memo(() => {
|
||||
|
||||
function onClickPlaneDemo() {
|
||||
enableBackground();
|
||||
setPlaneContent(
|
||||
<PlanContentContainer
|
||||
title="Выбор даты"
|
||||
content={<CalendarComponent />}
|
||||
/>
|
||||
);
|
||||
setCurrentContent(<></>);
|
||||
}
|
||||
|
||||
function onClickConnect() {
|
||||
@@ -84,7 +95,14 @@ export const MainPart: React.FC = React.memo(() => {
|
||||
{currentContent}
|
||||
</div>
|
||||
</CSSTransition>
|
||||
</TransitionGroup>
|
||||
</TransitionGroup>
|
||||
{
|
||||
planContent ?
|
||||
<div className="main-part-plan-content">
|
||||
{planContent}
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<CSSTransition
|
||||
in={showBackground}
|
||||
timeout={300}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
type TProps = {
|
||||
title: string
|
||||
content: JSX.Element
|
||||
}
|
||||
|
||||
export const PlanContentContainer:React.FC<TProps> = React.memo((props) => {
|
||||
return <div className="plan-content-container">
|
||||
<span className="plan-content-title">{props.title}</span>
|
||||
{props.content}
|
||||
</div>
|
||||
})
|
||||
Reference in New Issue
Block a user