[VUE 3] custom events filter on sidebar

[mrpotts]

Hello team,
I need to filter events via a custom field I've added to the event model. That field is a booelan, so I'd like to put a checkbox in the sidebar to filter events where that field equals true.
I understand I should leverage on the eventStore to do that, but it seems the configuration object doesn't have access to the calendar instance. Is it the right approach, or are there other ways?

This is a sample of what I'm trying to do:

<script setup>
import { reactive } from 'vue';
import { EventModel } from "@bryntum/calendar";
import type { BryntumCalendarProps } from "@bryntum/calendar-vue-3";

class AppEventModel extends EventModel {
  declare title: string;    

  declare isPublic: boolean;

  static override get fields() {
    return [
      { name: "name", dataSource: "title" },
      { name: "isPublic", type: "boolean" },
    ];
  }
}

const calendarConfiguration: BryntumCalendarProps = {
  crudManager: {
    transport: {
      load: {
        url: "./data/data.json",
      },
    },
    eventStore: {
      modelClass: AppEventModel,
    },
    autoLoad: true,
  },
  sidebar: {
    items: {
      showPublished : {
        weight : 200,
        type   : 'slidetoggle',
        label  : 'Test filter',
        onChange : (value) => {
          console.log('toggle value', value.checked)
          console.log('main obj', calendar.eventStore); // <-- calendar is undefined!
        },
      },      

    }
  }
}

const calendarConfig = reactive(calendarConfiguration);
</script>
<template>
  <div class="calendar-wrapper">
    <bryntum-calendar
      v-bind="calendarConfig"
    />
  </div>
</template>

Can you help me?

[alex.l]

Hi, not sure about the context of your method, try

const calendar = this.up('calendar')

Or get source from params and invoke source.up('calendar')

[mrpotts]

Thank you, you put me on the right track. This is how I solved, for those who might be interested:

        onChange : ( { checked, source } ) => {
          const calendar = source.up('calendar')
          if (checked) {
            calendar.eventStore.filter({
              id       : 'eventPublicFilter',
              filterBy : event => event.isPublic === true
            })
          } else {
            calendar.eventStore.removeFilter('eventPublicFilter');
          }
        },

[mats]

Thanks for sharing your solution!