React-big-calendar: Update docs

Created on 17 Aug 2017  路  4Comments  路  Source: jquense/react-big-calendar

The docs contain no example of what an event object looks like. I shouldn't have to root through the codebase to know what an event should look like.

Most helpful comment

The event doesn't need to be a specific shape, but yes RBC does need date objects for start and end times. We try to make that clear, but if you have an specific suggestions please PR them. for the above you can do:

startAccessor={(event) => new Date(event.start.dateTime))
endAccessor={(event) => new Date(event.end.dateTime))

All 4 comments

The docs try and be clear that it doesn't care what the event looks like. RBC doesn't prescribe anything in terms of what the event object should have or contain, its completely (and intentionally) agnostic to your data shapes. Which is all to say the event object looks like whatever you want.

Rather then specifying what the object looks like RBC has accessor functions that pull the data it needs from the event how ever you want. e.g. startAccessor: (yourEvent) => yourevent.startMoment.toDate() takes you event with the moment field 'startMoment' and returns a date object

It does have some preference in the data shape when it comes to date, though. For example, a non-recurring Google Calendar event comes back from the API like this:

{
"kind": "calendar#event",
"etag": ""2986101055122000"",
"id": "41v22peggj4ecdc28f6jpvkp7s",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=xxx",
"created": "2017-04-24T16:15:27.000Z",
"updated": "2017-04-24T16:15:27.561Z",
"summary": "summary",
"description": "description",
"location": "location",
"creator": {
"email": "[email protected]"
},
"organizer": {
"email": "[email protected]",
"displayName": "Resources",
"self": true
},
"start": {
"dateTime": "2017-08-30T11:00:00-04:00"
},
"end": {
"dateTime": "2017-08-30T17:00:00-04:00"
},
"transparency": "transparent",
"iCalUID": "[email protected]",
"sequence": 0
}

The start and end times have to be extracted out, which is fine, but it'd be good knowing that.

The event doesn't need to be a specific shape, but yes RBC does need date objects for start and end times. We try to make that clear, but if you have an specific suggestions please PR them. for the above you can do:

startAccessor={(event) => new Date(event.start.dateTime))
endAccessor={(event) => new Date(event.end.dateTime))

React-Table has amazing docs and should be used as an inspiration for many large React components. https://react-table.js.org

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Beyazatli picture Beyazatli  路  3Comments

KatiaPosPago picture KatiaPosPago  路  3Comments

gsavvid picture gsavvid  路  3Comments

kweisamx picture kweisamx  路  4Comments

mathieusanchez picture mathieusanchez  路  4Comments