title: How can I bind an array object to FullCalendar events?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('full-calendar', {
      template: '&lt;div ref="calendar"&gt;&lt;/div&gt;',
      props: {
        tasks: {
          type: Array, 
          required: true
        },
  
        newtask: Object
      },
      watch: {
          tasks: function (task) { 
              
              // this.tasks.push(task);
              // this.cal.calendar.addEvent({
              //     title: task.title,
              //     start: task.start,
              //     end: task.end
              //  });
              
  
               $("#addTaskModal").modal('hide');
  
      }},
      data () {
        return {
          cal: null
        }
      },
  
      methods: {
  
          init:function(){
  
              var self = this;
          self.cal = $(self.$refs.calendar);
      
        var args = {
          firstDay: 1,
          lang: 'en',
          header: {
              left: 'prev,next today',
              center: 'title',
              right: 'addTaskButton / dayGridMonth,timeGridWeek,listMonth'
          },
          height: "auto",
          allDaySlot: false,
          slotEventOverlap: false,
          timeFormat: 'HH:mm',
          plugins: ["interaction", "dayGrid"],
          eventLimit: true,
          events: this.tasks,
          
          dateClick: function(date)
            {
                self.$emit('date_clicked', date);
                console.log('date clicked');
                console.log(this);
          },
    
          eventClick: function(event)
            {
                    self.$emit('event_clicked', event);
            },
  
            customButtons: {
              addTaskButton: {
                  text: 'Add Task',
                  click: function() {
                      $("#addTaskModal").modal('show');
                  }
              }
          }
        }
        
        if (self.editable)
        {
          args.editable = true;
          args.eventResize = function(event)
          {
            self.$emit('event::resized', event);
          }
          
          args.eventDrop = function(event)
          {
            self.$emit('event::dropped', event);
          }
        }
        
        if (self.droppable)
        {
          args.droppable = true;
          args.eventReceive = function(event)
          {
            self.$emit('event::received', event);
          }
        }
        
        self.cal.calendar = new FullCalendar.Calendar(self.$el,args);
  
        self.cal.calendar.render();
          }
  
  
      },
      mounted () {
  
          this.init(); 
      }
      
    })
    
    let vm = new Vue({
      el: '#app',
  
      data () {
         return {
            tasks: [
               {
                  title: 'Event1',
                  start: '2019-05-10 12:30:00',
                  end: '2019-05-10 16:30:00'
               },
               {
                  title: 'Event2',
                  start: '2019-05-07 17:30:00',
                  end: '2019-05-07 21:30:00'
               }
            ],
            editable: false,
            selectedDate : moment().format('DD-MM-YYYY'),
            task: {
              title:null,
              start: '2019-05-07 17:30:00',
              end: '2019-05-07 21:30:00'
            },
            newtask: {}
         }
      },
      
  
      methods: {
  
          addTask: function(event){
              
              var d = moment().format('YYYY-MM-DD');
  
              var sel = new Date(this.selectedDate.replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"));
  
              //console.log();
              
              var date = new Date(moment(sel).format('YYYY-MM-DD')+ 'T00:00:00'); // will be in local time
              
              this.tasks.push({
                  title: this.task.title,
                  start: date,
                  end: date
                });
  
                this.$nextTick(function () {
                  // DOM is now updated
                  // `this` is bound to the current instance
                  //this.doSomethingElse()
                })
          },
  
          dateClicked: function(date) {
              this.selectedDate = moment(date.date).format('DD-MM-YYYY');
            },
  
          eventClicked: function(event) {
              this.selectedDate = moment(event.event.start).format('DD-MM-YYYY');
            },
  
            showObject: function() {
  
              console.log(this.tasks);
            }
      
      
      }
    })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fullcalendar.io/releases/core/4.1.0/main.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;script src="https://fullcalendar.io/releases/core/4.1.0/main.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://fullcalendar.io/releases/interaction/4.1.0/main.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;div class="container mt-5" id="app"&gt;
      &lt;div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;full-calendar 
                  v-bind:tasks="tasks" 
                  v-on:date_clicked="dateClicked"
                  v-on:event_clicked="eventClicked"
                  :newtask="newtask"
                  &gt;&lt;/full-calendar&gt;
              &lt;/div&gt;
              
          &lt;div class="col-md-4"&gt;
            
              &lt;div class="pb-3"&gt;
                      &lt;span id="CurrentDate" class="" style="cursor: pointer;"&gt;{{selectedDate}}&lt;/span&gt;
                      &lt;span class="badge badge-primary"&gt;{{tasks.length}}&lt;/span&gt;
                      &lt;button @click="showObject"&gt;show object&lt;/button&gt;
              &lt;/div&gt;
  
            &lt;table class="table table-condensed"&gt;
              &lt;tbody v-for="task in tasks"&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                    &lt;input
                      type="checkbox"
                    /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;{{task.title}}&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
              &lt;tbody&gt;
                &lt;tr v-if="tasks.length==0"&gt;
                  &lt;td colspan="3" class="text-center"&gt;No tasks to display&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
  
  
  
   
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Add a task&lt;/h5&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                      &lt;div class="form-group"&gt;
                              &lt;input type="text" id="NewTaskTitle" placeholder="Enter task name" class="form-control" v-model="task.title" /&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                &lt;button class="btn btn-success btn-sm" @click="addTask"&gt;Add&lt;/button&gt;
                &lt;button data-bind="click: CancelAddNewTask" class="btn btn-seconday btn-sm" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hi everyone,</p>
  
  <p>I am trying to bind an object ‘tasks’ with full calendar events however it is not working.</p>
  
  <p>Please see example above provided. View it in full page please</p>
  
  <p>When you add a task, I am expecting it to be added to the tasks objects and of course to be be binded to the events in full calendar.</p>
  
  <p>Basically, I want to bind tasks array to full calendar events object, so if for example I remove an item should also be removed from the full calendar events</p>
  
  <p>Please let me know if I am doing it wrong . thanks a bunch</p>
  
  <p>[1]:</p>