Agenda Using event.firstDay in the Past

Event calendars & schedulers
1

I have picked up support of an existing application that uses Mobiscroll but I have little experience with the product. We have a Calendar view that displays events for a specific day and a button that enables the user to switch from the Calendar view to an Agenda view.

If the date selected in the Calendar view is the current date or a date in advance then when switching to the Agenda view it displays any events where the start date is greater than or equal to the current date for a period of 90 days (which we define), which is correct.

However if the date selected in the Calendar view is prior to the current date then when switching to the Agenda view it displays no events and on investigating it appears that the event.firstDay in the onChangePage event is set to a date which appears to be 3 months prior to the current date and No Events are being displayed? I am not sure what influences the setting of the event.firstDay but it appears that this is having an influence on the events that are displayed in the Agenda view.

I would like the event.firstDay to always be the current date so that what is displayed in the Agenda view is all events that are happening from today for a period of 90 days in the future.

2

Hi @Tim_Bird

Welcome to the world of Mobiscroll :slight_smile: I hope your journey will be as pleasant as it can be.

I will need a few lines of code to understand fully what’s going on. Can you share what options are used with the eventcalendar and how the switching from the calendar view to the agenda is implemented?

3

Hi

This is the code for rendering the Calendar:
<Eventcalendar
data={this.props.data}
onEventClick={(event) => {
this.loadBooking(event.event);
}}
onPageChange={(event) => {
this.setState(
{
currentRange: {
start: event.firstDay,
end: new Date(event.lastDay - ONE_DAY_IN_MILLIS),
},
},
this.doUpdate
);
}}
onSelectedDateChange={(e) =>
this.setState({
currentDate: moment(e.date),
})
}
renderHeader={this.renderMyHeader}
renderResource={this.renderMyResource}
resources={
this.props.data.length > 0 ? this.props.rooms : null
}
selectedDate={this.state.currentDate}
view={views[this.state.view]}
renderScheduleEvent={this.myScheduleEvent}
renderEventContent={this.renderEventContent}
/>

And this is how we switch to the agenda view:-

<Button
onClick={() => {
if (this.state.view === ‘agenda’) {
this.setState({
view: ‘day’,
enabledStates: this.props.isAdmin
? [
IN_PROGRESS.id,
NEW.id,
ACCEPTED.id,
UNAVAILABLE.id,
]
: states.map((s) => s.id),
});
} else {
this.setState({
view: ‘agenda’,
enabledStates: this.state.enabledStates.filter(
(enabledId) => enabledId !== ACCEPTED.id
),
});
}
}}
variant={
this.state.view === ‘agenda’ ? ‘primary’ : ‘light’
}
>

I hope this helps, let me know what else you need?

4

Hi Tim,

Thanks for the code!

So far I wasn’t able to reproduce this problem.

If this is still a relevant question can you also share your views object as well?