Bug: Scroll in agenda with controlled component


When using the eventCalendar as a controlled component (React) and scrolling in the agenda it will fight your scroll and scroll back to date-labels when passing it. The reason for it is that _shouldSkipScroll is set to true in the scroll handler as it should but then it is set back to false in the _updated function.

My working quick fix is to add:

setTimeout(() => {
this._shouldSkipScroll = true;
}, 0);

To the scroll handler in eventcalendar.ts at about line 711

Minimal repro:

const CalendarAndAgenda = ({ events /* many events */ } : { events: any}) => {
const [selected, setSelected] = useState(() => new Date());

return (
onSelectedDateChange={({ date }) => setSelected(date as Date)}
calendar: {
type: ‘week’,
agenda: {
type: ‘month’,

And then scroll in the agenda view with mousewheel.

Hi David,

Thank you for the heads up! I just created the bug report for this, we will let you know as soon as there’s a progress with it.

Hello @David_Erenger :wave:

Good news: we have shipped Mobiscroll 5.15.1, where we fixed an issue where the agenda scroll was jumping, if selectedDate was used in controlled mode in React.

Here you can find a guide of how you can update the Mobiscroll version to the latest: Update guide on the latest version of Mobiscroll for plain JS, jQuery, Angular, Ionic and React.

Nice, this looks to solve it!