Improve month date state transition

rouftom · May 3, 2022 · 34f71a0 · 34f71a0
1 parent 42589b0
commit 34f71a0
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 38 deletions.
diff --git a/dist/index.esm.js b/dist/index.esm.js
@@ -8,7 +8,7 @@ import i18n from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
 import { styled, useTheme, alpha } from '@mui/material/styles';
 import { Autocomplete, Box, TextField, Toolbar, Grid, Typography, Hidden, IconButton, Button, Menu, Stack, ToggleButtonGroup, ToggleButton, MenuItem, ListItemIcon, Divider, Collapse, Alert, Paper, TableCell, tableCellClasses, TableRow, TableContainer, Table, TableHead, TableBody, Tooltip, Zoom, Fade, Slide } from '@mui/material';
-import { format, parse, getDaysInMonth, sub, add, isSameMonth, differenceInMinutes, isValid, getWeeksInMonth, startOfMonth, getDay, isSameDay, startOfWeek, startOfDay } from 'date-fns';
+import { format, parse, getDaysInMonth, sub, add, getDay, isSameMonth, differenceInMinutes, isValid, getWeeksInMonth, startOfMonth, isSameDay, startOfWeek, startOfDay } from 'date-fns';
 import _extends from '@babel/runtime/helpers/extends';
 import AdapterDateFns from '@mui/lab/AdapterDateFns';
 import LocalizationProvider from '@mui/lab/LocalizationProvider';
@@ -825,7 +825,7 @@ 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,
@@ -888,13 +888,14 @@ function MonthModeView(props) {
 
   var today = new Date();
   var currentDaySx = {
+    width: 24,
+    height: 22,
+    margin: 'auto',
     display: 'block',
-    background: alpha(theme.palette.primary.main, 1),
-    borderRadius: '50%',
-    padding: '1px 3px',
-    color: '#fff',
-    width: 'fit-content',
-    margin: 'auto'
+    paddingTop: '2px',
+    borderRadius: '50%' //padding: '1px 7px',
+    //width: 'fit-content'
+
   };
 
   var onCellDragOver = function onCellDragOver(e) {
@@ -1086,12 +1087,13 @@ function MonthModeView(props) {
     }, row === null || row === void 0 ? void 0 : (_row$days = row.days) === null || _row$days === void 0 ? void 0 : _row$days.map(function (day, indexD) {
       var _columns$indexD, _columns$indexD$heade, _day$data2, _day$data3;
 
+      var currentDay = day.day === getDay(today) + 1 && isSameMonth(day.date, today);
       return /*#__PURE__*/React.createElement(StyledTableCell$2, {
         scope: "row",
         align: "center",
         component: "th",
         sx: {
-          px: 1,
+          px: 0.5,
           position: 'relative'
         },
         key: "day-".concat(day.id),
@@ -1103,13 +1105,21 @@ function MonthModeView(props) {
         onClick: function onClick(event) {
           return handleCellClick(event, row, day);
         }
+      }, /*#__PURE__*/React.createElement(Box, {
+        sx: {
+          height: '100%',
+          overflowY: 'visible'
+        }
       }, !legacyStyle && index === 0 && ((_columns$indexD = columns[indexD]) === null || _columns$indexD === void 0 ? void 0 : (_columns$indexD$heade = _columns$indexD.headerName) === null || _columns$indexD$heade === void 0 ? void 0 : _columns$indexD$heade.toUpperCase()), ".", /*#__PURE__*/React.createElement(Typography, {
         variant: "body2",
-        sx: day.day === getDaysInMonth(today) && isSameMonth(day.date, today) && currentDaySx || {}
+        sx: _objectSpread$3(_objectSpread$3({}, currentDaySx), {}, {
+          background: currentDay && alpha(theme.palette.primary.main, 1),
+          color: currentDay && '#fff'
+        })
       }, day.day), (day === null || day === void 0 ? void 0 : (_day$data2 = day.data) === null || _day$data2 === void 0 ? void 0 : _day$data2.length) > 0 && renderTask(day === null || day === void 0 ? void 0 : day.data, row.id), legacyStyle && (day === null || day === void 0 ? void 0 : (_day$data3 = day.data) === null || _day$data3 === void 0 ? void 0 : _day$data3.length) === 0 && /*#__PURE__*/React.createElement(EventNoteRoundedIcon, {
         fontSize: "small",
         htmlColor: theme.palette.divider
-      }));
+      })));
     }));
   }))));
 }
