api: calender with sidebar and gui

api/controllers/calendarController.js

@@ -0,0 +1,102 @@
+const Calendar = require('../models/calendarModel')
+const Sequelize = require('sequelize')
+const Op = Sequelize.Op
+
+// @desc Fetch all calendars events
+// @route Get /api/calendar
+// @access Public
+
+const getCalendarEvents = (req, res) => {
+  const pageSize = 3
+  const page = Number(req.query.pageNumber) || 0
+  const order = req.query.order || 'ASC'
+  const ordervalue = order && [['title', order]]
+  Calendar.findAll({ offset: page, limit: pageSize, order: ordervalue })
+    .then(calendar => res.json({ calendar, page, pageSize }).status(200))
+    .catch((err) => res.json({ err }).status(400))
+}
+
+// @desc Add individual calendar events
+// @route POST /api/calendar/add
+//
+
+const addCalendarEvent = (req, res) => {
+  const { title, description, startDate, startTime, endDate, endTime } = req.body
+
+  if (startDate >= endDate) {
+    throw new Error('Start date must be before End date')
+  } else {
+    Calendar.create({
+      title,
+      description,
+      startDate,
+      startTime,
+      endDate,
+      endTime
+    })
+      .then(() => res.json({ message: 'Calendar Events Creted !!!' }).status(200))
+      .catch((err) => res.json({ error: err.message }).status(400))
+  }
+}
+
+// @desc Fetch single events
+// @route Get/api/calendar/:id
+// @access Public
+
+const getCalendarEventsById = (req, res) => {
+  const id = req.params.id
+
+  Calendar.findByPk(id)
+    .then(calendar => {
+      if (calendar) {
+        res.json(calendar)
+      } else {
+        res.status(404)
+        throw new Error('Calendar not found')
+      }
+    })
+    .catch((err) => res.json({ error: err.message }.status(400)))
+}
+
+// @desc Update Calendar Events
+// @route PUT/api/calendar/:id
+
+const updateCalendarEvents = (req, res) => {
+  const {
+    title, description, startDate, startTime, endDate, endTime
+  } = req.body
+  const id = req.params.id
+  Calendar.findByPk(id).then(calendar => {
+    if (calendar) {
+      const { id } = calendar
+      Calendar.update({
+        title,
+        description,
+        startDate,
+        startTime,
+        endDate,
+        endTime
+      },
+      { where: { id } })
+        .then(() => res.json({ message: 'Calendar Events Updated !!' }).status(200))
+        .catch((err) => res.json({ error: err.message }).status(400))
+    }
+    res.status(404)
+    throw new Error('News not found')
+  })
+}
+
+// desc Search Events
+// @route Post /api/calendar/search
+// @access Private
+
+const searchCalendarEvents = (req, res) => {
+  const { title } = req.query
+  const order = req.query.order || 'ASC'
+
+  Calendar.findAll({ where: { title: { [Op.iLike]: '%' + title + '%' } }, order: [['title', order]] })
+    .then(title => res.json({ title }).status(200))
+    .catch(err => res.json({ error: err }).status(400))
+}
+
+module.exports = { addCalendarEvent, getCalendarEvents, updateCalendarEvents, searchCalendarEvents, getCalendarEventsById }

api/migrations/20210514073023-Calendar.js

@@ -0,0 +1,40 @@
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    queryInterface.createTable('calendars', {
+      id: {
+        type: Sequelize.INTEGER,
+        primaryKey: true,
+        autoIncrement: true
+      },
+      title: {
+        type: Sequelize.TEXT
+      },
+      description: {
+        type: Sequelize.TEXT
+      },
+      startDate: {
+        type: Sequelize.DATE
+      },
+      startTime: {
+        type: Sequelize.TIME
+      },
+      endDate: {
+        type: Sequelize.DATE
+      },
+      endTime: {
+        type: Sequelize.TIME
+      },
+      createdAt: {
+        type: Sequelize.DATE
+      },
+      updatedAt: {
+        type: Sequelize.DATE
+      }
+    })
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    queryInterface.dropTable('calendars', {})
+  }
+}

api/models/calendarModel.js

@@ -0,0 +1,34 @@
+const Sequelize = require('sequelize')
+const db = require('../config/database.js')
+
+const Calendar = db.define(
+  'calendars',
+  {
+    id: {
+      type: Sequelize.INTEGER,
+      primaryKey: true,
+      autoIncrement: true
+    },
+    title: {
+      type: Sequelize.TEXT
+    },
+    description: {
+      type: Sequelize.TEXT
+    },
+    startDate: {
+      type: Sequelize.DATE
+    },
+    startTime: {
+      type: Sequelize.TIME
+    },
+    endDate: {
+      type: Sequelize.DATE
+    },
+    endTime: {
+      type: Sequelize.TIME
+    }
+  },
+  { timestamps: true }
+)
+
+module.exports = Calendar

api/routes/calendarEventsRouter.js

