Errors with calendar “important events”

[dave@kato-consulting.com]

Hello,

I’m trying to get this sample working using React JS:

https://www.htmlelements.com/demos/calendar/important-events/

Getting lots of errors for the daterangeinput, I must be missing something simple. I followed the steps to get started using create-react-app.

Here is my project repo:

https://github.com/Kato-Consulting/samplecalendar

 

React version 17.0.2
Node version 16.13.1

 

Errors:

Uncaught TypeError: that.nativeElement.whenRendered is not a function
at DateRangeInput.componentDidRender (daterangeinput.esm.js:405)
at DateRangeInput.componentDidMount (daterangeinput.esm.js:419)
at commitLifeCycles (react-dom.development.js:20663)
at commitLayoutEffects (react-dom.development.js:23426)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at commitRootImpl (react-dom.development.js:23151)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
react-dom.development.js:20085 The above error occurred in the <DateRangeInput> component:

at DateRangeInput (http://localhost:3000/static/js/bundle.js:40184:5)
at div
at div
at smart-window
at Window (http://localhost:3000/static/js/bundle.js:88586:5)
at div
at App (http://localhost:3000/static/js/bundle.js:37:5)

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.
logCapturedError @ react-dom.development.js:20085
bootstrap:27 Uncaught TypeError: that.nativeElement.whenRendered is not a function
at DateRangeInput.componentDidRender (daterangeinput.esm.js:405)
at DateRangeInput.componentDidMount (daterangeinput.esm.js:419)
at commitLifeCycles (react-dom.development.js:20663)
at commitLayoutEffects (react-dom.development.js:23426)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at commitRootImpl (react-dom.development.js:23151)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
smart.calendar.js:34 Uncaught TypeError: Cannot read properties of undefined (reading ‘shadowRoot’)
at HTMLElement.getShadowRootOrBody (smart.calendar.js:34)
at HTMLElement.o (smart.calendar.js:34)
at HTMLElement._setElementParent (smart.window.js:831)
at HTMLElement.render (smart.window.js:831)
at t (smart.calendar.js:34)
at HTMLElement.e.complete (smart.calendar.js:34)
at HTMLElement.setup (smart.calendar.js:34)
at HTMLElement.connect (smart.calendar.js:34)
at HTMLElement.<anonymous> (smart.calendar.js:34)
at HTMLDocument.D (smart.calendar.js:34)

[admin]

Hi,

Thank you for the feedback. We tested this with the latest React version and there is an error in the DateRangeInput React component. It is missing an important import in the references list. We will update this as soon as possible. When we update and resolve the issue, the topic will be updated, too.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,

We released an update of our React components with the fix for the DateRangeInput component. The sources for the demo are updated online, too.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[dave@kato-consulting.com]

I pulled down the latest, it works now.

Thanks for the quick response!

Dave Petersen

[Author]

Posts