diff --git a/mpwo_client/src/components/App.css b/mpwo_client/src/components/App.css index 66f812eb..89d6a016 100644 --- a/mpwo_client/src/components/App.css +++ b/mpwo_client/src/components/App.css @@ -192,3 +192,124 @@ input, textarea { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } + + +/* calendar */ +:root { + --main-color: #1a8fff; + --text-color: #777; + --text-color-light: #ccc; + --border-color: #eee; + --bg-color: #f9f9f9; + --neutral-color: #fff; +} + +.calendar .col-start { + justify-content: flex-start; + text-align: left; +} + +.calendar .col-center { + justify-content: center; + text-align: center; +} + +.calendar .col-end { + justify-content: flex-end; + text-align: right; +} + +.calendar { + display: block; + position: relative; + width: 100%; + background: var(--neutral-color); + border: 1px solid var(--border-color); +} + +.calendar .header { + text-transform: uppercase; + font-weight: 700; + /*font-size: 115%;*/ + padding: 0.5em 0; + border-bottom: 1px solid var(--border-color); +} + +.calendar .header .icon { + cursor: pointer; + transition: .15s ease-out; +} + +.calendar .header .icon:hover { + transform: scale(1.75); + transition: .25s ease-out; + color: var(--main-color); +} + +.calendar .header .icon:first-of-type { + margin-left: 1em; +} + +.calendar .header .icon:last-of-type { + margin-right: 1em; +} + +.calendar .days { + text-transform: uppercase; + font-weight: 400; + color: var(--text-color-light); + font-size: 70%; + padding: .75em 0; + border-bottom: 1px solid var(--border-color); +} + +.calendar .body .cell { + position: relative; + height: 3em; + border-right: 1px solid var(--border-color); + overflow: hidden; + cursor: pointer; + background: var(--neutral-color); +} + +.calendar .body .cell:hover { + background: var(--bg-color); +} + +.calendar .body .selected { + border-left: 10px solid transparent; + border-image: linear-gradient(45deg, #1a8fff 0%,#53cbf1 40%); +} + +.calendar .body .row { + border-bottom: 1px solid var(--border-color); + margin: 0; +} + +.calendar .body .row:last-child { + border-bottom: none; +} + +.calendar .body .cell:last-child { + border-right: none; +} + +.calendar .body .cell .number { + position: absolute; + font-size: 82.5%; + line-height: 1; + top: .75em; + right: .75em; + font-weight: 700; +} + +.calendar .body .disabled { + color: var(--text-color-light); + pointer-events: none; +} + +.calendar .body .col { + flex-grow: 0; + flex-basis: calc(100%/7); + width: calc(100%/7); +} diff --git a/mpwo_client/src/components/Dashboard/index.jsx b/mpwo_client/src/components/Dashboard/index.jsx index ebcac3d0..4229637e 100644 --- a/mpwo_client/src/components/Dashboard/index.jsx +++ b/mpwo_client/src/components/Dashboard/index.jsx @@ -3,6 +3,7 @@ import { Helmet } from 'react-helmet' import { connect } from 'react-redux' import ActivityCard from './ActivityCard' +import Calendar from './../Others/Calendar' import Records from './Records' import Statistics from './Statistics' import { getData } from '../../actions' @@ -40,6 +41,7 @@ class DashBoard extends React.Component {
+
diff --git a/mpwo_client/src/components/Others/Calendar.jsx b/mpwo_client/src/components/Others/Calendar.jsx new file mode 100644 index 00000000..1426cd44 --- /dev/null +++ b/mpwo_client/src/components/Others/Calendar.jsx @@ -0,0 +1,118 @@ +// eslint-disable-next-line max-len +// source: https://blog.flowandform.agency/create-a-custom-calendar-in-react-3df1bfd0b728 +import dateFns from 'date-fns' +import React from 'react' + +export default class Calendar extends React.Component { + constructor(props, context) { + super(props, context) + this.state = { + currentMonth: new Date(), + } + } + + renderHeader() { + const dateFormat = 'MMM YYYY' + return ( +
+
this.handlePrevMonth()}> +