@@ -0,0 +1,16 @@
+const express = require('express')
+const router = express.Router()
+
+const { addCalendarEvent, getCalendarEvents, updateCalendarEvents, searchCalendarEvents, getCalendarEventsById } = require('../controllers/calendarController')
+
+router.route('/').get(getCalendarEvents)
+
+router.route('/add').post(addCalendarEvent)
+
+router
+  .route('/:id')
+  .put(updateCalendarEvents)
+  .get(getCalendarEventsById)
+router.route('/search').get(searchCalendarEvents)
+
+module.exports = router

api/server.js

@@ -8,6 +8,7 @@ const courseRoutes = require('./routes/courseRouter.js')
 const newsRoutes = require('./routes/newsRouter')
 const enterprisesRoutes = require('./routes/enterprisesRouter')
 const communityGroupsRoutes = require('./routes/communityGroupRouter')
+const calendarRoutes = require('./routes/calendarEventsRouter')
 const sequelize = require('./config/database.js')
 const cors = require('cors')
 const dotenv = require('dotenv')
@@ -25,6 +26,7 @@ app.use('/api/resources', resourceRoutes)
 app.use('/api/collection', collectionRoutes)
 app.use('/api/enterprises', enterprisesRoutes)
 app.use('/api/groups', communityGroupsRoutes)
+app.use('/api/calendar', calendarRoutes)
 app.use('/api/courses', courseRoutes)
 app.use('/api/news', newsRoutes)
 

package.json

@@ -6,9 +6,10 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "axios": "^0.21.1",
     "aws-amplify": "^3.3.27",
+    "axios": "^0.21.1",
     "dotenv": "^8.2.0",
+    "moment": "^2.29.1",
     "parcel-bundler": "^1.12.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/App.jsx

@@ -33,6 +33,7 @@ import MobileMessage from './Components/MobileMessage/MobileMessage'
 import Courses from './Screens/Courses/Courses'
 import LessonPage from './Screens/Dashboard/LessonPage/LessonPage'
 import LessonTest from './Screens/LessonTest/LessonTest'
+import Calendar from './Screens/Calendar/Calendar'
 import CourseCollection from './Screens/Courses/CourseCollection/CourseCollection'
 import EditCollection from './Screens/Courses/EditCollection/EditCollection'
 import AdminCoursePage from './Screens/CourseManager/AdminCoursePage/AdminCoursePage'
@@ -158,6 +159,9 @@ function App () {
         <Route path='/userInfo'>
           <UserInfo />
         </Route>
+        <Route path="/calendar">
+          <Calendar />
+        </Route>
       </Switch>
     </Router>
   )

src/Components/Calendar/CalendarBlock.jsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react'
+import moment from 'moment'
+import buildCalendar from '../../Screens/Calendar/build'
+import Header from './header'
+import dayStyles, { beforeToday, isToday, isSelected } from '../../Screens/Calendar/calendar-day'
+import './calendar-block.css'
+
+const days = {'sidebar': ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        'content': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
+
+const SideCalendar = ({position = 'content'}) => {
+  const [calendar, setCalendar] = useState([])
+  const [value, setValue] = useState(moment())
+  const [eventtrue, setEventTrue] = useState(false)
+
+  useEffect(() => {
+    setCalendar(buildCalendar(value))
+  }, [value])
+
+  const handleEventChange = () => {
+    setEventTrue(true)
+  }
+
+  return (
+    <div class="sidebar">
+      <div className='calendar'>
+        <Header value={value} setValue={setValue} />
+
+        <div className='body'>
+          <div className='day-names'>
+            {days[position].map((d) => (
+              <div className='week'>{d}</div>
+            ))}
+          </div>
+          {calendar.map((week) => (
+            <div>
+              {week.map((day) => (
+                <div
+                  className='day'
+                  onClick={() => setValue(day)}
+                >
+                  <div className={dayStyles(day, value) + ''} onClick={() => handleEventChange()}>
+                    {day.format('D').toString()}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+
+      </div>
+
+    </div>
+  )
+}
+
+const CalendarBlock = ({position = 'content'}) => {
+  const [value, setValue] = useState(moment())
+  const [eventtrue, setEventTrue] = useState(false)
+  const [calendar, setCalendar] = useState([])
+  useEffect(() => {
+    setCalendar(buildCalendar(value))
+  }, [value])
+  const handleEventChange = () => {
+    setEventTrue(true)
+  }
+  return (
+    <div className='calendar'>
+      <Header value={value} setValue={setValue} />        
+      <div className='body'>
+        <div className='day-names'>
+          {days[position].map((d) => (
+            <div className='week'>{d}</div>
+          ))}
+        </div>
+        {calendar.map((week) => (
+          <div>
+            {week.map((day) => (
+              <div className='day' onClick={() => !beforeToday(day) && setValue(day)} >
+                <div className={dayStyles(day, value)} onClick={() => handleEventChange()}>
+                  {position == 'sidebar' ? day.format('D').toString() : day.format('MMM D').toString()}
+                  {
+                    <div>
+                      {/** events  comes here but we need to work events according to dates */}
+                    </div>}
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+      { position == 'sidebar' && <button className='button-sidebar'>View Calendar</button> }
+    </div>
+  )
+}
+
+export default CalendarBlock

src/Components/Calendar/SideCalendarHeader.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='calendar-header-container-side'>
+        <div className='calendar-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>
+  )
+}