🚀 release v1.1.0

Author: rouftom

README.md

@@ -1,7 +1,4 @@
 
-
-
-
 <h1 align="center">📅 React Material Scheduler</h1>
 <p align="center">developed with <a target="_blank" href="https://mui.com">@mui</a> </p>
 
@@ -17,80 +14,124 @@
 
 React mui scheduler is a react component based on @mui v5 that allows you to manage data in a calendar.
 
-## 🗣️ Installation
+## 🚀 Installation
 ```nodejs
   npm install react-mui-scheduler
 ```
 
 ## 💻 Usage
 ```javascript
- import React from 'react'
- import ReactDOM from 'react-dom'
- import Scheduler from "react-mui-scheduler"
- 
-  function App() {
-    const events = [
-      {
-        id: "event-1",
-        label: "Consultation médicale",
-        title: "Dr Shaun Murphy",
-        color: "#f28f6a",
-        startHour: "9 AM",
-        endHour: "10 AM",
-        date: "2021-09-09",
-        createdAt: new Date(),
-        createdBy: "Kristina Mayer"
-      },
-      {
-        id: "event-2",
-        label: "Consultation médicale",
-        title: "Dr Claire Brown",
-        color: "#099ce5",
-        startHour: "9 AM",
-        endHour: "10 AM",
-        date: "2021-09-09",
-        createdAt: new Date(),
-        createdBy: "Kristina Mayer"
-      },
-      {
-        id: "event-3",
-        label: "Consultation médicale",
-        title: "Dr Menlendez Hary",
-        color: "#263686",
-        startHour: "13 AM",
-        endHour: "14 AM",
-        date: "2021-09-12",
-        createdAt: new Date(),
-        createdBy: "Kristina Mayer"
-      },
-    ]
-    
-    const onCellClick = (event, row, day) => {
-      // Do something...
-    }
-    
-    const onEventClick = (event, task) => {
-      // Do something...
+import React, {useState} from 'react'
+import ReactDOM from 'react-dom'
+import Scheduler from "react-mui-scheduler"
+
+function App() {
+  const [state, setState] = useState({
+    options: {
+      transitionMode: "zoom",
+      startWeekOn: "Mon",
+      defaultMode: "week"
+    },
+    alertProps: {
+      open: true,
+      color: "info",
+      severity: "info",
+      message: "🚀 Let's start with awesome react-mui-scheduler 🔥 🔥 🔥" ,
+      showActionButton: true,
+    },
+    toolbarProps: {
+      showSearchBar: true,
+      showSwitchModeButtons: true,
+      showDatePicker: true
     }
-    
-    const onEventsChange = (item) => {
-      // Do something...
+  })
+  
+  const events = [
+    {
+      id: "event-1",
+      label: "Consultation médicale",
+      groupLabel: "Dr Shaun Murphy",
+      user: "Dr Shaun Murphy",
+      color: "#f28f6a",
+      startHour: "04:00 AM",
+      endHour: "05:00 AM",
+      date: "2021-09-28",
+      createdAt: new Date(),
+      createdBy: "Kristina Mayer"
+    },
+    {
+      id: "event-2",
+      label: "Consultation médicale",
+      groupLabel: "Dr Claire Brown",
+      user: "Dr Claire Brown",
+      color: "#099ce5",
+      startHour: "09:00 AM",
+      endHour: "10:00 AM",
+      date: "2021-09-29",
+      createdAt: new Date(),
+      createdBy: "Kristina Mayer"
+    },
+    {
+      id: "event-3",
+      label: "Consultation médicale",
+      groupLabel: "Dr Menlendez Hary",
+      user: "Dr Menlendez Hary",
+      color: "#263686",
+      startHour: "13 AM",
+      endHour: "14 AM",
+      date: "2021-09-30",
+      createdAt: new Date(),
+      createdBy: "Kristina Mayer"
+    },
+    {
+      id: "event-4",
+      label: "Consultation prénatale",
+      groupLabel: "Dr Shaun Murphy",
+      user: "Dr Shaun Murphy",
+      color: "#f28f6a",
+      startHour: "08:00 AM",
+      endHour: "09:00 AM",
+      date: "2021-10-01",
+      createdAt: new Date(),
+      createdBy: "Kristina Mayer"
     }
+  ]
 
-    return (
-      <Scheduler
-        events={events}
-        openAlert={false}
-        alertMessage={'This is a scheduler alert'}
-        alertProps={{color: 'info', severity: 'success'}}
-        onEventsChange={onEventsChange}
-        onCellClick={onCellClick}
-        onTaskClick={onEventClick}
-      />
-    )
+  const handleCellClick = (event, row, day) => {
+    // Do something...
   }
-
-  ReactDOM.render(<App />, document.querySelector('#app'))
+  
+  const handleEventClick = (event, task) => {
+    // Do something...
+  }
+  
+  const handleEventsChange = (item) => {
+    // Do something...
+  }
+  
+  const handleAlertCloseButtonClicked = (item) => {
+    // Do something...
+    setState({
+      ...state, 
+      alertProps: {...state.alertProps, open: false}
+    })
+  }
+  
+  return (
+    <Scheduler
+      events={events}
+      options={state?.options}
+      alertProps={state?.alertProps}
+      toolbarProps={state?.toolbarProps}
+      onEventsChange={handleEventsChange}
+      onCellClick={handleCellClick}
+      onTaskClick={handleEventClick}
+      onAlertCloseButtonClicked={handleAlertCloseButtonClicked}
+    />
+  )
+}
+
+ReactDOM.render(<App />, document.querySelector('#yourComponentRootId'))
 ```
 
 
