rouftom / react-mui-scheduler

React material planner is a react component based on @mui v5 that allows you to manage data in a calendar

• 👋 Hi, I’m @rouftom
• 👀 I’m interested in mobile, web technologies and blockchain
• 🌱 I’m currently learning Blockchain and DLT
• 💞️ I’m looking to collaborate on cool projects
• 📫 How to reach me: [email protected] or [email protected]

react-mui-scheduler's Issues

How to get date with event DatePicker change ?

How to get date value with event DatePicker change ?

Rendering bug of months starting on sunday

Hello @rouftom,

As you can see from both images that the first of May is shifted by one day and therefore all days after.
The issue is weird because it happens only in May 2022.

Thanks.

render events with duration longer than 1 hour

Hi, I've used the sample code (see here) with a single event that spans 2 hours, from 4:00 to 6:00 AM as follows:

var events = [
    {
      id: "event-1",
      label: "Medical",
      startHour: "04:00 AM",
      endHour: "06:00 AM",
      date: "2022-04-01",
      // more fields...
    }
  ];

But it seems that the event is always rendered to span 1 hour:

Is there any option am I missing to configure? Thanks

Bug with double click on event

Dear developers I find problem with double click on event:

Please fix it.

Add multi event

Hello
I wanna add multi event in one day using onCellClick method
If today have one event, onCellClick method is not working now

This is small bug, I think
Can you fix it?

handleCellClick do not execut on a cell that have events inside

unknown_2023.11.08-14.50_clip_1.online-video-cutter.com.mp4

handleEventClick works fine but when i try to click in a cell that have events inside to execute handleCellClick dont work

My actual component

const handleEventClick = (event: React.MouseEvent, item: Events) => {
  console.log(event);
}

const handleCellClick = (event, row, day) => {
 console.log(day.day);
}
  
<Scheduler
  locale="en"
  events={events.flat()}
  legacyStyle={true}
  options={state?.options}
  toolbarProps={state?.toolbarProps}
  onCellClick={handleCellClick}
  onTaskClick={handleEventClick}
/>
  

When do you plan to convert to TS, add TS support ?

Hi great job on this project.
I wonder when do you plan on working on the next features.

1. Convert to tyepscript and also export TS types
2. Allow to schedule events between hours

I want to contribute in this project but you have no instructions how. I forked the project at the moment but cannot develop after building with rollup I get error importing it in one existing react app just to test.
If you migrate to typescript further development and contribution will be easier

Package Not Working. Installed from NPM.

I just copy pasted the code given in the documentation

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (main.3d5c697028c51d59c3da.hot-update.js:35350:17)
    at useState (main.3d5c697028c51d59c3da.hot-update.js:35380:24)
    at Scheduler (main.3d5c697028c51d59c3da.hot-update.js:33238:66)
    at renderWithHooks (bundle.js:78836:22)
    at mountIndeterminateComponent (bundle.js:82501:17)
    at beginWork (bundle.js:83969:20)
    at HTMLUnknownElement.callCallback (bundle.js:66632:18)
    at Object.invokeGuardedCallbackDev (bundle.js:66681:20)
    at invokeGuardedCallback (bundle.js:66743:35)
    at beginWork$1 (bundle.js:89756:11)

