I've followed a documentation and uploaded a project here.
There are no errors, but events are not displayed. Here's some code:
<BigCalendar
events={events}
startAccessor='startDate'
endAccessor='endDate'
defaultDate={new Date(2017, 11, 1)}
views={allViews}
defaultView='day'
titleAccessor='tttttttt'
components={{
event: Event,
agenda: {
event: EventAgenda
}
}}
/>
Cannot understand what is the problem. According to this answer I added some style, but the result is the same.
A page with the documentation of React Big Calendar is here.
Make sure your event dates match up to the accessors.
When you define a 'startAccessor' and 'endAccessor' it will look at those for the event dates. In the sample data for events big-calendar supplies 'end' and 'start' for the dates.
The default states for start/end Accessors is 'start' and 'end' so if you change to 'startDate' and 'endDate' your event dates need to match that.
Related
I am using react-big-calendar I would like to know if it is possible to be able to render more information of each event in the calendar.
Its documentation is hard for me to understand, and I don't know what prop I have to use to make custom event content.
In this query, it says that it is possible to make an override component to the default one.
But I can't find an example to guide me, nor which props should I use to override within the calendar component.
what i want to achieveenter image description here
It is possible to override the 'event' display, in every view of the Calendar.
const MyMonthEventComponent = ({ event, isAllDay, ...props }) => // layout for event in 'month'
const MyWeekEventComponent = ({ event, isAllDay, ...props }) => // layout for event in 'week'
const MyDayEventComponent = ({ event, isAllDay, ...props }) => // layout for event in 'day'
// ...
const components = useMemo(() => ({
month: {
event: MyMonthEventComponent
},
week: {
event: MyWeekEventComponent
},
day: {
event: MyDayEventComponent
}
// or 'agenda' events, or an custom 'view' you define...
}), []);
// ...
<Calendar components={components} {...otherProps} />
The components prop points all of this out, though you are right that figuring out 'how' to construct an override is a little difficult, largely because so much can be overridden. The easiest way is to look at the source code on GitHub to find out what props are passed in to a particular component.
The biggest challenge to changing 'event' display is understanding base Calendar layout. Event display boundaries (width, height, placement), are dynamically calculated based upon available space. You typically display the absolute least amount of data necessary, for a user to identify an event, and provide other means for viewing additional detail. A common way to do this is by controlling the selected prop, by storing 'selected' in state and setting its value with the onSelectEvent prop (reading the documentation here will help). Once you are controlling selected you can use that state value to populate some other control area in your overall layout, providing a master/detail type view.
In the docs, some of the props do not exist on the component, so I guess it's outdated.
I have a TagPicker component, I'm using the Tag Picker with inline suggestions one.
<TagPicker
onResolveSuggestions={filterSuggestedTags}
getTextFromItem={getTextFromItem}
pickerSuggestionsProps={{
suggestionsHeaderText: 'Tags',
noResultsFoundText: 'No tags found',
}}
pickerCalloutProps={{ doNotLayer: true }}
inputProps={inputProps}
/>
And I want its value to be stored in a state (as an array of strings).
I tried to find events of selecting and removing but couldn't find them.
Thanks in advance!
Use onChange event for add/remove items and selectedItems for component state.
// Import ITag interface from FluentUI.
const [selectedItems, setSelectedItems] = useState<ITag[]>([])
<TagPicker
...
onChange={items => items && setSelectedItems(items)}
selectedItems={selectedItems}
/>
Codepen working example.
How can I disable click on dates in "Selecting multiple dates".
Inside my render,
<DayPicker selectedDays={this.state.selectedDays} onDayClick={this.handleMultiDayClick} disabledDays={{ before: this.state.currentDay }} />
I am able to disable days but if I click on disabled dates then they are also added in the state.
I would appreciate the help.
Can you not simply check for disabled dates in your onclick handler and exclude the disabled dates from your selectedDays state object?
handleMultiDayClick(e) {
// check here for disabled dates
if(!disabledDate) {
this.setState({selectedDays: this.state.selectedDays.push(newDate).slice(0)})
}
}
I downloaded react-native-material-calandarview inside my project.
They just give some piece of code to get calendar.
https://github.com/NuclleaR/react-native-material-calendarview.
I used that inside my render().
selectedDates={this.state.dates}......{this.state.dates} it gives undefined.
I need the selected dates array,but i cant get that.
where i get the selected dates???
Help me ASAP.Thanks in advance
The calendar expose you an event function onDateChange, you have just to setState in this event like that:
<Calendar
selectedDates={this.state.dates}
onDateChange={data => {
// Add the data to your state here
// for example:
this.setState(state => { dates: state.dates.push(data.date) });
}}
/>
I'm trying to create events in react-big-calendar by dragging, putting the data in a Tootip form and send a request to server to save it.
Problem after i drag the event the selection disappears: i need it to stay until I submit the event. Right now
it works like this
In the docs/examples they have alert, which of corse stops exection of function and the selection remains the same:
<BigCalendar
selectable
events={events}
defaultView='week'
scrollToTime={new Date(1970, 1, 1, 6)}
defaultDate={new Date(2015, 3, 12)}
onSelectEvent={event => alert(event.title)}
onSelectSlot={(slotInfo) => alert(
`selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
`\nend: ${slotInfo.end.toLocaleString()}`
)}
/>
if i trow and error at the end of onSelectSlot function it stays also open the selection, but then i need to close after I submit.
Use the onSelecting method for dragging a selection this will give you an object with start and end date of the selection { start: Date, end: Date } and make sure to not return false on this method, for more information see the documentation here