FullCalendar 4.0 within a Vue application

Question

I am using fullCalendar v4.0 with no jquery. I have initialized it like this

<div id="calendar"></div>

In data object I have this.

    calendar: null,
    config: {
      plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
      axisFormat: 'HH',
      defaultView: 'timeGridWeek',
      allDaySlot: false,
      slotDuration: '00:60:00',
      columnFormat: 'dddd',
      titleFormat: 'dddd, MMMM D, YYYY',
      defaultDate: '1970-01-01',
      dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      eventLimit: true,
      eventOverlap: false,
      eventColor: '#458CC7',
      firstDay: 1,
      height: 'auto',
      selectHelper: true,
      selectable: true,
      timezone: 'local',
      header: {
        left: '',
        center: '',
        right: '',
      },
      select: (event) => {
        this.selectCalendar(event)
      },
      header: false,
      events: null
    }
  }

while having a calendar in data variable, Now I can render() and destroy() it from anywhere. But I am having an issue for handling Calendar events:

Such as

  select: (event) => {
    this.selectCalendar(event)
  }

I have defined another method in methods: {} as selectCalendar() to call it in select but I am getting an error as

Uncaught TypeError: Cannot read property 'selectCalendar' of undefined

I want to do few operations on select, eventClick, eventDrop, eventResize, but I am unable to call a method within the config.

Also is there any way possible to define select or any method as

select: this.selectCalendar

So that it will just straight send an event to the defined method?

I have tried vue-fullcalendar but it doesn't work for my cause. Any help will be thankful.

Vue v.2.5.21

score 1 · Answer 1 · answered Mar 28 '19 at 08:36

1

I am using vue full calendar, you can handle event of fullcalendar like code below

  <full-calendar :event-sources="eventSources" @event-selected="myEventSelected"></full-calendar>


export default{
    methods:{
    caculateSomething(event){
        //do st here
    },
    myEventSelected(event){
        //do st here
      this.caculateSomething(event)
      console.log(event)
    }
  }
}

answered Mar 28 '19 at 08:36

DeadToy

11
3

Thanks but this not what I asked in question :) – Junaid Farooq Mar 29 '19 at 01:52

score 1 · Accepted Answer · answered Mar 29 '19 at 02:02

This is how I sorted this out.

in html <div id="calendar"></div>

in your data() => {}

calendar: null,
config: {
  plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
  axisFormat: 'HH',
  defaultView: 'timeGridWeek',
  allDaySlot: false,
  slotDuration: '00:60:00',
  columnFormat: 'dddd',
  columnHeaderFormat: { weekday: 'short' },
  defaultDate: '1970-01-01',
  dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  eventLimit: true,
  eventOverlap: false,
  eventColor: '#458CC7',
  firstDay: 1,
  height: 'auto',
  selectHelper: true,
  selectable: true,
  timezone: 'UTC',
  header: {
    left: '',
    center: '',
    right: '',
  },
  header: false,
  editable: true,
  events: null
}

Don't define any select, resize or dropEvent in config for the first time, but then the part where you are going to render the calendar do something like this

    if (this.calendar == null) {
      console.log(this.schedule)
      let calendarEl = document.getElementById('calendar');

      let calendarConfig = this.config

      let select = (event) => {
        this.selectCalendar(event)
      }

      let eventClick = (event) => {
        this.clickCalendar(event)
      }

      let eventDrop = (event) => {
        this.dropCalendar(event)
      }

      let eventResize = (event) => {
        this.resizeCalendar(event)
      }

      calendarConfig.select = select;
      calendarConfig.eventClick = eventClick;
      calendarConfig.eventDrop = eventDrop;
      calendarConfig.eventResize = eventResize;

      this.calendar = new Calendar(calendarEl, calendarConfig);
      this.calendar.render();

      this.renderEvents()
    }

Now you can handle those events of FullCalendar in your own methods.

Also having the calendar in this.calendar gives you the power to destroy it from anywhere, in the methods: {}

In FullCalendar 4.0 things have been changes but quite simpler.

these are the methods attached to FullCalendar Events

  selectCalendar(event) {
    this.calendar.addEvent(event)
  },

  clickCalendar(event) {
    if (window.confirm("Are you sure you want to delete this event?")) {
      let findingID = null
      if (event.event.id === "") {
        findingID = event.el
      } else {
        findingID = event.event.id
      }
      let removeEvent = this.calendar.getEventById( findingID )
      removeEvent.remove()
    }
  },

  dropCalendar(event) {

  },

  resizeCalendar(event) {

  },

  destroyCalendar() {
    if (this.calendar != null) {
      this.calendar.destroy();
      this.calendar = null
    }
  }

when an event is added by you. You can find it through el in an event, but the custom events should have a unique ID. through which you will find and delete it.

FullCalendar 4.0 within a Vue application

2 Answers2