@@ -1998,7 +2008,9 @@ function Scheduler(props) {
       setSelectedDate = _useState16[1];
 
   var _useReducer = useReducer(function (state) {
-    if ((startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN') {
+    var _options$startWeekOn;
+
+    if ((options === null || options === void 0 ? void 0 : (_options$startWeekOn = options.startWeekOn) === null || _options$startWeekOn === void 0 ? void 0 : _options$startWeekOn.toUpperCase()) === 'SUN') {
       return [t('sun'), t('mon'), t('tue'), t('wed'), t('thu'), t('fri'), t('sat')];
     }
 
@@ -2084,8 +2096,7 @@ function Scheduler(props) {
 
     var rows = [],
         daysBefore = [];
-    var iteration = getWeeksInMonth(selectedDay); //Math.ceil(daysInMonth / 7)
-
+    var iteration = getWeeksInMonth(selectedDay);
     var startOnSunday = (startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN' && t('sun').toUpperCase() === weekDays[0].toUpperCase();
     var monthStartDate = startOfMonth(selectedDay); // First day of month
 
@@ -2121,10 +2132,10 @@ function Scheduler(props) {
       for (var i = 1; checkCondition(i); i++) {
         _loop(i);
       }
-    } else if (startOnSunday) {
+    } else if (!startOnSunday) {
       var _loop2 = function _loop2(_i) {
         var subDate = sub(monthStartDate, {
-          days: _i + 1
+          days: _i
         });
         var day = parseInt(format(subDate, 'dd'));
         var data = events.filter(function (event) {
@@ -2233,7 +2244,7 @@ function Scheduler(props) {
   var getWeekHeader = function getWeekHeader() {
     var data = [];
     var weekStart = startOfWeek(selectedDay, {
-      weekStartsOn: 1
+      weekStartsOn: startWeekOn === 'mon' ? 1 : 0
     });
 
     for (var i = 0; i < 7; i++) {
@@ -2504,6 +2515,8 @@ function Scheduler(props) {
     if ((options === null || options === void 0 ? void 0 : options.startWeekOn) !== startWeekOn) {
       setStartWeekOn(options === null || options === void 0 ? void 0 : options.startWeekOn);
     }
+
+    updateWeekDays();
   }, [options === null || options === void 0 ? void 0 : options.startWeekOn]);
   return /*#__PURE__*/React.createElement(Paper, {
     variant: "outlined",

diff --git a/dist/index.umd.js b/dist/index.umd.js
@@ -827,7 +827,7 @@
     sx: PropTypes__default["default"].object,
     boxSx: PropTypes__default["default"].object,
     event: PropTypes__default["default"].object.isRequired,
-    rowId: PropTypes__default["default"].number,
+    rowId: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
     isMonthMode: PropTypes__default["default"].bool,
     onClick: PropTypes__default["default"].func,
     handleTaskClick: PropTypes__default["default"].func,
@@ -890,13 +890,14 @@
 
     var today = new Date();
     var currentDaySx = {
+      width: 24,
+      height: 22,
+      margin: 'auto',
       display: 'block',
-      background: styles.alpha(theme.palette.primary.main, 1),
-      borderRadius: '50%',
-      padding: '1px 3px',
-      color: '#fff',
-      width: 'fit-content',
-      margin: 'auto'
+      paddingTop: '2px',
+      borderRadius: '50%' //padding: '1px 7px',
+      //width: 'fit-content'
+
     };
 
     var onCellDragOver = function onCellDragOver(e) {
@@ -1088,12 +1089,13 @@
       }, row === null || row === void 0 ? void 0 : (_row$days = row.days) === null || _row$days === void 0 ? void 0 : _row$days.map(function (day, indexD) {
         var _columns$indexD, _columns$indexD$heade, _day$data2, _day$data3;
 
+        var currentDay = day.day === dateFns.getDay(today) + 1 && dateFns.isSameMonth(day.date, today);
         return /*#__PURE__*/React__default["default"].createElement(StyledTableCell$2, {
           scope: "row",
           align: "center",
           component: "th",
           sx: {
-            px: 1,
+            px: 0.5,
             position: 'relative'
           },
           key: "day-".concat(day.id),
@@ -1105,13 +1107,21 @@
           onClick: function onClick(event) {
             return handleCellClick(event, row, day);
           }
+        }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          sx: {
+            height: '100%',
+            overflowY: 'visible'
+          }
         }, !legacyStyle && index === 0 && ((_columns$indexD = columns[indexD]) === null || _columns$indexD === void 0 ? void 0 : (_columns$indexD$heade = _columns$indexD.headerName) === null || _columns$indexD$heade === void 0 ? void 0 : _columns$indexD$heade.toUpperCase()), ".", /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "body2",
-          sx: day.day === dateFns.getDaysInMonth(today) && dateFns.isSameMonth(day.date, today) && currentDaySx || {}
+          sx: _objectSpread$3(_objectSpread$3({}, currentDaySx), {}, {
+            background: currentDay && styles.alpha(theme.palette.primary.main, 1),
+            color: currentDay && '#fff'
+          })
         }, day.day), (day === null || day === void 0 ? void 0 : (_day$data2 = day.data) === null || _day$data2 === void 0 ? void 0 : _day$data2.length) > 0 && renderTask(day === null || day === void 0 ? void 0 : day.data, row.id), legacyStyle && (day === null || day === void 0 ? void 0 : (_day$data3 = day.data) === null || _day$data3 === void 0 ? void 0 : _day$data3.length) === 0 && /*#__PURE__*/React__default["default"].createElement(EventNoteRoundedIcon__default["default"], {
           fontSize: "small",
           htmlColor: theme.palette.divider
-        }));
+        })));
       }));
     }))));
   }
@@ -2000,7 +2010,9 @@
         setSelectedDate = _useState16[1];
 
     var _useReducer = React.useReducer(function (state) {
-      if ((startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN') {
+      var _options$startWeekOn;
+
+      if ((options === null || options === void 0 ? void 0 : (_options$startWeekOn = options.startWeekOn) === null || _options$startWeekOn === void 0 ? void 0 : _options$startWeekOn.toUpperCase()) === 'SUN') {
         return [t('sun'), t('mon'), t('tue'), t('wed'), t('thu'), t('fri'), t('sat')];
       }
 
@@ -2086,8 +2098,7 @@
 
       var rows = [],
           daysBefore = [];
-      var iteration = dateFns.getWeeksInMonth(selectedDay); //Math.ceil(daysInMonth / 7)
-
+      var iteration = dateFns.getWeeksInMonth(selectedDay);
       var startOnSunday = (startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN' && t('sun').toUpperCase() === weekDays[0].toUpperCase();
       var monthStartDate = dateFns.startOfMonth(selectedDay); // First day of month
 
@@ -2123,10 +2134,10 @@
         for (var i = 1; checkCondition(i); i++) {
           _loop(i);
         }
-      } else if (startOnSunday) {
+      } else if (!startOnSunday) {
         var _loop2 = function _loop2(_i) {
           var subDate = dateFns.sub(monthStartDate, {
-            days: _i + 1
+            days: _i
           });
           var day = parseInt(dateFns.format(subDate, 'dd'));
           var data = events.filter(function (event) {
@@ -2235,7 +2246,7 @@
     var getWeekHeader = function getWeekHeader() {
       var data = [];
       var weekStart = dateFns.startOfWeek(selectedDay, {
-        weekStartsOn: 1
+        weekStartsOn: startWeekOn === 'mon' ? 1 : 0
       });
 
       for (var i = 0; i < 7; i++) {
@@ -2506,6 +2517,8 @@
       if ((options === null || options === void 0 ? void 0 : options.startWeekOn) !== startWeekOn) {
         setStartWeekOn(options === null || options === void 0 ? void 0 : options.startWeekOn);
       }
+
+      updateWeekDays();
     }, [options === null || options === void 0 ? void 0 : options.startWeekOn]);
     return /*#__PURE__*/React__default["default"].createElement(material.Paper, {
       variant: "outlined",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-mui-scheduler",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "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/Scheduler.jsx b/src/Scheduler.jsx
@@ -159,7 +159,7 @@ function Scheduler(props) {
       }
     } else if (!startOnSunday) {
       for (let i = 6; i > 0; i--) {
-        let subDate = sub(monthStartDate, {days: i+1})
+        let subDate = sub(monthStartDate, {days: i})
         let day = parseInt(format(subDate, 'dd'))
         let data = events.filter((event) => (
           isSameDay(subDate, parse(event?.date, 'yyyy-MM-dd', new Date()))
@@ -264,9 +264,21 @@ function Scheduler(props) {
       let date = add(weekStart, {days: i})
       data.push({
         date: date,
-        weekDay: format(date, 'iii', { locale: dateFnsLocale }),
-        day: format(date, 'dd', { locale: dateFnsLocale }),
-        month: format(date, 'MM', { locale: dateFnsLocale }),
+        weekDay: format(
+          date,
+          'iii',
+          { locale: dateFnsLocale }
+        ),
+        day: format(
+          date,
+          'dd',
+          { locale: dateFnsLocale }
+        ),
+        month: format(
+          date,
+          'MM',
+          { locale: dateFnsLocale }
+        ),
       })
     }
     return data