How to attach callback to calendar "opened" event?

Questions
1

Hi all!

Seems like a basic question, but I cannot seem to find a way to attach opened event callback on a list input type type “Calendar”. Interestingly “change” callback can be attached using @calendar:change property but not @calendar:opened. Perhaps no such property event exist?

I’m trying to achieve a simple goal of opening calendar at a certain date if users have not yet set the value previously. One of the way to do it is to check if value is not set at the calendar open time and set it then.

        <f7-list-input
          label="Date Of Birth"
          type="datepicker"
          placeholder="Your Date Of Birth"
          :value="computedDob"
          @calendar:change="updateDobValue"
          @calendar:opened="onCalendarOpened"
        >
          <font-awesome-icon
            slot="media"
            :icon="['fas', 'birthday-cake']"
            size="2x"
          />
        </f7-list-input>

JS:

 onCalendarOpened: function(calendar) {
        console.log(`EditDobPopup:onCalendarOpened: this.computedDob: ${this.computedDob}, calendar: `, calendar);
        if (this.computedDob === null) {
          const now = new Date();
          const past = now.setFullYear(now.getFullYear() - 30);
          calendar.setValue([past]);
        }
      }
2

There is no calendar events on list input https://framework7.io/vue/inputs.html#input-events

<f7-list-input
...
:calendar-params="{on: { opened: onCalendarOpened }}"
>
3

Fantastic, thanks @nolimits4web!
I was able to open the calendar at specific year month using calendar.setYearMonth(year, month, duration) in the listener. Just for the sake of completeness, is going via opened listener the proper way to open calendar at a specific year/month (without setting a value) or there exists a shorter way such as a component property?

EDIT:
It seems that if opened event listener is added then it causes @calendar:change event not being called. Before adding :calendar-params="{on: { opened: onCalendarOpened }}" property it worked fine and continues if its removed. But as soon as I add it then change listener (updateDobValue) stops being called when users select a date.

 <f7-list-input
          label="Date Of Birth"
          type="datepicker"
          placeholder="Your Date Of Birth"
          :value="computedDob"
          :calendar-params="{on: {
            opened: onCalendarOpened
          }}"
          @calendar:change="updateDobValue"
        >
          <font-awesome-icon
            slot="media"
            :icon="['fas', 'birthday-cake']"
            size="2x"
          />
</f7-list-input>

...
   onCalendarOpened: function(calendar) {
        console.log(`EditDobPopup:onCalendarOpened: this.computedDob: ${this.computedDob}, calendar: `, calendar);
         if (this.computedDob === null) {
           const now = new Date();
           calendar.setYearMonth(now.getFullYear() - 30, now.getMonth(), 3000);
         }
      },
     updateDobValue: function (newDob) {
        console.log(`EditDobPopup:updateDobValue: newDob:`, newDob);
        this.dob = newDob[0];
      },
...
4

Move it to on change event like so:

<f7-list-input
          label="Date Of Birth"
          type="datepicker"
          placeholder="Your Date Of Birth"
          :value="computedDob"
          :calendar-params="{on: {
            change: (c, value) => updateDobValue(value)
            opened: onCalendarOpened
          }}"
        >
          <font-awesome-icon
            slot="media"
            :icon="['fas', 'birthday-cake']"
            size="2x"
          />
</f7-list-input>
1 Like
5

Worked like a charm. Thanks!