remotelock / react-week-scheduler Goto Github PK

I've been facing this warning for a lot of time. Everything works fine, but it keeps saying that it's deprecated. I've been diving into the code to find the current issue and I found out that the problem has to be with the react-draggable dependency that it's used within this project.

To be more precise, the file that is having issues with is /src/components/RangeBox.tsx., in which the draggable library is used. I've been also looking at the library's code in order to find a solution and I found out that in their changelog files they have already contemplated this issue, and they have provided a solution to it.

Down is the text that they have written about this:

4.4.0 (May 12, 2020)

• Add nodeRef:
  • If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
    Unfortunately, in order for <Draggable> to work properly, we need raw access
    to the underlying DOM node. If you want to avoid the warning, pass a nodeRef
    as in this example:

    function MyComponent() {
      const nodeRef = React.useRef(null);
      return (
        <Draggable nodeRef={nodeRef}>
          <div ref={nodeRef}>Example Target</div>
        </Draggable>
      );
    }

Would it be possible to fix this? The solution itself is quite easy as it only requires adding a prop with the ref variable as stated in the example provided by the developers.

Thanks in advance.

A lot of import errors are appearing (23 to be axact):

ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 34:0-45
Module not found: Error: Can't resolve 'date-fns/is_same_day' in '/mnt/c/Users/.../scheduler-manager/myapp/node_modules/@remotelock/react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/is_same_day' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Hi,

I'm using the latest version with npm. My code is in jsx.

However, there is no way to delete a time slot.

Thanks in advance,

Marcos

We are looking at using this library for our project and it looks really promising, especially with the fluid drag to enlarge.

However, when I try to install the package into a JS-only React project, I am met with the following error:

Failed to compile.

./node_modules/@remotelock/react-week-scheduler/index.mjs
Can't import the named export 'createContext' from non EcmaScript module (only default export is available)

I copied the code from the sample in the Readme to produce this error

This seems to be an issue related to breaking changes in webpack and how it treats .mjs files as listed here

And a dirty fix appears to be something along the following, as discussed here

{
  type: 'javascript/auto',
  test: /\.mjs$/,
  use: []
}

Edit

This appears to be an issue with create-react-app and the default webpack config it's using, as it will not support .mjs extensions until jest does.

So is there any plan to support projects bootstrapped with create-react-app without ejecting?

Hi, I'm using webpack with typescript and have some problems.

error  in ./node_modules/@remotelock/react-week-scheduler/index.mjs

Can't import the named export 'useRef' from non EcmaScript module (only default export is available)

I tried to fix it with this (found here graphql/graphql-js#1272):

// webpack.config.js
{
  test: /\.mjs$/,
  include: /node_modules/,
  type: "javascript/auto",
}

Which fixed the build, but then I got another error in the browser:

Uncaught TypeError: Object(...) is not a function
    at TimeGridScheduler (index.mjs:1251)

Do you have any hint what I should try to get it to work?

Hello,

I tried to change the locale language from date-nfs and it did't work, I have fork the code sandbox from the README to having an example : https://codesandbox.io/s/react-week-scheduler-basic-demo-1eo2n?file=/src/index.js .
Besides it's works at https://remotelock.github.io/react-week-scheduler/...
I have read the component source code but I did'nt find anything weird for know, may be I'm not using locale correctly ?

Thanks

ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 4:0-40
Module not found: Error: Can't resolve 'date-fns/add_days' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/add_days' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 5:0-42
Module not found: Error: Can't resolve 'date-fns/add_hours' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/add_hours' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 6:0-37
Module not found: Error: Can't resolve 'date-fns/format' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/format' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 7:0-44
Module not found: Error: Can't resolve 'date-fns/is_equal' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/is_equal' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 8:0-47
Module not found: Error: Can't resolve 'date-fns/start_of_day' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/start_of_day' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 10:0-37
Module not found: Error: Can't resolve 'lodash/isEqual' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'isEqual.js'?
BREAKING CHANGE: The request 'lodash/isEqual' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 11:0-33
Module not found: Error: Can't resolve 'lodash/times' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'times.js'?
BREAKING CHANGE: The request 'lodash/times' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 13:0-36
Module not found: Error: Can't resolve 'date-fns/locale/en' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/locale/en' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 15:0-89
Module not found: Error: Can't resolve 'rxjs/operators' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 17:0-33
Module not found: Error: Can't resolve 'lodash/clamp' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'clamp.js'?
BREAKING CHANGE: The request 'lodash/clamp' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 18:0-33
Module not found: Error: Can't resolve 'lodash/floor' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'floor.js'?
BREAKING CHANGE: The request 'lodash/floor' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 19:0-33
Module not found: Error: Can't resolve 'lodash/round' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'round.js'?
BREAKING CHANGE: The request 'lodash/round' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 20:0-46
Module not found: Error: Can't resolve 'date-fns/add_minutes' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/add_minutes' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 21:0-46
Module not found: Error: Can't resolve 'date-fns/compare_asc' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/compare_asc' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 22:0-43
Module not found: Error: Can't resolve 'date-fns/end_of_day' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/end_of_day' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 23:0-42
Module not found: Error: Can't resolve 'date-fns/is_before' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/is_before' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 24:0-31
Module not found: Error: Can't resolve 'date-fns/min' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/min' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 25:0-33
Module not found: Error: Can't resolve 'lodash/range' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'range.js'?
BREAKING CHANGE: The request 'lodash/range' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 26:0-59
Module not found: Error: Can't resolve 'date-fns/difference_in_days' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/difference_in_days' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 27:0-65
Module not found: Error: Can't resolve 'date-fns/difference_in_minutes' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/difference_in_minutes' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 28:0-38
Module not found: Error: Can't resolve 'date-fns/set_day' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/set_day' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 30:0-46
Module not found: Error: Can't resolve 'date-fns/get_minutes' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/get_minutes' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@remotelock/react-week-scheduler/index.mjs 34:0-45
Module not found: Error: Can't resolve 'date-fns/is_same_day' in 'C:\Users\MihaiPC\Desktop\Licenta\licenta-fmi\frontend\orar\node_modules@remotelock\react-week-scheduler'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'date-fns/is_same_day' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

:)

