[ANGULAR] Is there any way to set the mode of bryntum calendar in angular?

[braincept]

Hi Team,

We are trying to set the mode of bryntum calendar in angular but unfortunately, we are not able to see the way to do it.

Our requirement is to store the selection of mode in localstorage and whenever the user reloads the page then the user should be able to see the same view. For example: If the user has selected the "week" view then we should be able to set the week view.
If the user is selecting the "month" view then we should be able to show the month view.

Right now the user is seeing a week view everytime.

<bry-calendar
      [tbar]="tbar"
      [sidebar]="sidebar"
      [resources]="finalResources"
      [eventEditFeature]="features.eventEdit"
      [eventTooltipFeature]="features.eventTooltip"
      [date]="selectedDate"
      [modes]="modes"
      [scrollable]="true"
      (onCalendarEvents)="onCalendarEvents($event)"
    ></bry-calendar>

Best Regards,
Braincept Team

[alex.l]

Hi braincept,

Please use https://bryntum.com/docs/calendar/#Calendar/view/Calendar#property-mode

This property will be available on calendar.calendarInstance.

In your wrapper you can configure the initial value like:

<bry-calendar
      [tbar]="tbar"
      [sidebar]="sidebar"
      [resources]="finalResources"
      [eventEditFeature]="features.eventEdit"
      [eventTooltipFeature]="features.eventTooltip"
      [date]="selectedDate"
      [modes]="modes"
      [mode]="year"  // <--- here
      [scrollable]="true"
      (onCalendarEvents)="onCalendarEvents($event)"
</bry-calendar>

All the best,
Alex

[braincept]

Hi Alex,

mode property is not available in the bryntum calendar wrapper. Please look at the screenshot.

But we can add

@BryntumConfig() @Input() mode: string;

code in the wrapper to make it work.

[alex.l]

Hi braincept,

Yes, that's exactly that needs to be done here. I will fix it in our codebase as well.

Thanks,
Alex

[braincept]

Thanks Alex! Workaround is implemented, feel free to close this thread