render() {
const events = [];
this.props.appointments.map(appointment => {
events.push({
start: appointment.start,
end: appointment.end,
title: appointment.title ? appointment.title : "booked",
allDay: true
})
})
return (
<div className="calendar-container">
<Calendar
views={['month']}
selectable="ignoreEvents"
localizer={this.localizer}
events={events}
onSelectSlot={(slotInfo) => this.props.selectSlot(slotInfo)}
/>
</div>
)
}
Both my seeded events and newly created events show up on the calendar, but they are highlighted on the calendar 1 day early. For example, here is one seed:
Appointment.create!({
listing_id: crystal_lake.id,
user_id: user.id,
start: "2019-11-05",
end: "2019-11-07",
num_guests: 2)}
I can create an event successfully with this but within the calendar, the dates 11-04 through 11-06 are highlighted
When I create an event in the component, I have it display the start and end days outside of the calendar and they are correct, but on the calendar, the same thing happens.
I'm not even sure what code to share because I think it's something to do with the library source code and I have no idea where to look. Any help would be much appreciated