Greetings to all. I am trying to create a calendar with department reservation dates. I have followed the example in the SA documentation but I have a problem showing reservations by department. The idea is that each department has a different color and that reservations can be distinguished on the calendar. I have created two JSON files as stated in the documentation (events.json and calendars.json)

events.json
Code:
[
  {
    "id": 1,
    "calendarId": 2,
    "title": "Reserva DEP 2",
    "startDate": "2020-04-07",
    "endDate": "2020-04-09"
  },
  {
    "id": 2,
    "calendarId": 1,
    "title": "Reserva DEP 1",
    "startDate": "2020-04-19",
    "endDate": "2020-04-25"
  },
  {
    "id": 3,
    "calendarId": 2,
    "title": "Reserva DEP 2",
    "startDate": "2020-04-10",
    "endDate": "2020-04-13"

calendars.json
Code:
[
    {
        "calendarId": 1,
        "title": "Dep 1"
    },
    {
        "calendarId": 2,
        "title": "Dep 2"
    },
    {
        "calendarId": 3,
        "title": "Dep 3"
    },
    {
        "calendarId": 4,
        "title": "Dep 4"
    },
    {
        "calendarId": 5,
        "title": "Dep 5"
    },
    {
        "calendarId": 6,
        "title": "Dep 6"
    },
    {
        "calendarId": 7,
        "title": "Dep 7"
    }
]


The store is as follows

Code:
Ext.define('MyApp.store.MyCalendars', {
    extend: 'Ext.calendar.store.Calendars',


    requires: [
        'MyApp.model.MyCalendar',
        'Ext.data.proxy.Ajax'
    ],


    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'MyCalendars',
            autoLoad: true,
            model: 'MyApp.model.MyCalendar',
            eventStoreDefaults: {
                proxy: {
                    type: 'ajax',
                    url: 'resources/events.json'
                }
            },
            proxy: {
                type: 'ajax',
                url: 'resources/calendars.json'
            }
        }, cfg)]);
    }
});


But the result looks like the picture.

Captura de Pantalla 2020-04-14 a la(s) 15.22.48.jpg

All reservations have the same color as the last "calendarId". How can I make each department have its own color and thus be able to distinguish its different reserves?


Thank you