@@ -109,16 +150,18 @@ React mui scheduler is a react component based on @mui v5 that allows you to man
 
 ## 🙇‍♂️ Extra
 
-    😊 Do you like this library ? Buy me a coffee
+    Do you like this library ? Buy me a coffee
 
-* Btc address: `1A2VNHSLGDyYsKWniJBe8cCqYWC52NvNZx`
+* Btc address: `bc1qettgagenn9nc8ks7ghntjfme96yvvkfhntk774`
 
-* Eth address: `0xFe444a01D9494Ec04f61797e15193C8016D666A5`
+* Eth address: `0xB0413d8D0336E263e289A915c383e152155881E0`
 
 
 ## 🔥 Some features to add in next releases
 
-- 👉 Week and day mode switch view
+- ✅ Week mode switch view
+  
+- 👉 Day mode switch view
 
 - 👉 Option menu 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mui-scheduler",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "\uD83D\uDCC5 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",
   "directories": {
@@ -18,6 +18,10 @@
   ],
   "author": "rouftom",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rouftom/react-mui-scheduler.git"
+  },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

src/MonthModeView.jsx

@@ -15,20 +15,21 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
     borderTop: `1px solid #ccc !important`,
     borderBottom: `1px solid #ccc !important`,
     borderLeft: `1px solid #ccc !important`,
-    '&:nth-child(1)': {
+    '&:nth-of-type(1)': {
       borderLeft: `0px !important`
     }
   },
   [`&.${tableCellClasses.body}`]: {
     fontSize: 14,
     height: 96,
     width: 64,
+    maxWidth: 64,
     cursor: 'pointer',
     borderLeft: `1px solid #ccc`,
-    '&:nth-child(7n+1)': {
+    '&:nth-of-type(7n+1)': {
       borderLeft: 0
     },
-    '&:nth-child(even)': {
+    '&:nth-of-type(even)': {
       backgroundColor: theme.palette.action.hover
     },
   },
@@ -73,7 +74,19 @@ function MonthModeView (props) {
    */
   const onCellDragStart = (e, item, rowIndex) => {
     setState({...state, itemTransfert: {item, rowIndex}})
-    //e.dataTransfer.setData('text/plain', `${item.id}_${rowIndex}`)
+  }
+  
+  /**
+   * @name onCellDragEnter
+   * @description
+   * @param e
+   * @param elementId
+   * @param rowIndex
+   * @return void
+   */
+  const onCellDragEnter = (e, elementId, rowIndex) => {
+    e.preventDefault()
+    setState({...state, transfertTarget: {elementId, rowIndex}})
   }
 
   /**
@@ -98,47 +111,35 @@ function MonthModeView (props) {
         let splittedDate = transfert?.item?.date?.split('-')
 
         if (!transfert?.item?.day) {
-          // Jour de la date du début du mois en chiffre
+          // Get day of the date (DD)
           transfert.item.day = parseInt(splittedDate[2])
         }
 
         if (transfert.item.day !== day?.day) {
           let itemCheck = day.data.findIndex(item => (
-            item.day === transfert.item.day && item.title === transfert.item.title
+            item.day === transfert.item.day && item.label === transfert.item.label
           ))
 
           if (itemCheck === -1) {
             let prevDayEvents = rowsCopy[transfert.rowIndex].days.find(d => d.day === transfert.item.day)
             let itemIndexToRemove = prevDayEvents?.data?.findIndex(i => i.id === transfert.item.id)
-  
+            
             if (itemIndexToRemove === undefined || itemIndexToRemove === -1) {
+              console.log(prevDayEvents)
               return console.log("item to remove is not found")
             }
 
             prevDayEvents?.data?.splice(itemIndexToRemove, 1)
             transfert.item.day = day?.day
             transfert.item.date = format(day?.date, 'yyyy-MM-dd')
             day.data.push(transfert.item)
-            setState({...state, rows: rowsCopy})
+            setState({...state, rows: rowsCopy, itemTransfert: null, transfertTarget: null})
           }
         }
       }
     }
   }
 
-  /**
-   * @name onCellDragEnter
-   * @description
-   * @param e
-   * @param elementId
-   * @param rowIndex
-   * @return void
-   */
-  const onCellDragEnter = (e, elementId, rowIndex) => {
-    e.preventDefault()
-    setState({...state, transfertTarget: {elementId, rowIndex}})
-  }
-  
   /**
    * @name handleCellClick
    * @description
@@ -164,7 +165,13 @@ function MonthModeView (props) {
    */
   const renderTask = (tasks = [], rowId) => {
     return tasks?.map((task, index) => (
-      ((searchResult && task?.title === searchResult?.title) || !searchResult) && (
+      (
+        (
+          searchResult &&
+          (task?.groupLabel === searchResult?.groupLabel || task?.user === searchResult?.user)
+        ) || !searchResult
+      ) &&
+      (
         <Paper
           draggable
           onClick={(e) => handleTaskClick(e, task)}
@@ -181,7 +188,7 @@ function MonthModeView (props) {
           onDragStart={e => onCellDragStart(e, task, rowId)}
         >
           <Box sx={{px: 0.5}}>
-            <Typography variant="caption">{task?.title}</Typography>
+            <Typography variant="caption">{task?.label}</Typography>
           </Box>
         </Paper>
       )
@@ -205,6 +212,7 @@ function MonthModeView (props) {
     if (state?.rows) {
       onEventsChange(Object.assign({}, state?.itemTransfert?.item))
     }
+    // eslint-disable-next-line
   }, [state?.rows, state?.itemTransfert])
 
   return (