[REACT] How to set the gap value between itemRenderers

[jeff.wang]

Hi,

How to set the gap value between itemRenderers like below:

Thank you!

Jeff

[tasnim]

Here is how you can achieve it:

modes : {
	month : {
		eventSpacing : 5
	}
}

if you change it dynamically in a running app, then you have to call refresh like so:

calendar.refresh();

[jeff.wang]

Hi,

It is effect.

Thank you!

Jeff

[jeff.wang]

In addition, How to get the MonthView reference, I want to do monthView.refresh().

[tasnim]

You can do it like this

calendar.activeView.refresh();

[Animal]

In the next release this will be a dynamic config. If you set the eventSpacing on a running view, it will adjust immediately.

And it will be documented in an expected place:

Screenshot 2022-06-28 at 09.54.26.png (40.25 KiB) Viewed 376 times

[jeff.wang]

how can i get the calendar reference? the code like below:

        <div className={cx('calendar-view-container')} id="calendarContainer">
          <BryntumCalendar
            ref={this.calendarRef}
            {...projectModel}
            {...calendarConfig}
          />
        </div>

this.calendarRef.current has not func refresh()
or this.calendarRef?.current?.activeView?.refresh(), activeView is null

[Animal]

You don't have to call refresh unless you are changing the eventSpacing dynamically, that is on an already rendered Calendar.

[jeff.wang]

I want to refresh it sometimes, since it is no change sometimes, if there are many eventRenderers in same day, if the order has change in projectModel , but the order of eventRenderer in cell are not change.

[tasnim]

Please check this https://bryntum.com/docs/calendar/guide/Calendar/integration/react/guide#accessing-the-bryntum-calendar-instance

This one shows how to access calendar instance. After accessing it do this to refresh

calendarInstance.activeView.refresh()