2013-12-03 3 views
4

Я использую JQuery FullCalendar.JQuery FullCalendar Расширение даты начала или окончания даты

Вот ссылка каландра Я использую: http://arshaw.com/fullcalendar/

У меня есть случай, когда у меня есть StartDate и ENDDATE.

Теперь, если я продлеваю startdate или enddate, перетащив его.

Как я могу получить ответное событие, которое было вызвано, когда я перетаскивал/продлевал дату?

Для примера:

Когда я двигаться событие из одной даты на другую я использую eventDrop. Это дает мне дни, добавленные или вычитаемые до исходных дат.

Мне нужно то же самое решение для продления начальной или конечной даты.

Возможности я столкнулся:

Оригинальные Даты: 2013-12-04 до 2013-12-07

Когда Расширяет: 2013-12-04 до 2013-12-10

ИЛИ

Когда Расширяет: 2013-12-01 до 2013-12-07

Вот случаи я облицовочные. Как я могу отслеживать, какое событие я провел в календаре и какие параметры он прошел?

+1

вы можете использовать 'eventResizeStart',' eventResizeStop', 'eventResize', когда вы расширяете« конечную дату »и« dragStart »и« dragStop »для изменения« даты начала » –

+0

Могу ли я проверить, если мое событие находится на одной дате (я имею в виду нет даты окончания, только даты начала), поэтому в этом случае он не должен изменяться. Как я могу это сделать ? –

+0

ou может ограничивать это использованием 'eventDurationEditable' http://arshaw.com/fullcalendar/docs/event_ui/eventDurationEditable/ –

ответ

4

Вы можете использовать eventResize

Ниже приводится пример с OFFICAL сайта:

http://arshaw.com/fullcalendar/docs/event_ui/eventResize/

$('#calendar').fullCalendar({ 
    events: [ 
     // events here 
    ], 
    editable: true, 
    eventResize: function(event,dayDelta,minuteDelta,revertFunc) { 

     alert(
      "The end date of " + event.title + "has been moved " + 
      dayDelta + " days and " + 
      minuteDelta + " minutes." 
     ); 

     if (!confirm("is this okay?")) { 
      revertFunc(); 
     } 

    } 
}); 
+0

Могу ли я проверить это, если мое Событие находится в единственной дате (я имею в виду отсутствие даты окончания, только даты начала), поэтому в этом случае он не должен изменяться. Как я могу это сделать ? –

+0

[Event_Object] (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/). Вы можете добавить свойство durationEditable: false к одному событию, которое не позволяет редактировать его с помощью изменения размера. – Ted

+0

Можем ли мы сделать то же самое для события с двумя датами? Как событие, имеющее как начальную, так и конечную даты, не должно быть разрешено изменять размер до одной даты. –

1

Jquery Fullcalender предоставляет много вариантов, где вы играете вокруг WTH ваших событий, так как за вас требуется

Original Dates : 2013-12-04 to 2013-12-07

When Extends : 2013-12-04 to 2013-12-10

Это когда вы продлить продолжительность события, чтобы поймать событие, где вы изменить дату окончания вы можете использовать следующий код

eventResizeStart: function (event, jsEvent, ui, view) { 
    console.log('RESIZE START ' + event.title); 

}, 
eventResizeStop: function (event, jsEvent, ui, view) { 
    console.log('RESIZE STOP ' + event.title); 

}, 
eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) { 
    console.log('RESIZE!! ' + event.title); 
    console.log(dayDelta + ' days'); //this will give the number of days you extended the event 
    console.log(minuteDelta + ' minutes'); 

}, 

Original Dates : 2013-12-04 to 2013-12-07

When Extends : 2013-12-01 to 2013-12-07

Это когда вы предварительно установите событие, вы можете использовать приведенный ниже код

eventDragStart: function (event, jsEvent, ui, view) { 
    console.log('DRAG START ' + event.title); 
    console.log(this); 
}, 
eventDragStop: function (event, jsEvent, ui, view) { 
    console.log('DRAG STOP ' + event.title); 
    console.log(this); 
}, 
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) { 
    console.log('DROP ' + event.title); 
    console.log(dayDelta + ' days'); //this will give the number of days you dragged before or after 
    console.log(minuteDelta + ' minutes'); 
    console.log('allday: ' + allDay); 

}, 

Согласно вы прокомментируете выше, что если вы хотите, чтобы запретить пользователю перетаскивать событие или изменение размера событие, то вы можете использовать eventDurationEditable, это true по умолчанию

eventDurationEditable:false,

Смежные вопросы