GithubHelp home page GithubHelp logo

aldabil21 / react-scheduler Goto Github PK

View Code? Open in Web Editor NEW
335.0 335.0 126.0 9.47 MB

React scheduler component based on Material-UI & date-fns

License: The Unlicense

HTML 1.07% TypeScript 97.68% JavaScript 1.20% Shell 0.04%

react-scheduler's People

Contributors

aldabil21 avatar almax-21 avatar bayaderpack avatar brunococitto avatar jackstenglein avatar janushan avatar jucopera avatar koybasimuhittin avatar luizfilho avatar marcauberer avatar marcinczanasz avatar mtobbias avatar npapapietro avatar senegoid avatar sherif-wael avatar slash-84 avatar sreejithshaji avatar uxbert-fe avatar zixing8284 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-scheduler's Issues

Column for Fridays

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!

Timezone setup

How to set timezone for the scheduler to use timezone other than the local system / browser?

Show indicator of current time?

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:

Screen Shot 2022-11-04 at 10 47 57 AM

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.

Access selected date outside of query

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?

Current time indicator is displaying above the modal

There seems to be a visual bug with the time indicator div's z-index style value.

image

The default value of 1500 makes it display above the modal.

image

Editing this z-index value to <= 1300 seems to resolve this problem.

image

Calendar View Mode

Ιs there any way to disable Add, Delete and Update?
I want only to see the events and their details.

Questions

Hi Abdulraoof, it's a great plugin i love it. but i have two questions.

  1. it is possible define days available in the calendar? example : allow days only between two dates or week.
  2. it is possible define view mode by code and hide the options for the user
    Captura de Pantalla 2022-05-24 a la(s) 19 04 35

Thanks a lot.

Regards.

Add Event After endHour: 17, or before startHour: 9

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

Changing the colour of the dates?

Is it possible to change the colours of the text? I think this would be a good feature to add, as the calender is not very visible on a dark background. As you can see below:

image
image

[Bug] Render happens twice every view load/change

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.

Steps to duplicate

  1. Fork repo
  2. Run npm run start
  3. Replace
    // getRemoteEvents={async () => {
    with
      getRemoteEvents={async () => {
         console.log("Getting Events at", new Date())
         return EVENTS;
      }}

image

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

const stateReducer = (state: SchedulerState, action: Action): SchedulerState => {
you will see duplicate logs happening.

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.

Event IDs cannot be 0

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.

Height of Events is offset

Hello,

Expected behavior:

The height of each event should be correct. There should be no offset at all.

Observed behavior:

The height of the event gets a higher offset the lower it is.

Image

Image2

Code

        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!

Day-view event overflows from the header

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):
Screen Shot 2022-06-24 at 10 25 23 pm

Here is the day view:
Screen Shot 2022-06-24 at 10 25 57 pm

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?

Possible to have a custom event renderer?

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!

License?

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

./node_modules/@aldabil/react-scheduler/dist/Scheduler.js:1:1002 Module not found: Can't resolve 'date-fns'

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"
},

Possible to have a customEventItem?

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?

Events are rendered in wrong timeslot due to daylight savings

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.

Screen Shot 2022-11-06 at 5 55 13 PM

Missing PeerDependencies

"peerDependencies": {

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

Question: Recurring events

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't resolve 'crypto'

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

Error on render

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"),
                },
            ]}
        />
    )
}

"document is not defined" error in NextJS project

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!

No way to refresh remote events

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.

State change in parent component resets selected date

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:

  1. User opens the page and scheduler is in week format on the current date.
  2. User clicks the scheduler navigation button to navigate to the next week.
  3. User changes the filter values

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?

Issue with MUI Datepicker

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

Event wrong height

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

image

add more fields to the customEditor

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

Unable to getCurrent Day / Week / Month

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

Feature Request - Customized actions on cell selection

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!

Strange margin for custom ViewerExtraComponent

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.