bundle.js:81175 The above error occurred in the <Scheduler> component:

    at Scheduler (http://localhost:3000/main.3d5c697028c51d59c3da.hot-update.js:33219:22)
    at div
    at http://localhost:3000/static/js/bundle.js:4274:66
    at Grid (http://localhost:3000/static/js/bundle.js:13631:87)
    at div
    at http://localhost:3000/static/js/bundle.js:4274:66
    at Grid (http://localhost:3000/static/js/bundle.js:13631:87)
    at Dashboard (http://localhost:3000/main.3d5c697028c51d59c3da.hot-update.js:37:66)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:94649:5)
    at Outlet (http://localhost:3000/static/js/bundle.js:95004:26)
    at main
    at http://localhost:3000/static/js/bundle.js:4274:66
    at Box (http://localhost:3000/static/js/bundle.js:28901:72)
    at div
    at http://localhost:3000/static/js/bundle.js:4274:66
    at Box (http://localhost:3000/static/js/bundle.js:28901:72)
    at DashboardLayout
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:94649:5)
    at Routes (http://localhost:3000/static/js/bundle.js:95098:5)
    at Router (http://localhost:3000/static/js/bundle.js:95029:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:93250:5)
    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:28110:70)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:27801:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:28130:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (main.3d5c697028c51d59c3da.hot-update.js:35350:17)
    at useState (main.3d5c697028c51d59c3da.hot-update.js:35380:24)
    at Scheduler (main.3d5c697028c51d59c3da.hot-update.js:33238:66)
    at renderWithHooks (bundle.js:78836:22)
    at mountIndeterminateComponent (bundle.js:82501:17)
    at beginWork (bundle.js:83969:20)
    at beginWork$1 (bundle.js:89731:18)
    at performUnitOfWork (bundle.js:88889:16)
    at workLoopSync (bundle.js:88802:9)
    at renderRootSync (bundle.js:88771:11)

Add a property to handle custom locale

When developing an application not always we want default languages, the idea is to provide a detailed locale property instead of just a string

<Scheduler 
locale={{
  "day": "Day",
  "week": "Week",
  "month": "Month",
  "timeline": "Timeline",
  "mon": "Mon",
  "tue": "Tue",
  "wed": "Wed",
  "thu": "Thu",
  "fri": "Fri",
  "sat": "Sat",
  "sun": "Sun",
  "search": "Search..."
}}
events={events}
legacyStyle={false}
...
/>

by doing so you prevent forking this project just to change locale and give more customization options

Demo code not working?

Hello. I created an empty project, install react-mui-scheduler, and copy-paste the example in the readme to give it a try, but it fails to run the app with error:

There seems to be some problems with the dependencies:

> mkdir test
> cd test
> npm init
> npm install --save react-mui-scheduler
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @mui/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peer react@">=16.8.0" from @emotion/[email protected]
npm WARN   node_modules/@emotion/react
npm WARN     @emotion/react@"^11.8.2" from [email protected]
npm WARN     node_modules/react-mui-scheduler
npm WARN     4 more (@emotion/styled, @mui/material, @mui/system, @mui/styled-engine)
npm WARN   13 more (@emotion/styled, @mui/icons-material, @mui/material, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^17.0.2" from @mui/[email protected]
npm WARN node_modules/@mui/x-date-pickers
npm WARN   @mui/x-date-pickers@"5.0.0-alpha.0" from @mui/[email protected]
npm WARN   node_modules/@mui/lab
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^17.0.2" from @mui/[email protected]
npm WARN   node_modules/@mui/x-date-pickers
npm WARN     @mui/x-date-pickers@"5.0.0-alpha.0" from @mui/[email protected]
npm WARN     node_modules/@mui/lab

Could you please help me to take a look? The component seems great btw! Thanks

Korean translation issue

Thanks for your efforts.

The followed is some wrong...
{
"day": "낮",
"week": "주",
"month": "월",
"timeline": "타임라인",
"mon": "월",
"tue": "화요일",
"wed": "수",
"thu": "목",
"fri": "금",
"sat": "앉았다",
"sun": "해",
"search": "검색..."
}

I would like to suggest the real Korean.
{
"day": "일",
"week": "주",
"month": "월",
"timeline": "타임라인",
"mon": "월",
"tue": "화",
"wed": "수",
"thu": "목",
"fri": "금",
"sat": "토",
"sun": "일",
"search": "검색..."
}

and Korean don't use "." at date like "MON." Because it is not abbreviation.
That is, '화' is OK but not '화.'

I really appreciate everything you’ve done.

Current status of the work

I have a requirement for scheduler. Your component fits the bill however I'm not sure

• if it is available for use in a MVP of commercial project?
• How stable it is?
• if there is any list of bugs that are active?

regards,

Cannot use import statement

frontend/node_modules/react-mui-scheduler/dist/index.esm.js:1
import _defineProperty from '@babel/runtime/helpers/defineProperty';
^^^^^^

Is it possible to localize the displayed text?

Hello, I am using the library you shared.

I'm trying to make a simple project. I want to display the displayed text in Korean(ex. monday -> 월요일 ), but what should I do?

Thanks for sharing a good library

ReferenceError: localStorage is not defined

Hello I really love this project! while using this package on a personal app i encountered the below error. Localstorage is not available because Next.js is server side.
- error node_modules/react-mui-scheduler/dist/index.esm.js (285:0) @ eval
- error ReferenceError: localStorage is not defined

I created this PR to fix this issue:

PR for FIX: #18

endHour has no visual effect

The events are not shown as their ending times are. the events are all visually represented as one hour events only, in any view (week, day, timeline)

Suggest few thing may can be improved

It will be awesome if calendar has more options, Ex. hide day, week mode option, show full days of a month.
anyway, many thank about this lib

How to change display the day of week

I am using "ja" as locale But the day of week is not correctly
Which mean Monday is 月曜日., Tuesday is 3月. ... Sunday is 太陽.

How to change it to 月・火・水・木・金・土・日
And I wanna know how to increate number of week that it can be display on screen

Thank you