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)
- Slack invite expired HOT 1
- react-big-calendar selection offset HOT 1
- Luxon localizer should use LLL to format month instead of MMM HOT 3
- Drag and Drop example code has issues when dropping to / from all-day events HOT 1
- Cant create custom event design for month view
- Day does not show in week view HOT 1
- Pass 'accessors' prop to the 'DayColumnWrapper' component HOT 2
- Expired slack invitation link HOT 2
- Vertical scrolling of multiple days (vertical, hourly week view)? HOT 1
- When pass resizableAccessor=true, and draggableAccessor=false, than resizable is not working HOT 2
- Time Slot Issue In Week View HOT 4
- Time Slot Issue In Week View HOT 11
- Error "Super expression must either be null or a function" HOT 4
- 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
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.