sidebar calender

Author: dixitsigdel8

src/Components/Sidebar/SideCalender.jsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react'
+import moment from 'moment'
+import buildCalender from '../../Screens/Calender/build'
+import Header from '../Sidebar/SideCalenderHeader'
+import dayStyles from '../../Screens/Calender/calender-day'
+import './side-calender.css'
+
+const SideCalendar = () => {
+  const [calender, setCalender] = useState([])
+  const [value, setValue] = useState(moment())
+  const [eventtrue, setEventTrue] = useState(false)
+
+  useEffect(() => {
+    setCalender(buildCalender(value))
+  }, [value])
+
+  const handleEventChange = () => {
+    setEventTrue(true)
+  }
+
+  return (
+    <>
+      <div className='calendar-side'>
+        <Header value={value} setValue={setValue} />
+
+        <div className='body-side'>
+          <div className='day-names-side'>
+            {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d) => (
+              <div className='week-side'>{d}</div>
+            ))}
+          </div>
+          {calender.map((week) => (
+            <div>
+              {week.map((day) => (
+                <div
+                  className='day-side'
+                  onClick={() => setValue(day)}
+                >
+                  <div className={dayStyles(day, value) + '-side'} onClick={() => handleEventChange()}>
+                    {day.format('D').toString()}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+        <button className='button-sidebar'>View Calender</button>
+      </div>
+
+    </>
+  )
+}
+
+export default SideCalendar

src/Components/Sidebar/SideCalenderHeader.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+export default function CalendarHeader ({ value, setValue }) {
+  function currMonthName () {
+    return value.format('MMMM')
+  }
+
+  function currYear () {
+    return value.format('YYYY')
+  }
+
+  function prevMonth () {
+    return value.clone().subtract(1, 'month')
+  }
+
+  function nextMonth () {
+    return value.clone().add(1, 'month')
+  }
+
+  function thisMonth () {
+    return value.isSame(new Date(), 'month')
+  }
+
+  return (
+    <div className='header-side'>
+      <div className='calender-header-container-side'>
+        <div className='calender-month-wrapper-side'>
+
+          <div
+            className='previous-side'
+            onClick={() => setValue(prevMonth())}
+          >
+            {String.fromCharCode(171)}
+          </div>
+          <div className='current-side'>
+            {currMonthName()} {currYear()}
+          </div>
+
+          <div className='next-side' onClick={() => setValue(nextMonth())}>
+            {String.fromCharCode(187)}
+          </div>
+        </div>
+
+      </div>
+    </div>
+  )
+}

src/Components/Sidebar/Sidebar.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import './sidebar.css'
+import SideCalendar from './SideCalender'
 
 const mainnav = [
   {
@@ -80,8 +81,9 @@ function MainNav ({ dropdownActive, setDropdownActive }) {
   }
 
   return (
-    <ul className='list-container'>
-      {
+    <>
+      <ul className='list-container'>
+        {
         mainnav.map(navitem => {
           return (
             <li className={navitem.dropdown.length > 0 ? 'list-items' : 'list-items-menu'} key={navitem.name}>
@@ -121,6 +123,9 @@ function MainNav ({ dropdownActive, setDropdownActive }) {
           )
         })
       }
-    </ul>
+      </ul>
+      {/* <Calender /> */}
+      <SideCalendar />
+    </>
   )
 }

src/Components/Sidebar/side-calender.css

@@ -0,0 +1,119 @@
+.calendar-side {
+  box-sizing: border-box;
+  font-size: 1rem;
+  max-width: 400px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+}
+
+.header-side {
+  background-color: #2b2b2c;
+  text-align: center;
+  line-height: 29px;
+  color: white;
+  font-weight: 300;
+  height: 30px;
+  font-size: 17px;
+}
+
+.day-names-side {
+  display: flex;
+  flex-wrap: wrap;
+  width: 195px;
+  margin: 0 auto;
+  align-items: center;
+  color: white;
+}
+
+.week-side {
+  background-color: #141414;
+  width: calc(100% / 7);
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  color: rgb((172), 167, 167);
+  font-weight: 300;
+}
+
+.week-side div {
+  width: 100%;
+}
+
+.day-side {
+  position: relative;
+  width: calc(100% / 7);
+  height: 44px;
+  display: inline-block;
+  background-color: black;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  z-index: 1;
+  text-align: center;
+  color: white;
+  border: 1px solid rgb(22, 21, 21);
+  line-height: 2;
+  font-size: 14px;
+}
+
+.calender-month-wrapper-side {
+  display: flex;
+}
+
+.calender-header-container-side {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.today-side {
+  background-color: rgb(64, 95, 80);
+  height: 27px;
+  width: 27px;
+  border-radius: 5px;
+  margin-top: 5px;
+}
+
+.before-side {
+  color: white;
+  background-color: rgb(12, 11, 11);
+  height: 27px;
+  width: 27px;
+  border-radius: 5px;
+  margin-top: 5px;
+}
+
+.previous-side {
+  text-align: left;
+  margin-left: 1rem;
+  margin-right: 25px;
+  color: rgba(0, 198, 136, 1);
+  cursor: pointer;
+}
+
+.next-side {
+  margin-left: 36px;
+  color: rgba(0, 198, 136, 1);
+  cursor: pointer;
+}
+
+.button-sidebar {
+  background-color: #00c688;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  width: 100%;
+}
+
+.selected-side {
+  background-color: rgba(0, 198, 136, 1);
+  color: white;
+  font-weight: bold;
+  height: 27px;
+  width: 30px;
+}

src/Screens/Calender/Calender.jsx

@@ -24,8 +24,6 @@ const Calender = () => {
     dispatch(listCalenderEvents())
   }, [dispatch])
 
-  console.log('evet', eventtrue)
-
   const handleEventChange = () => {
     setEventTrue(true)
   }