Comments (7)
If anyone still comes across this, hope to give some clarity to the other (correct) answers above.
To navigate to a specific day, you just need to set <BigCalendar date={this.state.yourDate} />
and change it however you want in your parent component.
If you do so, the built-in navigation (forward/backward) won't work as the default handleNavigate
function won't change your state's date (this.state.yourDate
in the above example). All you have to do is set the onNavigate
prop to reflect the date change in your state, e.g.:
...
handleNavigate(date, view, action) {
this.setState({yourDate: moment(date).toDate();
...
}
...
render() {
return <BigCalendar
date={this.state.yourDate}
onNavigate={this.handleNavigate}
/>
}
...
from react-big-calendar.
yup, the date prop
from react-big-calendar.
But if i use the date
prop, i cant use the toolbar navigation anymore.
from react-big-calendar.
sure you can, just pair it with the onNavigate prop.
those two props work like controlled inputs (value/onChange). anytime the calendar wants to set the date it will fire onNavigate, it's up to you if you want to then set that to date. if you only want to set the initial starting date you can use defaultDate.
from react-big-calendar.
Dont think onNavigate solves this. My use-case is that i have a Mini Calendar on the sidebar and a Big calendar. When i select a date in the mini-calendar, the dates in the big calendar should change. But when i navigate using Prev/Next
buttons in the mini calendar. the big calendar should not change.
I had to modified the source code to add a onSelectDate
handler to solve this. Thanks for the feedback :)
from react-big-calendar.
that use case is exactly what date/onNavigate are for. in fact we do the same thing in our app using the little calendar from react-widgets
from react-big-calendar.
Is there an example how to use onNavigate and date to manually jump to a date of calendar? trying to test it using a button onclick..but I can't figure it out :(
from react-big-calendar.
Related Issues (20)
- Week view, Event showing twice HOT 8
- Clicking backgroundEvent triggers onSelectSlot HOT 6
- Events are hiding if the contents are more HOT 2
- Setting event width to half day horizontally in week view instead of full
- How does event truncation work in month view? HOT 1
- Add label to all thursdays beside events in react big calendar
- New Slack Link Required
- Click the event trigger rerender timesSlotWrapper HOT 1
- Duplicate event shows up on month view when try to re-size
- Trouble in Next js HOT 6
- date overlay the modal HOT 2
- Make ResourceID available in dayPropGetter
- Id type are missing
- NiceToHave: Could you guys give us an API to sort events by ourself own requirements?
- Multi-day renders end day incorrectly if time is less then 00:01:00
- BUG:- resourceIdAccessor, resourceTitleAccessor not working for views (Day, Week, Work week)
- BUG:- resourceIdAccessor not working for views (Day, Week, Work week)
- TimeGrid is not exported properly. HOT 1
- Week view won't render any events if resources prop is passed in HOT 1
- How to change the language of the month and weekday labels? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-big-calendar.