[F7-VUE] Calendar events in global app params

Questions
1

Hello,
I am having an issue with events of calendar instanced in app.vue.
This is my calendar:

        calendar: {
        dateFormat: 'dd.mm.yyyy',
        backdrop: true,
        footer: true,
        cssClass: 'mf-calendar',
        renderToolbar: function () {
          return '<div class="toolbar mf-calendar no-shadow">' +
            '<div class="toolbar-inner">' +
            '<div class="left">' +
            '<a href="#" class="link icon-only calendar-prev-month-button"><i class="icon icon-back color-black"></i></a>' +
            '</div>' +
            '<div class="center display-flex"><a class="current-month-value link"  ></a><a class="current-year-value link"></a></div>' +
            '<div class="right" >' +
            '<a href="#" class="link icon-only calendar-next-month-button"><i class="icon icon-forward"></i></a>' +
            '</div>' +
            '</div>' +
            '</div>';
        },
        on: {
          opened: function () {
            console.warn ('Calendar opened');
          },
          init(c) {
            console.warn ('calendar', c);
          }
        }

All works well except the events. The console.warn are never fired.
Am I doing something wrong or I missed something?
Thanks

2

And how/where do you open the calendar(s)?

3

I open the calendars in other components inside app.vue and this is how I open them

 <f7-list-input  :value="date" @calendar:change="(values) => date.splice(0,1,...values)" type="datepicker" label="Label" placeholder="placeholder" :calendar-params="calendarParams()"></f7-list-input>

The console.warn are not fired up if I use or not use :calendar-params="calendarParams()" , but how I said before, other params like renderToolbar works well

4

I think it can overriden inside of component. If you want to hook globally for all calendar events, then you can listen it like so:

this.$f7.on('calendarOpen', () => {
  console.log('calendar opened');
});
5

Thanks!
Another question. Is it possible to create a custom event for the calendar instance, to use like @calendar:change?
For example @calendar:button-clicked.
Thanks again

@nolimits4web