小贝子编程

我如何将数组对象绑定到FullCalendar事件

 

Vue.component('full-calendar', {
    template: '<div ref="calendar"></div>',
    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);
          }
    
    
    }
  })
<link href="https://fullcalendar.io/releases/core/4.1.0/main.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://fullcalendar.io/releases/core/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.1.0/main.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container mt-5" id="app">
    <div>
        <div class="row">
            <div class="col-md-8">
                <full-calendar 
                v-bind:tasks="tasks" 
                v-on:date_clicked="dateClicked"
                v-on:event_clicked="eventClicked"
                :newtask="newtask"
                ></full-calendar>
            </div>
            
        <div class="col-md-4">
          
            <div class="pb-3">
                    <span id="CurrentDate" class="" style="cursor: pointer;">{{selectedDate}}</span>
                    <span class="badge badge-primary">{{tasks.length}}</span>
                    <button @click="showObject">show object</button>
            </div>
          <table class="table table-condensed">
            <tbody v-for="task in tasks">
              <tr>
                <td>
                  <input
                    type="checkbox"
                  />
                </td>
                <td>{{task.title}}</td>
                <td></td>
              </tr>
            </tbody>
            <tbody>
              <tr v-if="tasks.length==0">
                <td colspan="3" class="text-center">No tasks to display</td>
              </tr>
            </tbody>
          </table>
 
        </div>
        </div>
    </div>
    <div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Add a task</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                    <div class="form-group">
                            <input type="text" id="NewTaskTitle" placeholder="Enter task name" class="form-control" v-model="task.title" />
                    </div>
            </div>
            <div class="modal-footer">
              <button class="btn btn-success btn-sm" @click="addTask">Add</button>
              <button data-bind="click: CancelAddNewTask" class="btn btn-seconday btn-sm" data-dismiss="modal">Cancel</button>
            </div>
          </div>
        </div>
    </div>
</div>

大家好，

我试图通过完整的日历事件绑定对象"任务"，但是它不起作用。

请参阅上面提供的示例。请在整页中查看

当您添加任务时，我希望将其添加到任务对象中，当然可以将其添加到完整日历中的事件中。

基本上，我想将任务数组绑定到完整的日历事件对象，因此，如果我删除项目也应从完整日历事件中删除

如果我做错了，请告诉我。谢谢一堆

[1]：

当新任务从父(new vue(发送到子女(Full-Calendar(时，应该更简单。

在您的全卡车组件中，您应该只能调用渲染方法((方法，根据FullCalendar文档，如果已经存在日历，则可以启动该日历。在您的体系结构中，它与回忆起((方法一样简单。我还将密闭的模态逻辑移至适当的位置。这可能用户可能会更具重构性，但这应该会让您解开。希望它有帮助。

watch: {
  tasks: function (task) { 
    this.cal.calendar.render();
  }
}

https://fullcalendar.io/docs/render 

Vue.component('full-calendar', {
    template: '<div ref="calendar"></div>',
    props: {
      tasks: {
        type: Array, 
        required: true
      },
      newtask: Object
    },
    watch: {
      tasks: function (task) { 
            this.init()
      }
    },
    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
              });
              $("#addTaskModal").modal('hide');
              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);
          }
    
    
    }
  })
<link href="https://fullcalendar.io/releases/core/4.1.0/main.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://fullcalendar.io/releases/core/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.1.0/main.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container mt-5" id="app">
    <div>
        <div class="row">
            <div class="col-md-8">
                <full-calendar 
                v-bind:tasks="tasks" 
                v-on:date_clicked="dateClicked"
                v-on:event_clicked="eventClicked"
                :newtask="newtask"
                ></full-calendar>
            </div>
            
        <div class="col-md-4">
          
            <div class="pb-3">
                    <span id="CurrentDate" class="" style="cursor: pointer;">{{selectedDate}}</span>
                    <span class="badge badge-primary">{{tasks.length}}</span>
                    <button @click="showObject">show object</button>
            </div>
          <table class="table table-condensed">
            <tbody v-for="task in tasks">
              <tr>
                <td>
                  <input
                    type="checkbox"
                  />
                </td>
                <td>{{task.title}}</td>
                <td></td>
              </tr>
            </tbody>
            <tbody>
              <tr v-if="tasks.length==0">
                <td colspan="3" class="text-center">No tasks to display</td>
              </tr>
            </tbody>
          </table>
 
        </div>
        </div>
    </div>
    <div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Add a task</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                    <div class="form-group">
                            <input type="text" id="NewTaskTitle" placeholder="Enter task name" class="form-control" v-model="task.title" />
                    </div>
            </div>
            <div class="modal-footer">
              <button class="btn btn-success btn-sm" @click="addTask">Add</button>
              <button data-bind="click: CancelAddNewTask" class="btn btn-seconday btn-sm" data-dismiss="modal">Cancel</button>
            </div>
          </div>
        </div>
    </div>
</div>

watch: {
  tasks: function (tasks) {
    this.calendarOptions.events = tasks;
    let calendarApi = this.$refs.fullcalendar.getApi();
    calendarApi.render();
  },
},
... ...
<FullCalendar
  ref="fullcalendar"
  :options="calendarOptions"
/>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium