How to configure AgendaView ranges

[rstern]

Hi,

The AgendaView offers a floating settings button to allow the user to change the range type.

Is there a way to constrain the ranges displayed in this floating settings button?

Thanks, Ralf

[marcio]

Hey rstern,

Currently, we don't support that programmatically, but I created a ticket to add that configuration. What you can do if you want some options to not be displayed is to add some CSS with display none to the options that you don't want to be there.

https://github.com/bryntum/support/issues/4961

[Animal]

You can do this. See https://www.bryntum.com/docs/calendar/api/Calendar/widget/EventList#property-listRangeMenu

I can improve the docs there.

It returns a Menu configuration object which creates the menu that you see which has this form:

{
    items : {
        listRangeDayItem    : {... config for the DAY range menu item },
        listRangWeekItem    : {... config for the WEEK range menu item },
        listRangMonthItem   : {... config for the MONTH range menu item },
        listRangeYearItem   : {... config for the YEAR range menu item },
        listRangeDecadeItem : {... config for the DECADE range menu item }
    }
}

I've added to the docs for the next version. They will look like this:

Screenshot 2022-07-21 at 07.54.45.png (176.51 KiB) Viewed 631 times

You can create an AgendaView subclass which overrides get listRangeMenu(), calls super, to get the result and then just delete properties from that items object, then return the result.

[rstern]

Thanks for opening this issue, macio! And thanks for the solution, Animal. That sounds good. But how would I include the custom AgendaView in the calendar config?

const calendar = new Calendar({
  mode: 'week',
  modes: {
    agenda: {
      ?
    },

[rstern]

Ah, found it:

modes: {
    agenda: null,
    custom_agenda: {
      weight: 1,
      title: 'Agenda',
      range: 'day',
      type: CustomAgendaView,
    },
    …

Unfortunately, overriding this property does not work in TypeScript though. A plain JS file works. A config option would still be good. Thanks again!

[Animal]

You mean modes does not accept arbitrary names for the desired modes? That is bad. They can be anything you want. We provide defaults, but it should be flexible for this very purpose.

[Animal]

In fact, you can use standard mode names, but override the type which is a string registered in your class definition using this in the class body.

    // Factoryable type name
    static type = 'singledayagenda'

And this at the bottom of the file:

// Register this class with the widget factory
TheActualClassName.initClass();

That registers the defined type that you defined as mapping to that class. So you would then use

modes : {
    agenda : {
        type : 'singledayagenda'
    }
}

And it will instantiate your class as the agenda view.

[rstern]

Thank you, that's much better!