Improve month view component

rouftom · May 3, 2022 · 42589b0 · 42589b0
1 parent 661a910
commit 42589b0
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@
 ---
 
 React mui scheduler is a react component based on @mui v5 that allows you to manage data in a calendar.
-
+<p><a href="https://codesandbox.io/s/relaxed-neumann-174pod?file=/src/App.js" target="_blank">Demo here</a></p>
 
 ## 🚀 Installation
 ```nodejs
@@ -32,7 +32,7 @@ function App() {
   const [state] = useState({
     options: {
       transitionMode: "zoom", // or fade
-      startWeekOn: "Mon",     // or Sun
+      startWeekOn: "mon",     // or sun
       defaultMode: "month",    // or week | day | timeline
       minWidth: 540,
       maxWidth: 540,
@@ -64,7 +64,7 @@ function App() {
       color: "#f28f6a",
       startHour: "04:00 AM",
       endHour: "05:00 AM",
-      date: "2021-09-28",
+      date: "2022-05-05",
       createdAt: new Date(),
       createdBy: "Kristina Mayer"
     },
@@ -76,7 +76,7 @@ function App() {
       color: "#099ce5",
       startHour: "09:00 AM",
       endHour: "10:00 AM",
-      date: "2021-09-29",
+      date: "2022-05-09",
       createdAt: new Date(),
       createdBy: "Kristina Mayer"
     },
@@ -88,7 +88,7 @@ function App() {
       color: "#263686",
       startHour: "13 PM",
       endHour: "14 PM",
-      date: "2021-09-30",
+      date: "2022-05-10",
       createdAt: new Date(),
       createdBy: "Kristina Mayer"
     },
@@ -100,7 +100,7 @@ function App() {
       color: "#f28f6a",
       startHour: "08:00 AM",
       endHour: "09:00 AM",
-      date: "2021-10-01",
+      date: "2022-05-11",
       createdAt: new Date(),
       createdBy: "Kristina Mayer"
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-mui-scheduler",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "📅 React mui scheduler is a react component based on @mui v5 that allows you to manage data in a calendar",
   "main": "dist/index.esm.js",
   "scripts": {

diff --git a/src/EventItem.jsx b/src/EventItem.jsx
@@ -40,7 +40,10 @@ EventItem.propTypes = {
   sx: PropTypes.object,
   boxSx: PropTypes.object,
   event: PropTypes.object.isRequired,
-  rowId: PropTypes.number,
+  rowId: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
   isMonthMode: PropTypes.bool,
   onClick: PropTypes.func,
   handleTaskClick: PropTypes.func,

diff --git a/src/MonthModeView.jsx b/src/MonthModeView.jsx
@@ -1,10 +1,10 @@
 import React, {useState, useContext} from 'react'
 import PropTypes from 'prop-types'
-import { format } from 'date-fns'
+import {format, getDay} from 'date-fns'
 import {useTheme, styled, alpha} from '@mui/material/styles'
 import {
   Paper, Typography, Table, TableBody, TableCell, TableContainer,
-  TableHead, TableRow, tableCellClasses
+  TableHead, TableRow, tableCellClasses, Box
 } from "@mui/material"
 import { getDaysInMonth, isSameMonth } from 'date-fns'
 import EventNoteRoundedIcon from '@mui/icons-material/EventNoteRounded'
@@ -63,13 +63,14 @@ function MonthModeView (props) {
   const { t } = useTranslation(['common'])
   const today = new Date()
   let currentDaySx = {
+    width: 24,
+    height: 22,
+    margin: 'auto',
     display: 'block',
-    background: alpha(theme.palette.primary.main, 1),
+    paddingTop: '2px',
     borderRadius: '50%',
-    padding: '1px 3px',
-    color: '#fff',
-    width: 'fit-content',
-    margin: 'auto'
+    //padding: '1px 7px',
+    //width: 'fit-content'
   }
 
   const onCellDragOver = (e) => {
@@ -235,36 +236,49 @@ function MonthModeView (props) {
                   }
                 }}
               >
-                {row?.days?.map((day, indexD) => (
-                  <StyledTableCell
-                    scope="row"
-                    align="center"
-                    component="th"
-                    sx={{ px: 1, position: 'relative' }}
-                    key={`day-${day.id}`}
-                    onDragEnd={onCellDragEnd}
-                    onDragOver={onCellDragOver}
-                    onDragEnter={e => onCellDragEnter(e, day.id, row.id)}
-                    onClick={(event) => handleCellClick(event, row, day)}
-                  >
-                    {!legacyStyle &&
-                    index === 0 && columns[indexD]?.headerName?.toUpperCase()}.
-                    <Typography
-                      variant="body2"
-                      sx={day.day === getDaysInMonth(today) &&
-                      isSameMonth(day.date, today) &&
-                      currentDaySx || {}}
+                {row?.days?.map((day, indexD) => {
+                  const currentDay = (
+                    day.day === (getDay(today) + 1) &&
+                    isSameMonth(day.date, today)
+                  )
+                  return (
+                    <StyledTableCell
+                      scope="row"
+                      align="center"
+                      component="th"
+                      sx={{px: 0.5, position: 'relative'}}
+                      key={`day-${day.id}`}
+                      onDragEnd={onCellDragEnd}
+                      onDragOver={onCellDragOver}
+                      onDragEnter={e => onCellDragEnter(e, day.id, row.id)}
+                      onClick={(event) => handleCellClick(event, row, day)}
                     >
-                      {day.day}
-                    </Typography>
-                    {(day?.data?.length > 0 && renderTask(day?.data, row.id))}
-                    {legacyStyle && day?.data?.length === 0 &&
-                    <EventNoteRoundedIcon 
-                      fontSize="small" 
-                      htmlColor={theme.palette.divider} 
-                    />}
-                  </StyledTableCell>
-                ))}
+                      <Box sx={{height: '100%', overflowY: 'visible'}}>
+                        {!legacyStyle &&
+                        index === 0 && columns[indexD]?.headerName?.toUpperCase()}.
+                        <Typography
+                          variant="body2"
+                          sx={{
+                            ...currentDaySx,
+                            background: (
+                              currentDay &&
+                              alpha(theme.palette.primary.main, 1)
+                            ),
+                            color: (currentDay && '#fff')
+                          }}
+                        >
+                          {day.day}
+                        </Typography>
+                        {(day?.data?.length > 0 && renderTask(day?.data, row.id))}
+                        {legacyStyle && day?.data?.length === 0 &&
+                        <EventNoteRoundedIcon
+                          fontSize="small"
+                          htmlColor={theme.palette.divider}
+                        />}
+                      </Box>
+                    </StyledTableCell>
+                  )
+                })}
               </StyledTableRow>
             ))}
         </TableBody>

diff --git a/src/Scheduler.jsx b/src/Scheduler.jsx
@@ -63,7 +63,7 @@ function Scheduler(props) {
   const [startWeekOn, setStartWeekOn] = useState(options?.startWeekOn || 'mon')
   const [selectedDate, setSelectedDate] = useState(format(today, 'MMMM-yyyy'))
   const [weekDays, updateWeekDays]= useReducer((state) => {
-    if (startWeekOn?.toUpperCase() === 'SUN') {
+    if (options?.startWeekOn?.toUpperCase() === 'SUN') {
       return [
         t('sun'), t('mon'), t('tue'),
         t('wed'), t('thu'), t('fri'),
@@ -92,8 +92,6 @@ function Scheduler(props) {
   if (locale === 'ru') { dateFnsLocale = ru }
   if (locale === 'zh') { dateFnsLocale = zhCN }
 
-
-
   /**
    * @name getMonthHeader
    * @description
@@ -124,7 +122,7 @@ function Scheduler(props) {
    */
   const getMonthRows = () => {
     let rows = [], daysBefore = []
-    let iteration = getWeeksInMonth(selectedDay) //Math.ceil(daysInMonth / 7)
+    let iteration = getWeeksInMonth(selectedDay)
     let startOnSunday = (
       startWeekOn?.toUpperCase() === 'SUN' &&
       t('sun').toUpperCase() === weekDays[0].toUpperCase()
@@ -159,7 +157,7 @@ function Scheduler(props) {
           data: data
         })
       }
-    } else if (startOnSunday) {
+    } else if (!startOnSunday) {
       for (let i = 6; i > 0; i--) {
         let subDate = sub(monthStartDate, {days: i+1})
         let day = parseInt(format(subDate, 'dd'))
@@ -228,9 +226,8 @@ function Scheduler(props) {
     if (lastRowDaysdiff > 0) {
       let day = lastRow.days[lastRow?.days?.length-1]
       let addDate = day.date
-
       for (let i = dateDay; i < (dateDay + lastRowDaysdiff); i++) {
-        addDate = add(addDate, {days: 1})
+        addDate = add(addDate, { days: 1 })
         let d = format(addDate, 'dd')
         // eslint-disable-next-line
         let data = events.filter((event) => (
@@ -259,7 +256,10 @@ function Scheduler(props) {
    */
   const getWeekHeader = () => {
     let data = []
-    let weekStart = startOfWeek(selectedDay, { weekStartsOn: 1 })
+    let weekStart = startOfWeek(
+      selectedDay,
+      { weekStartsOn: startWeekOn === 'mon' ? 1 : 0 }
+      )
     for (let i = 0; i < 7; i++) {
       let date = add(weekStart, {days: i})
       data.push({
@@ -479,6 +479,7 @@ function Scheduler(props) {
     if (options?.startWeekOn !== startWeekOn) {
       setStartWeekOn(options?.startWeekOn)
     }
+    updateWeekDays()
   }, [options?.startWeekOn])
 
   return (