当时间不是allDay fullcalendar时,无法调整事件的大小

时间:2018-03-21 05:24:44

标签: javascript jquery ajax fullcalendar

我已经搜索了大约2天的答案,但直到现在仍然没有运气。请帮我搞清楚。当事件不是allDay时,调整大小不起作用,并且调整大小图标不会在事件结束时显示。但是当事件是allDay时,它现在可以调整大小。我已经尝试过allDay: trueallDay: false,但它不起作用。如果allDay: true在调整大小后始终变为allDay。请帮帮我。

这是我的代码。

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'today add_event',
      center: 'prev title next',
      right: 'month,basicWeek,basicDay'
    },
    eventOrder: 'start',
    editable: true,
    eventLimit: true,
    selectable: true,
    selectHelper: true,
    select: function(start, end) {
      $('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
      $('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
      $('#ModalAdd').modal('show');
    },
    eventRender: function(event, element) {
                element.bind('dblclick', function() {
                        $('#ModalEdit #id').val(event.id);
                        $('#ModalEdit #start').val(event.start.format('dddd, MMM DD-YYYY'));
                        $('#ModalEdit #end').val(event.end.format('dddd, MMM DD-YYYY'));
                });
    },
    eventDrop: function(event, delta, revertFunc) {
      edit(event);
    }
    eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
      edit(event);
    },
    events: [
      <?php 
        foreach($events as $event): 
            $start = explode(" ", $event['start']);
            $end = explode(" ", $event['end']);
        if($start[1] == '00:00:00'){
            $start = $start[0];
        }else{
            $start = $event['start'];
                              }
        if($end[1] == '00:00:00'){
            $end = $end[0];
        }else{
            $end = $event['end'];
        }
  ?>
        {
        id: '<?php echo $event['id']; ?>',
        title: '<?php echo $event['title']; ?>',
        start: '<?php echo $start; ?>',
        end: '<?php echo $end; ?>',
      },
    <?php endforeach;?>
    ],

});
function edit(event){
  start = event.start.format('YYYY-MM-DD HH:mm:ss');
  if(event.end){
    end = event.end.format('YYYY-MM-DD HH:mm:ss');
  }
  else{
    end = start;
  }
  id =  event.id;
  Event = [];
  Event[0] = id;
  Event[1] = start;
  Event[2] = end;
  $.ajax({
    url: 'editEventDate.php',
    type: "POST",
    data: {
      Event:Event}
    ,
    success: function(rep) {
      if(rep == 'OK'){
      }
      else{
        alert('Could not be saved. try again.');
      }
    }
  }
);
}
}
);

我不知道问题究竟在哪里。我只是想调整事件的大小,无论时间是全天还是全天。目前我只能在00:00:00时调整大小。 fullcalendar是否禁用了非allDay事件的大小调整?如果是,我可以将其删除吗?所以我只能调整日期的大小并保持事件的时间。

2 个答案:

答案 0 :(得分:1)

您的日历使用&#34;月&#34;和&#34;基本&#34;风格的看法。但这些观点都不允许按时间调整,只能按天调整。这些视图在它们上没有任何时间段,那么您希望能够按时间调整大小?日历不知道要扩展多少,并且用户也不知道拖动事件有多大以实现期望的时间变化。

如果您想按时间调整大小,则必须使用&#34;议程&#34;风格的观点。

header: {
  left: 'today',
  center: 'prev title next',
  right: 'month,agendaWeek,agendaDay'
},

会将这些观点添加到您的日历中。

点击此处查看演示:http://jsfiddle.net/sbxpv25p/419/ - 在&#34;议程&#34;您可以按时间拖动和调整视图。

答案 1 :(得分:0)

这里是小提琴http://jsfiddle.net/xyzdktm8/

如果事件为allDay = true,则可以调整事件的大小 您只需要在活动中增加额外的时间即可。

eventDataTransform: function (event) {
    event.end = moment(event.end).add({ hours: 47, minutes: 59, seconds: 59 });     
            return event;
        },