The library looks great, but it seems that it does not work in Safari anymore? (MacOS & iOS)

...

https://codesandbox.io/s/mmj3xzk4x?fontsize=14&file=/src/styles.css

As it is also visible in this example, the start time of the first day gets clipped (it shows "2:00pm" instead of "12:00pm". Is there a way I can modify the css in my code to fix this?

<div className="root" style={{ width: "80vw", height: "400px", "--cell-height": "20px", "--cell-width": "50px", }} >

Is there another css attribute I can add here to make the margin-left: 20px for the range box (that appears in blue)?

How can Russian translation be used (date-fns/locale/ru)?

Hi,

This works pretty well in chrome and firefox even in Edge, but safari does not work properly and crashed the component.

I came to know safari does not parse the date properly if it is not a valid iso string.
date-fns/date-fns#1275

I'm getting this error, can you help me?

./node_modules/@remotelock/react-week-scheduler/index.mjs
Can't import the named export 'createContext' from non EcmaScript module (only default export is available)

Is there a way to add the title of an event instead of just the times of the event in the demo?

After creating a schedule, I hover on it with the mouse, but I can't see a field to delete. The program can be created but not delete. What should I do to delete it like in the demo?

Hello
I want use library for react-native
The library current have support for this
Thank so much

Thanks for great library.

I'm not sure if the library support disallow time ranges, so that user couldn't drag to those ranges ?

When dragging on the grid to create a new event using a custom ContentComponent, my application is thrown into an endless loop. All other ways to interact with the grid (i.e. clicking once to create, dragging/expanding an existing event) do not cause this issue. This only occurs when I pass my custom component to the TimeGridScheduler in an arrow function so that I can pass additional props like so:

eventContentComponent={(props) => CustomEventContent(this.props.myCustomProp, props)}

If I pass my custom ContentComponent to the TimeGridScheduler as shown in the demo:

eventContentComponent={CustomEventContent}

I encounter no issues, however I am unable to pass my custom props.

Hi, Can you please add a license to the repo?

Is it possible to use 24 hour format instead of am/pm?

https://codesandbox.io/s/mmj3xzk4x?fontsize=14&file=/src/styles.css

As it is also visible in this example, the start time of the first day gets clipped (it shows "2:00pm" instead of "12:00pm". Is there a way I can modify the css in my code to fix this?

<div className="root" style={{ width: "80vw", height: "400px", "--cell-height": "20px", "--cell-width": "50px", }} >

Is there another css attribute I can add here to make the margin-left: 20px for the range box (that appears in blue)?

How can we change the timezone values of the schedulers? While listing, I send the value as "moment.tz (" time "," Europe / London ")" but it automatically gets my time zone.

Hello

This looks like a great module / fork. I'm considering to use it. Before I can make that choice, however, I'd like to know if there's a way to create schedule types or whatever you want to call it.

For example, one blue schedule labelled "fishing" and one green schedule labelled "soccer".

Thanks in advance