aldabil21 / react-scheduler Goto Github PK
View Code? Open in Web Editor NEWReact scheduler component based on Material-UI & date-fns
License: The Unlicense
React scheduler component based on Material-UI & date-fns
License: The Unlicense
Hello!
Awesome package. I noticed there is no Friday column on the calendar. Is this a bug? How can I make the Friday column appear?
Thanks!
How to set timezone for the scheduler to use timezone other than the local system / browser?
Would it be possible to get a horizontal line drawn in the cells showing the current time (like in Google Calendar)? I think this would only make sense to show when in the week view or the day view. Here is a screenshot of what I am referring to:
I'm not sure how difficult this is to implement, but I'd be happy to work on this and send a pull request if I had some guidance on which files to work with.
Sorry if this is already possible, but it would be great to have access to the current view date outside of the provided query in remoteEvents. Perhaps by providing a context provider alongside the Scheduler component?
I can add the current day in others views, and put de indicator feature mentioned in this issue ?
Ιs there any way to disable Add, Delete and Update?
I want only to see the events and their details.
Hi I would like to ask can we have some disabled Date/Time Ranges feature ?
Hi @aldabil21 ,
Thank you so much for the example you've posted. I think I should be able to use this for our project.
What if i want to book event before startHour: 9 or after endHour: 17?
I was trying to create an event other than By default slots.
Is it possible If yes how can I do that?
Thanks
Hello
We can add de prop draggable
to disabled the drag and drop ?
I can disable icon edit and delete ? I can disable something role
Every time the component is loaded, it rerenders itself an additional time when the view nav is changed from Month
, Day
or Week
, but not when Today
is clicked.
npm run start
Line 11 in 1a1275f
getRemoteEvents={async () => {
console.log("Getting Events at", new Date())
return EVENTS;
}}
I've tried running the profiler to see what is causing this, but no success. I can further see this happening if you insert a console.log
into the stateReducer
function here
I haven't found a good work around as this calls external server duplicate times (which could be costly) when getRemoteEvents
is passed as prop.
Hi @aldabil21,
I was trying to install your scheduler, but unfortunately my system can't compile it after the install. The error message is:
Module not found: Can't resolve '@mui/icons-material/ArrowLeftRounded' in '..\node_modules@aldabil\react-scheduler\dist'
Could you help me please.
Thank you so much!
Best Jochen
I think there's some check for a "falsey" value happening with event_id
somewhere because I cannot use 0
as an event ID. When I do, the scheduler.edited
value is null when I try to use a customEditor
function. Let me know if you need me to clarify anything.
Is there any way to disable the drag&drop feature as well as the editing of a schedule?
Hello,
The height of each event should be correct. There should be no offset at all.
The height of the event gets a higher offset the lower it is.
return <div><div style={{margin: 20}}><Scheduler
remoteEvents={(q) => fetchRemote(q , this.props.videohub)}
onConfirm={(e, a) => {
return handleConfirm(e, a, this.props.videohub, this.props.output);
}}
onDelete={(id)=> handleDelete(id, this.props.videohub)}
view={"week"}
week={
{
weekDays: [0, 1, 2, 3, 4, 5, 6],
weekStartOn: 1,
startHour: 0,
endHour: 23,
step: 60,
}
}
fields={[
{
name: "title",
type: "select",
options: getOutputChoices(),
config: {
label: "Input", required: true, errMsg: "Please select an Input."
}
}
]}
selectedDate={new Date()}
onEventDrop={(_date, updated, old) => {
updated.event_id = old.event_id;
return handleConfirm(updated, "edit", this.props.videohub, this.props.output);
}}
/></div></div>;
Do you have any idea what the issue could be? Thanks in advance!
Hi there, I am using the react-scheduler, it is working perfectly for week and month (the events) are appearing perfectly inside the given cell. But it seem to be not the same case for the day event.
Here is the month view (it is good):
Note: it goes into the header (it is supposed to start at 8AM) (where it says today's date).
I am using resource headers etc, but I am not any other exteral styles which could cause this.
Although passing this day configs
day={{ startHour: 8, endHour: 23, step: 30, cellRenderer: cellOverride, }}
Cell override being:
const CellOverride = styled('div')<CellRenderedProps>(({ height }) => ({ width: '100%', height, margin: 0, border: 0, background: 'transparent', }));
Tried commenting these codes out and just passed the events and it still seemed to calculate the wrong position.
Would there be anything that we need to consider for the start height of the component?
Great library, thanks for your hard work!
One thing I would love to see is the ability to set class name and other properties when rendering events in the calendar. Perhaps a custom eventRenderer component prop would be an easy way to allow people to have different background color/border/etc events based on data properties, among other things. Would obviously need to spread the props for that event so the positioning/click event/etc is handled correctly, as well as receive the data item for the event being rendered ofc.
Cheers!
Resources/View Mode CodeSandBox is not working
Great library, thinking about using this, but before I do could you add a LICENSE to this repo? Just want to make sure you are giving explicit permissions. Relevant
Hello,
I'm trying to use this component in a nextJS app but I get this error as soon as I import the component into a page, without using it.
`./node_modules/@aldabil/react-scheduler/dist/Scheduler.js:1:1002
Module not found: Can't resolve 'date-fns'
Import trace for requested module:
./components/Today/Today.jsx
./pages/yonetim.js
https://nextjs.org/docs/messages/module-not-found`
"dependencies": {
"@aldabil/react-scheduler": "^2.2.1",
"i": "^0.3.7",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
},
I like your project so far and it works really well. I see we can pass custom title and extra components into for when the popper is open, is it possible to add customEventItem so the user has control over how it looks on the scheduler?
In the US, daylight savings ended today. At 2am this morning, the clock rolled back an hour and we repeated the hour from 1am to 2am.
This leads to the following situation in the scheduler: there are two time slots labelled 1am and when I create an event after the time change, it is rendered an hour behind where it is supposed to be. I have attached a screenshot as an example. In the screenshot, I created an event on Friday from 9am to 10am. The label on the event is correct, but it is displayed in the scheduler in the 8am to 9am slot, which is incorrect.
Line 58 in a05a05c
I installed react-scheduler and when I compiled the code it showed me the following error:
Module not found: Can´t resolve '@material-ui/core'
Module not found: Can´t resolve '@material-ui/icons'
I think @material-ui/core
@material-ui/icons
should be defined as peerDependencies.
After installing material-ui
I managed to get it to work but only in view="month", day and week does not work
Hey, great library.
I was just curious about when recurring events will be implemented, since I saw you have it on the todo list.
This is just a question, not a demand or anything like that.
Can I set Scheduler readonly?
In the readony mode the users can't add/delete/change the event.
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
FOR WEBPACK V5
Whenever I try to render my react app, an alert pops up that says "TypeError: Cannot read properties of undefined (reading 'pxToRem')" and the calendar fails to render. I am following the code given in the demos, so I'm not really sure where I'm going wrong. This is my code :
import { Scheduler } from "@aldabil/react-scheduler"
export const Calendar = () => {
return (
<Scheduler
view="month"
events={[
{
event_id: 1,
title: "Event 1",
start: new Date("2021/5/2 09:30"),
end: new Date("2021/5/2 10:30"),
},
{
event_id: 2,
title: "Event 2",
start: new Date("2021/5/4 10:00"),
end: new Date("2021/5/4 11:00"),
},
]}
/>
)
}
Thank you so much for providing this library! I'm looking to incorporate it into my project, which is built with Nextjs.
I've imported and used the Scheduler component in one of my components:
`
import React, { useState } from 'react'
import { Scheduler } from "@aldabil/react-scheduler";
const TripScheduler = ({ tripId, guestId, isOrganizer }) => {
return (
<>
<Scheduler
view="week"
events={[]}
selectedDate={new Date(2021, 4, 5)}
/>
</>
)
}
export default TripScheduler
`
When I hit the page, I see the following errors in the console:
error - ReferenceError: document is not defined at s (/Users/jde/dev/github/jde/platform/node_modules/@aldabil/react-scheduler/dist/Scheduler.js:1:4194)
I haven't been able to figure out why the document object isn't available in my project while it is available in the Create React App based example. Could it be a difference in the way Nextjs exposes the document element?
Looking into the source code, I'm seeing that the scheduler compiles down to use the basic document functions createElement, createTextNode, etc... Is is possible that this source code could be compiled differently to use other element creation functions?
A last thought I had was whether or not it makes sense to import the dist/SchedulerComponent.js
directly, as that is the react/jsx code which may be able to be compiled into the project along with all my classes.
Thanks again for maintaining the project. Any thoughts on how to integrate into my stack would be much appreciated!
How I can switch the Calendar view from 12-hour clock to 24-hour ?
It seems like if I'm only using remote data, there's no way to refresh it? For example, the only way to add or remote new events is by using the onConfirm
or onDelete
props to return the edited/created or deleted event respectively. With the APIs I have, this is not possible, all I can do is refresh the list of events. I've tried this using events
and remoteEvents
to no avail. If I could just somehow call this function after I create/edit/delete, I'd be all set.
Any guidance much appreciated.
Hello, I am creating a component that displays a set of filters next to the scheduler. When one of the filters is checked/unchecked, that changes which events are passed to the scheduler's events field. However, it also resets the scheduler back to the current date.
As an example, I have the following flow:
I want this to remain on the next week and simply hide/show some new events. Instead, the scheduler reverts back to the current date and the user has to click to the next week again in order to see the changed events.
It seems like changing any state in the parent component resets the scheduler back to the current date. Is there a way to prevent this from happening?
I currently have this version of mui/labs and the date pickers doesn't show up when I'm editing an event.
The date also doesn't show up on the top left corner.
"@aldabil/react-scheduler": "^2.2.2",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.8.4",
"@mui/lab": "^5.0.0-alpha.85",
"@mui/material": "^5.9.1",
"@mui/styled-engine-sc": "^5.8.0",
"@mui/x-date-pickers": "^5.0.0-beta.4"
I see in your sandbox that the version is different and I get a warning when putting my versions into a forked sandbox:
"@aldabil/react-scheduler": "2.1.0",
"@emotion/react": "11.7.1",
"@emotion/styled": "11.6.0",
"@mui/icons-material": "5.2.5",
"@mui/lab": "5.0.0-alpha.61",
"@mui/material": "5.2.5",
"date-fns": "2.21.2",
"react": "17.0.0",
"react-dom": "17.0.0",
"react-scripts": "4.0.3"
MUI: The LocalizationProvider component was moved from @mui/lab
to @mui/x-date-pickers
.
You should use import { LocalizationProvider } from '@mui/x-date-pickers'
or import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
in DeprecatedLocalizationProvider (created by oe)
in oe (created by Oe)
in Oe (created by fe)
in fe (created by qe)
in qe (created by Ne)
in Ne (created by App)
in App
In the Basic example if we add an event(the test one) having start time 9am and end time 6 pm, the blue rectangle does not touch the bottom end of the last cell
Could you tell me, how to add more fields to the customEditor?
I need more fields when editing to the customEditor. Now only comes interface CalendarEvent
Awesome repo btw
Love what you're doing
When I was trying out the repo I could not find a way to extract the current day / week / month and see the changes as the user switches between different days / weeks / months / years.
Is this possible?
This sort of feature would be helpful to for an API query so the server and filter events between a start and end date
I can not get event when click onDelete
Hi there,
I attempted to fork your repo (https://github.com/RLangridge/react-scheduler) and add this in myself but I've run into nightmares in terms of packing so I thought I'd ask here. Is there any chance you could add the ability to inject custom code when a user selects an empty cell and an event? I want to be able to show a custom view when my users select an event cell and perform custom actions within that view. I also want to make the empty cells read-only, so that they can't be added too. My apologies if this functionality already exists and I just couldn't find it.
Thanks!
Currently, only the action in the weekly view can be changed. Will this feature be added to the daily and monthly view?
Hi @aldabil21 , when I used prop ViewerExtraComponent
and add some nodes, there is a wrong width appeared on 'EventItem'.
If a child of ViewerExtraComponent is a long string or a flexible box contained multiple lines, the width of the event view was stretched.
[Expected Behavior]
Styles of extra view are correct.
[Actual Behavior]
There is a strange margin assigned to 'PopverInner'.
The reason why the event view was stretched is 'max-width: 95%' assigned to itself. When I dropped it, styles would be correct.
You can see this case
And I found noway to add props to change the root style for 'EventItem', I had to add a hard css code below to fix it provisionally:
body > div.MuiPopover-root.MuiModal-root > div.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPopover-paper > div { max-width: none; }
Could you remove the 'max-width' attribute or provider some methods to change styles for EventItem
😀?
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.