diff --git a/README.md b/README.md
index 3675074..0d2a239 100644
--- 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.
-
+Demo here
## 🚀 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
index ff63860..b1bb19c 100644
--- 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
index db18458..aa5ac1a 100644
--- 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
index 5bec18f..bf70b0b 100644
--- 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) => (
- onCellDragEnter(e, day.id, row.id)}
- onClick={(event) => handleCellClick(event, row, day)}
- >
- {!legacyStyle &&
- index === 0 && columns[indexD]?.headerName?.toUpperCase()}.
- {
+ const currentDay = (
+ day.day === (getDay(today) + 1) &&
+ isSameMonth(day.date, today)
+ )
+ return (
+ onCellDragEnter(e, day.id, row.id)}
+ onClick={(event) => handleCellClick(event, row, day)}
>
- {day.day}
-
- {(day?.data?.length > 0 && renderTask(day?.data, row.id))}
- {legacyStyle && day?.data?.length === 0 &&
- }
-
- ))}
+
+ {!legacyStyle &&
+ index === 0 && columns[indexD]?.headerName?.toUpperCase()}.
+
+ {day.day}
+
+ {(day?.data?.length > 0 && renderTask(day?.data, row.id))}
+ {legacyStyle && day?.data?.length === 0 &&
+ }
+
+
+ )
+ })}
))}
diff --git a/src/Scheduler.jsx b/src/Scheduler.jsx
index f4a891e..c106a40 100644
--- 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 (