Unable to resize event when time is not allDay fullcalendar

0
votes

I've already searched for about 2 days for the answer but still no luck until now. Please help me to figure it out. When the event is not allDay, resize is not working and resize icon doesn't show at the end of the event. But when the event is allDay, it can now resizable. I've already tried putting allDay: true and allDay: false but it doesn't work. If allDay: true all the time becomes allDay after resizing. Please help me.

This is my code.

$(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.');
      }
    }
  }
);
}
}
);

I dont know where exactly the problem is. I just want to resize the event whether the time is allDay or Not. Currently i can only resize it if the time is 00:00:00. Is fullcalendar disabled resizing of non allDay event? If yes, can i remove it? so that i can resize the date only and maintain the time of the event.

2
javascriptjqueryajaxfullcalendar
All events are resizable in theory. Please show us the code which is giving you the problem. – ADyson
@ADyson i've edited my question. And put all my code in it. Please help me. – Pixcelleen88

2 Answers

2
votes

Your calendar uses "month" and "basic" style views. But neither of these views even allows resizing by time, only by day. These views do not have any kind of time slot on them, so how would you expect to be able to resize by time? The calendar would not know how much to extend it by, and neither would the user know how big to drag the event to achieve the desired change of time.

If you want resize by time, you have to use the "agenda" style views.

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

would add these views into your calendar.

See here for a demo: http://jsfiddle.net/sbxpv25p/419/ - in the "agenda" views you can drag and resize by time.

0
votes

Here is fiddle http://jsfiddle.net/xyzdktm8/

you can resize the event if the event is allDay = true you just need to add extra hours in the event.

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