Skip to content

Commit 34f71a0

Browse files
rouftomrouftom
committed
Improve month date state transition
1 parent 42589b0 commit 34f71a0

File tree

4 files changed

+76
-38
lines changed

4 files changed

+76
-38
lines changed

‎dist/index.esm.js‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import i18n from 'i18next';
88
import { initReactI18next, useTranslation } from 'react-i18next';
99
import { styled, useTheme, alpha } from '@mui/material/styles';
1010
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';
11-
import { format, parse, getDaysInMonth, sub, add, isSameMonth, differenceInMinutes, isValid, getWeeksInMonth, startOfMonth, getDay, isSameDay, startOfWeek, startOfDay } from 'date-fns';
11+
import { format, parse, getDaysInMonth, sub, add, getDay, isSameMonth, differenceInMinutes, isValid, getWeeksInMonth, startOfMonth, isSameDay, startOfWeek, startOfDay } from 'date-fns';
1212
import _extends from '@babel/runtime/helpers/extends';
1313
import AdapterDateFns from '@mui/lab/AdapterDateFns';
1414
import LocalizationProvider from '@mui/lab/LocalizationProvider';
@@ -825,7 +825,7 @@ EventItem.propTypes = {
825825
sx: PropTypes.object,
826826
boxSx: PropTypes.object,
827827
event: PropTypes.object.isRequired,
828-
rowId: PropTypes.number,
828+
rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
829829
isMonthMode: PropTypes.bool,
830830
onClick: PropTypes.func,
831831
handleTaskClick: PropTypes.func,
@@ -888,13 +888,14 @@ function MonthModeView(props) {
888888

889889
var today = new Date();
890890
var currentDaySx = {
891+
width: 24,
892+
height: 22,
893+
margin: 'auto',
891894
display: 'block',
892-
background: alpha(theme.palette.primary.main, 1),
893-
borderRadius: '50%',
894-
padding: '1px 3px',
895-
color: '#fff',
896-
width: 'fit-content',
897-
margin: 'auto'
895+
paddingTop: '2px',
896+
borderRadius: '50%' //padding: '1px 7px',
897+
//width: 'fit-content'
898+
898899
};
899900

900901
var onCellDragOver = function onCellDragOver(e) {
@@ -1086,12 +1087,13 @@ function MonthModeView(props) {
10861087
}, row === null || row === void 0 ? void 0 : (_row$days = row.days) === null || _row$days === void 0 ? void 0 : _row$days.map(function (day, indexD) {
10871088
var _columns$indexD, _columns$indexD$heade, _day$data2, _day$data3;
10881089

1090+
var currentDay = day.day === getDay(today) + 1 && isSameMonth(day.date, today);
10891091
return /*#__PURE__*/React.createElement(StyledTableCell$2, {
10901092
scope: "row",
10911093
align: "center",
10921094
component: "th",
10931095
sx: {
1094-
px: 1,
1096+
px: 0.5,
10951097
position: 'relative'
10961098
},
10971099
key: "day-".concat(day.id),
@@ -1103,13 +1105,21 @@ function MonthModeView(props) {
11031105
onClick: function onClick(event) {
11041106
return handleCellClick(event, row, day);
11051107
}
1108+
}, /*#__PURE__*/React.createElement(Box, {
1109+
sx: {
1110+
height: '100%',
1111+
overflowY: 'visible'
1112+
}
11061113
}, !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, {
11071114
variant: "body2",
1108-
sx: day.day === getDaysInMonth(today) && isSameMonth(day.date, today) && currentDaySx || {}
1115+
sx: _objectSpread$3(_objectSpread$3({}, currentDaySx), {}, {
1116+
background: currentDay && alpha(theme.palette.primary.main, 1),
1117+
color: currentDay && '#fff'
1118+
})
11091119
}, 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, {
11101120
fontSize: "small",
11111121
htmlColor: theme.palette.divider
1112-
}));
1122+
})));
11131123
}));
11141124
}))));
11151125
}
@@ -1998,7 +2008,9 @@ function Scheduler(props) {
19982008
setSelectedDate = _useState16[1];
19992009

20002010
var _useReducer = useReducer(function (state) {
2001-
if ((startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN') {
2011+
var _options$startWeekOn;
2012+
2013+
if ((options === null || options === void 0 ? void 0 : (_options$startWeekOn = options.startWeekOn) === null || _options$startWeekOn === void 0 ? void 0 : _options$startWeekOn.toUpperCase()) === 'SUN') {
20022014
return [t('sun'), t('mon'), t('tue'), t('wed'), t('thu'), t('fri'), t('sat')];
20032015
}
20042016

@@ -2084,8 +2096,7 @@ function Scheduler(props) {
20842096

20852097
var rows = [],
20862098
daysBefore = [];
2087-
var iteration = getWeeksInMonth(selectedDay); //Math.ceil(daysInMonth / 7)
2088-
2099+
var iteration = getWeeksInMonth(selectedDay);
20892100
var startOnSunday = (startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN' && t('sun').toUpperCase() === weekDays[0].toUpperCase();
20902101
var monthStartDate = startOfMonth(selectedDay); // First day of month
20912102

@@ -2121,10 +2132,10 @@ function Scheduler(props) {
21212132
for (var i = 1; checkCondition(i); i++) {
21222133
_loop(i);
21232134
}
2124-
} else if (startOnSunday) {
2135+
} else if (!startOnSunday) {
21252136
var _loop2 = function _loop2(_i) {
21262137
var subDate = sub(monthStartDate, {
2127-
days: _i + 1
2138+
days: _i
21282139
});
21292140
var day = parseInt(format(subDate, 'dd'));
21302141
var data = events.filter(function (event) {
@@ -2233,7 +2244,7 @@ function Scheduler(props) {
22332244
var getWeekHeader = function getWeekHeader() {
22342245
var data = [];
22352246
var weekStart = startOfWeek(selectedDay, {
2236-
weekStartsOn: 1
2247+
weekStartsOn: startWeekOn === 'mon' ? 1 : 0
22372248
});
22382249

22392250
for (var i = 0; i < 7; i++) {
@@ -2504,6 +2515,8 @@ function Scheduler(props) {
25042515
if ((options === null || options === void 0 ? void 0 : options.startWeekOn) !== startWeekOn) {
25052516
setStartWeekOn(options === null || options === void 0 ? void 0 : options.startWeekOn);
25062517
}
2518+
2519+
updateWeekDays();
25072520
}, [options === null || options === void 0 ? void 0 : options.startWeekOn]);
25082521
return /*#__PURE__*/React.createElement(Paper, {
25092522
variant: "outlined",

‎dist/index.umd.js‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -827,7 +827,7 @@
827827
sx: PropTypes__default["default"].object,
828828
boxSx: PropTypes__default["default"].object,
829829
event: PropTypes__default["default"].object.isRequired,
830-
rowId: PropTypes__default["default"].number,
830+
rowId: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
831831
isMonthMode: PropTypes__default["default"].bool,
832832
onClick: PropTypes__default["default"].func,
833833
handleTaskClick: PropTypes__default["default"].func,
@@ -890,13 +890,14 @@
890890

891891
var today = new Date();
892892
var currentDaySx = {
893+
width: 24,
894+
height: 22,
895+
margin: 'auto',
893896
display: 'block',
894-
background: styles.alpha(theme.palette.primary.main, 1),
895-
borderRadius: '50%',
896-
padding: '1px 3px',
897-
color: '#fff',
898-
width: 'fit-content',
899-
margin: 'auto'
897+
paddingTop: '2px',
898+
borderRadius: '50%' //padding: '1px 7px',
899+
//width: 'fit-content'
900+
900901
};
901902

902903
var onCellDragOver = function onCellDragOver(e) {
@@ -1088,12 +1089,13 @@
10881089
}, row === null || row === void 0 ? void 0 : (_row$days = row.days) === null || _row$days === void 0 ? void 0 : _row$days.map(function (day, indexD) {
10891090
var _columns$indexD, _columns$indexD$heade, _day$data2, _day$data3;
10901091

1092+
var currentDay = day.day === dateFns.getDay(today) + 1 && dateFns.isSameMonth(day.date, today);
10911093
return /*#__PURE__*/React__default["default"].createElement(StyledTableCell$2, {
10921094
scope: "row",
10931095
align: "center",
10941096
component: "th",
10951097
sx: {
1096-
px: 1,
1098+
px: 0.5,
10971099
position: 'relative'
10981100
},
10991101
key: "day-".concat(day.id),
@@ -1105,13 +1107,21 @@
11051107
onClick: function onClick(event) {
11061108
return handleCellClick(event, row, day);
11071109
}
1110+
}, /*#__PURE__*/React__default["default"].createElement(material.Box, {
1111+
sx: {
1112+
height: '100%',
1113+
overflowY: 'visible'
1114+
}
11081115
}, !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, {
11091116
variant: "body2",
1110-
sx: day.day === dateFns.getDaysInMonth(today) && dateFns.isSameMonth(day.date, today) && currentDaySx || {}
1117+
sx: _objectSpread$3(_objectSpread$3({}, currentDaySx), {}, {
1118+
background: currentDay && styles.alpha(theme.palette.primary.main, 1),
1119+
color: currentDay && '#fff'
1120+
})
11111121
}, 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"], {
11121122
fontSize: "small",
11131123
htmlColor: theme.palette.divider
1114-
}));
1124+
})));
11151125
}));
11161126
}))));
11171127
}
@@ -2000,7 +2010,9 @@
20002010
setSelectedDate = _useState16[1];
20012011

20022012
var _useReducer = React.useReducer(function (state) {
2003-
if ((startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN') {
2013+
var _options$startWeekOn;
2014+
2015+
if ((options === null || options === void 0 ? void 0 : (_options$startWeekOn = options.startWeekOn) === null || _options$startWeekOn === void 0 ? void 0 : _options$startWeekOn.toUpperCase()) === 'SUN') {
20042016
return [t('sun'), t('mon'), t('tue'), t('wed'), t('thu'), t('fri'), t('sat')];
20052017
}
20062018

@@ -2086,8 +2098,7 @@
20862098

20872099
var rows = [],
20882100
daysBefore = [];
2089-
var iteration = dateFns.getWeeksInMonth(selectedDay); //Math.ceil(daysInMonth / 7)
2090-
2101+
var iteration = dateFns.getWeeksInMonth(selectedDay);
20912102
var startOnSunday = (startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN' && t('sun').toUpperCase() === weekDays[0].toUpperCase();
20922103
var monthStartDate = dateFns.startOfMonth(selectedDay); // First day of month
20932104

@@ -2123,10 +2134,10 @@
21232134
for (var i = 1; checkCondition(i); i++) {
21242135
_loop(i);
21252136
}
2126-
} else if (startOnSunday) {
2137+
} else if (!startOnSunday) {
21272138
var _loop2 = function _loop2(_i) {
21282139
var subDate = dateFns.sub(monthStartDate, {
2129-
days: _i + 1
2140+
days: _i
21302141
});
21312142
var day = parseInt(dateFns.format(subDate, 'dd'));
21322143
var data = events.filter(function (event) {
@@ -2235,7 +2246,7 @@
22352246
var getWeekHeader = function getWeekHeader() {
22362247
var data = [];
22372248
var weekStart = dateFns.startOfWeek(selectedDay, {
2238-
weekStartsOn: 1
2249+
weekStartsOn: startWeekOn === 'mon' ? 1 : 0
22392250
});
22402251

22412252
for (var i = 0; i < 7; i++) {
@@ -2506,6 +2517,8 @@
25062517
if ((options === null || options === void 0 ? void 0 : options.startWeekOn) !== startWeekOn) {
25072518
setStartWeekOn(options === null || options === void 0 ? void 0 : options.startWeekOn);
25082519
}
2520+
2521+
updateWeekDays();
25092522
}, [options === null || options === void 0 ? void 0 : options.startWeekOn]);
25102523
return /*#__PURE__*/React__default["default"].createElement(material.Paper, {
25112524
variant: "outlined",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-mui-scheduler",
3-
"version": "2.0.2",
3+
"version": "2.0.3",
44
"description": "📅 React mui scheduler is a react component based on @mui v5 that allows you to manage data in a calendar",
55
"main": "dist/index.esm.js",
66
"scripts": {

‎src/Scheduler.jsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ function Scheduler(props) {
159159
}
160160
} else if (!startOnSunday) {
161161
for (let i = 6; i > 0; i--) {
162-
let subDate = sub(monthStartDate, {days: i+1})
162+
let subDate = sub(monthStartDate, {days: i})
163163
let day = parseInt(format(subDate, 'dd'))
164164
let data = events.filter((event) => (
165165
isSameDay(subDate, parse(event?.date, 'yyyy-MM-dd', new Date()))
@@ -264,9 +264,21 @@ function Scheduler(props) {
264264
let date = add(weekStart, {days: i})
265265
data.push({
266266
date: date,
267-
weekDay: format(date, 'iii', { locale: dateFnsLocale }),
268-
day: format(date, 'dd', { locale: dateFnsLocale }),
269-
month: format(date, 'MM', { locale: dateFnsLocale }),
267+
weekDay: format(
268+
date,
269+
'iii',
270+
{ locale: dateFnsLocale }
271+
),
272+
day: format(
273+
date,
274+
'dd',
275+
{ locale: dateFnsLocale }
276+
),
277+
month: format(
278+
date,
279+
'MM',
280+
{ locale: dateFnsLocale }
281+
),
270282
})
271283
}
272284
return data

0 commit comments

Comments
 (0)