go to specific date or Month or Year in fullCalender with react-datepicker Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of go to specific date or Month or Year in fullCalender with react-datepicker without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am using fullCalendar and react-datepicker library in my react app.

react version:
“react”: “^17.0.1”,

fullCalendar version:
“@fullcalendar/core”: “^5.9.0”,
“@fullcalendar/daygrid”: “^5.9.0”,
“@fullcalendar/interaction”: “^5.5.0”,
“@fullcalendar/list”: “^5.9.0”,
“@fullcalendar/react”: “^5.5.0”,
“@fullcalendar/resource-daygrid”: “^5.5.0”,
“@fullcalendar/resource-timegrid”: “^5.5.0”,
“@fullcalendar/timegrid”: “^5.9.0”,
“@fullcalendar/timeline”: “^5.9.0”,

react-datepicker version:
“react-datepicker”: “^4.2.1”,

I want to use the react-datepicker in fullCalendar to go to the specific date/month/year.
I am passing data from react-datepicker to state and using that state in goToDate prop in fullCalender, but this is not working. any help will be highly appreciated. thanks.

link to code:

https://codesandbox.io/s/fullcalender-file-h59ss

Answer

You can use ref to call gotoDate method on date change.
Checkout the following codesandbox:
https://codesandbox.io/s/fullcalender-file-forked-szgcu?file=/src/App.js

We are here to answer your question about go to specific date or Month or Year in fullCalender with react-datepicker - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji