How to open the eventBubble onDayChange

Event calendars & schedulers
1

Hey there,

I’d love some help here.

I’m trying to trigger a custom action onDayChange in the EventCalendar (React). When the day is selected I need to change the URL. However, if I implement the onDayChange event, the eventBubble no longer shows up. How can I implement a custom onDayChange event and also have the eventBubble show when the day is clicked?

onDayChange={(event, inst) => {
               history.push(
                `/${getOrgId()}/${getLocationId()}/events/day/${moment(
                  event.date
                ).format("YYYY-MM-DD")}`
              );
            }}

Thanks

2

Hi there!

The problem is probably that you are using an inline function and every time the calendar re-renders, there will an option call and that’s why the event bubble closes. Here is your solution:

// in case you're using class component
onDayChange = (event, inst) => { ... }

onDayChange={this.onDayChange}


// in case you're using functional component
const myChange = useCallback((event, inst) => { ... }, []);

<mobiscroll.Calendar onDayChange={myChange} />
3

Hi Gabi,

Thanks for your reply. Unfortunately that didn’t help :(.

const handleOnDayChange = (event, inst, history) => {
  history.push(
    `/${getOrgId()}/${getLocationId()}/events/day/${moment(event.date).format(
      "YYYY-MM-DD"
    )}`
  );
};

 <mobiscroll.Eventcalendar
                      ref={calendarRef}
                      display="inline"
                      calendarHeight={containerRef.current.clientHeight - 210}
                      lang={"hr"}
                      enhance
                      view={{ calendar: { type: "month", labels: true } }}
                      eventsText={"termina"}
                      eventText={"termin"}
                      data={events}
                      weekDays={"min"}
                      onDayChange={(event, inst) =>
                        handleOnDayChange(event, inst, history)
                      }
                    />

In the example above, if I remove the onDayChange event, the bubble shows, but if I keep it it doesn’t. Any other ideas?

Thanks,
Ivana

4

Hi there,

Could you please try the following:

const handleOnDayChange = (event, inst, history) => {
  history.push(
    `/${getOrgId()}/${getLocationId()}/events/day/${moment(event.date).format(
      "YYYY-MM-DD"
    )}`
  );
};

dayChange = (event, inst) => {
	handleOnDayChange(event, inst, history)
}

<mobiscroll.Eventcalendar
  ref={calendarRef}
  display="inline"
  calendarHeight={containerRef.current.clientHeight - 210}
  lang={"hr"}
  enhance
  view={{ calendar: { type: "month", labels: true } }}
  eventsText={"termina"}
  eventText={"termin"}
  data={events}
  weekDays={"min"}
  onDayChange={this.dayChange}
/>