Filtering events in CalEvents

[sidouglas]

Question:

Might not be possible but the only way I could get around it is inserting a dummy element (p) into CalEvents to prevent the default props.showEvents v-for from rendering.
The example only shows events in a given month, and for a selected day.

data:

{"events":[{"title":"title 1","date":"2018\/03\/20 12:27:21","categories":"OC"},{"title":"title 2","date":"2018\/03\/21 12:27:21","categories":"DB"},{"title":"title 3","date":"2018\/03\/23 12:27:21","categories":"OC"},{"title":"title 4","date":"2018\/04\/11 12:27:21","categories":"OC"}]}

<template>
  <div>
    <vue-event-calendar
        :title="title()"
        :events="events"
        @day-changed="handleDayChange"
        @month-changed="handleMonthChange"
        ref="calendar"
    >
      <p>without this default rendering happens</p>
      <div v-for="(event,index) in filteredEvents" class="event-item" :key="index">
        <div class="wrapper">
          <h3 class="title">{{event.title}}</h3>
          <p class="time">{{event.date}}</p>
          <p class="desc">{{event.categories}}</p>
        </div>
      </div>
    </vue-event-calendar>
  </div>
</template>

export default {
    computed: {
      filteredEvents () {
        return this.selectedDay
          ? this.selectedDay
          : this.events.filter((event) => {
            const eventMonth = new Date(event.date).getMonth()
            if (eventMonth === this.activeMonthNumber()) {
              return event
            }
          })
      }
    },
    data: () => ({
      selectedDay: null,
    }),
    props: {
      events: Array
    },
    methods: {
      activeMonthNumber () {
        return this.$refs.calendar
          ? this.$refs.calendar.calendarParams.curMonth
          : new Date().getMonth()
      },
      handleDayChange ({events}) {
        this.selectedDay = events
        this.events = this.events.slice(0)
      },
      handleMonthChange () {
        this.selectedDay = null
        this.events = this.events.slice(0)
      },
      title () {
        let humanMonth = this.activeMonthNumber() + 1
        const date = new Date(`${humanMonth}/01/2000`)
        return date.toLocaleString('en-US', {month: 'long'})
      },
    }
  }

[GeoffZhu]

Filtering events is not support yet, pr welcome.

But, your demo is a bright way for filtering events in this CalEvents.

[sidouglas]

I'll raise a PR of how I managed to do it, it can be an example that I will stick in your demos directory. Thanks.