FullCalendar switch events by user in vuejs

Question

I have configured fullcalendar in vuejs, events of 3 members now i want to show hide users events on click.

Normal jQuery working perfect but i am new on vuejs so don't have idea how to do that.

$('#mycalendar').fullCalendar({
    events: [
        {
            title: 'Event 1',
            start: '2015-05-01',
            school: '1'
        },
        {
            title: 'Event 2',
            start: '2015-05-02',
            school: '2'
        },
        {
            title: 'Event 3',
            start: '2015-05-03',
            school: '1'
        },
        {
            title: 'Event 4',
            start: '2015-05-04',
            school: '2'
        }
    ],
    eventRender: function eventRender( event, element, view ) {
        return ['all', event.school].indexOf($('#school_selector').val()) >= 0
    }
});

$('#school_selector').on('change',function(){
    $('#mycalendar').fullCalendar('rerenderEvents');
})

This is my vue component this vuejs component get all the posts but not able to filter run eventRender method

<script>
    import VPopover from 'vue-js-popover';
    Vue.use(VPopover, { tooltip: true});
    import FullCalendar from 'vue-full-calendar';
    Vue.use(FullCalendar);

    import team from './team'

    export default {
        data() {
            return {
                events: [],
                eventRender: function eventRender( event, element, view ) {
                    return ['all', event.account_id].indexOf('5c50d7dbf0491c3935d94eda') >= 0
                },
                config: {
                    defaultView: 'month',
                    editable: false,
                    timeFormat: 'h(:mm) a',
                    eventLimit: 4,
                    eventTextColor: 'white',
                    eventClick: function(event) {
                        if (event.url) {
                        location.replace(event.url);
                        return false;
                        }
                    }
                }
            }
        },
        components: {
          team  
        },
        mounted: function() {
            this.getReminders();
        },
        methods: {
            getReminders: function() {
                var url;
                var accountID=[];
                axios.get(route('calendar.reminders'))
                .then((response) => {
                    console.log(response.data);
                    $(response.data).each((i,data) => {
                        if(data.subscriber_uid != "")
                            url = 'contacts/list/'+data.list_uid+'/contact/'+data.subscriber_uid;
                        else
                            url = null;

                        if(typeof accountID[data.accountID] === 'undefined')
                            accountID[data.accountID] = this.getRandomColor();

                        this.events.push({
                            title  : data.reminder_type.name+", "+data.notes,
                            start  : data.deadline,
                            description : data.notes,
                            url: url,
                            backgroundColor: accountID[data.accountID],
                            account_id: data.accountID
                        });
                    });
                });
            },
            getRandomColor: function() {
                var letters = '0123456789ABCDEF';
                var color = '#';
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }
        }
    }
</script>

I want to add a function which pass key to that method to hide other events.

Answer 1

OK, so I've come up with a possible solution for you, and we're going to need a few things here:

1. Set up a specific watch on component level, for invoking the original API (rerenderEvents) with fireMethod;
2. Customize the eventRender callback with our new logic (a predicate returning boolean for the event items toggling);

---

Calendar.vue component

<template>
  <full-calendar
    ref="calendar"
    :config="config"
    :events="events">
  </full-calendar>
</template>

<script>
  // Your other imports here

  export default {
    name: 'Calendar',

    data() {
      // Keep a reference to this Vue instance
      const vm = this;

      return {
        events: [
          // Your event items here
        ],

        config: {
          defaultView: 'month',

          eventRender(event, element) {
            // Returning false here will completely cancel the rendering of the event
            // so we could do our "filtering" here.
            return vm.eventFilter(event, element);
          }
        },

        // Our customizable filter. Defaults to returning true 
        // for proceeding with the normal rendering of the events.
        // We will re-assign this with our custom callback later.
        eventFilter: (evt, el) => true
      };
    },

    watch: {
      eventFilter() {
        // When an event filtering is requested by parent component
        this.$refs.calendar.fireMethod('rerenderEvents');
      }
    }
  };
</script>

index.html (or your view page)

<div id="app">
  <label>Enter an Account ID: </label>
  <input type="text" v-model="accountId" />

  <button @click="searchAccount">Search</button>

  <Calendar ref="calendar" />
</div>

index.js

import Vue from 'vue';
import FullCalendar from 'vue-full-calendar';
import Calendar from './components/Calendar';
import 'fullcalendar/dist/fullcalendar.min.css';

Vue.use(FullCalendar);

new Vue({
  el: '#app',

  data() {
    return {
      accountId: 0
    }
  },

  methods: {
    searchAccount() {
      // Here is where we do our custom, filtering logic
      this.$refs.calendar.eventFilter = (event, el) => {
        return ['all', event.account_id].indexOf(this.accountId) > -1;
      }
    }
  },

  components: {
    Calendar
  }
});

With all those in place, try entering an account ID and hit the search button; that should show/hide the calendar event items based on the specified ID.

Full working demo on CodeSandbox (with different data but similar approach).

---

Hope that helps.