[REACT] Responsive config for modes not working

[mackopperfield]

Hello,

I'm attempting to have a couple different behaviors based on screen sizes.

1. Default to a different resource view granularity (week vs day type) based on screen size. The below code seems to have no effect though, the default week view is always applied no matter the screen size. I've tried setting some when values but that didn't change anything.

  autoCreate: {
      gesture: "click",
      duration: "2 hours",
  },
  modes: {
    day: true,
    week: true,
    resource: {
        type: "resource",
        title: "Employee",
        monitorResize: true,
        view: {
          autoCreate: {
            gesture: "click",
            duration: "2 hours",
          },
        },
        responsive: {
          small: {
            view: { type: "day" },
          },
          medium: {
            view: { type: "day" },
          },
          large: {
            view: { type: "week" },
          },
        },
    },

Something probably also worth noting is that the resource view doesn't seem to respect top level autoCreate settings, it has to be re-specified in it's config.

2. Default to a different mode on initial load entirely based on screen size. I can't figure out if there's a way to do this with Bryntum. I suppose when initially rendering the Calendar I could check the screen size myself and set the mode in the props. Just wanted to check if there was a more Bryntum-y way.

Appreciate any guidance, thanks!

[Animal]

The non-propagation ot autoCreate is an easy one: https://github.com/bryntum/support/issues/9752

The syntax you used is wrong. It's the type of the view that is specified to the resourceView that needs to be fixed. Responsive inside the created view cannot change its own type on the fly.

so configure the Calendar:

    responsive : {
        '*' : {
            modeDefaults : {
                view : {
                    type : 'day'
                }
            },
            mode : '<small/medium mode>'
        },
        large : {
            view : {
                type : 'week'
            },
            mode : '<large mode>'
        }
    }