Я использую fullcalendar. Я могу получить данные о щелчке по событию, но проблема в том, что я не могу получить его при событии перетаскивания.
Объяснение: (Я могу получить данные по щелчку по событию, но проблема в том, что яя не могу получить его при событии перетаскивания.)
Когда я щелкаю по событиям, он получает данные о событии в модальном режиме, но когда я перетаскиваю событие на другую дату и снова щелкаю по событию, он получаетсобытие (название, описание) снова, но не было обновлено даты начала и окончания события.
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: [
{
id: 'event-1',
title: 'All Day Event',
start: '2019-'+ getDynamicMonth('default') +'-01T14:30:00',
end: '2019-'+ getDynamicMonth('default') +'-02T14:30:00',
className: "bg-danger",
description: 'Aenean fermentum quam vel sapien rutrum cursus. Vestibulum imperdiet finibus odio, nec tincidunt felis facilisis eu. '
},
{
id: 'event-2',
title: 'Long Event',
start: '2019-'+ getDynamicMonth('default') +'-07T19:30:00',
end: '2019-'+ getDynamicMonth('default') +'-09T14:30:00',
className: "bg-primary",
description: 'Etiam a odio eget enim aliquet laoreet. Vivamus auctor nunc ultrices varius lobortis.'
},
{
id: 'event-3',
title: 'Conference',
start: '2019-'+ getDynamicMonth('default') +'-17T14:30:00',
end: '2019-'+ getDynamicMonth('default') +'-18T14:30:00',
className: "bg-warning",
description: 'Proin et consectetur nibh. Mauris et mollis purus. Ut nec tincidunt lacus. Nam at rutrum justo, vitae egestas dolor. '
},
{
id: 'event-4',
title: 'Meeting',
start: '2019-'+ getDynamicMonth('default') +'-12T10:30:00',
end: '2019-'+ getDynamicMonth('default') +'-13T10:30:00',
className: "bg-danger",
description: 'Mauris ut mauris aliquam, fringilla sapien et, dignissim nisl. Pellentesque ornare velit non mollis fringilla.'
},
{
id: 'event-5',
title: 'Lunch',
start: '2019-'+ getDynamicMonth('default') +'-12T15:00:00',
end: '2019-'+ getDynamicMonth('default') +'-13T15:00:00',
className: "bg-warning",
description: 'Integer fermentum bibendum elit in egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus.'
},
{
id: 'event-6',
title: 'Meeting',
start: '2019-'+ getDynamicMonth('default') +'-12T21:30:00',
end: '2019-'+ getDynamicMonth('default') +'-13T21:30:00',
className: "bg-success",
description: 'Curabitur facilisis vel elit sed dapibus. Nunc sagittis ex nec ante facilisis, sed sodales purus rhoncus. Donec est sapien, porttitor et feugiat sed, eleifend quis sapien. Sed sit amet maximus dolor.'
},
{
id: 'event-7',
title: 'Happy Hour',
start: '2019-'+ getDynamicMonth('default') +'-12T05:30:00',
end: '2019-'+ getDynamicMonth('default') +'-13T05:30:00',
className: "bg-warning",
description: 'Morbi odio lectus, porttitor molestie scelerisque blandit, hendrerit sed ex. Aenean malesuada iaculis erat, vitae blandit nisl accumsan ut.'
},
{
id: 'event-8',
title: 'Dinner',
start: '2019-'+ getDynamicMonth('default') +'-12T20:00:00',
end: '2019-'+ getDynamicMonth('default') +'-13T20:00:00',
className: "bg-danger",
description: 'Sed purus urna, aliquam et pharetra ut, efficitur id mi. Pellentesque ut convallis velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
id: 'event-9',
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-'+ getDynamicMonth('default') +'-27T20:00:00',
end: '2019-'+ getDynamicMonth('default') +'-28T20:00:00',
className: "bg-success",
description: 'Sed purus urna, aliquam et pharetra ut, efficitur id mi. Pellentesque ut convallis velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
id: 'event-10',
title: 'new event',
start: '2019-'+ getDynamicMonth('default') +'-24T08:12:14',
end: '2019-'+ getDynamicMonth('default') +'-27T22:20:20',
className: "bg-danger",
description: 'Sed purus urna, aliquam et pharetra ut, efficitur id mi. Pellentesque ut convallis velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
id: 'event-12',
title: 'Other new',
start: '2019-'+ getDynamicMonth('dec') +'-13T08:12:14',
end: '2019-' + getDynamicMonth('dec') +'-16T22:20:20',
className: "bg-primary",
description: 'Pellentesque ut convallis velit. Sed purus urna, aliquam et pharetra ut, efficitur id mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
id: 'event-13',
title: 'Upcoming Event',
start: '2019-'+ getDynamicMonth('inc') +'-15T08:12:14',
end: '2019-'+ getDynamicMonth('inc') +'-18T22:20:20',
className: "bg-primary",
description: 'Pellentesque ut convallis velit. Sed purus urna, aliquam et pharetra ut, efficitur id mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
}
],
editable: true,
eventLimit: true,
eventMouseover: function(event, jsEvent, view) {
$(this).attr('id', event.id);
$('#'+event.id).popover({
template: '<div class="popover popover-primary" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
title: event.title,
content: event.description,
placement: 'top',
});
$('#'+event.id).popover('show');
},
eventRender: function() {
},
eventMouseout: function(event, jsEvent, view) {
$('#'+event.id).popover('hide');
},
eventClick: function(info) {
console.log(info);
addEvent.style.display = 'none';
editEvent.style.display = 'block';
addEventTitle.style.display = 'none';
editEventTitle.style.display = 'block';
modal.style.display = "block";
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
createBackdropElement();
// Calendar Event Featch
var eventTitle = info.title;
var eventDescription = info.description;
var eventStartDate = info.start._i;
var eventStartDateSplit = eventStartDate.split('T')
var eventStartDateSliced = eventStartDateSplit[0];
var eventStartTimeSliced = eventStartDateSplit[1];
var eventEndDate = info.end._i;
var eventEndDateSplit = eventEndDate.split('T')
var eventEndDateSliced = eventEndDateSplit[0];
var eventEndTimeSliced = eventEndDateSplit[1];
// Task Modal Input
var taskTitle = $('#write-e');
var taskTitleValue = taskTitle.val(eventTitle);
var taskDescription = $('#taskdescription');
var taskDescriptionValue = taskDescription.val(eventDescription);
var taskInputStarttDate = $("#start-date");
var taskInputStarttDateValue = taskInputStarttDate.val(eventStartDateSliced + ' ' + eventStartTimeSliced);
var taskInputEndDate = $("#end-date");
var taskInputEndtDateValue = taskInputEndDate.val(eventEndDateSliced + ' ' + eventEndTimeSliced);
$('#edit-event').off('click').on('click', function(event) {
event.preventDefault();
/* Act on the event */
var radioValue = $("input[name='marker']:checked").val();
var taskStartTimeValue = document.getElementById("start-date").value;
var taskEndTimeValue = document.getElementById("end-date").value;
info.title = taskTitle.val();
info.description = taskDescription.val();
info.start._i = taskStartTimeValue;
info.end._i = taskEndTimeValue;
info.className = radioValue;
$('#calendar').fullCalendar('updateEvent', info);
modal.style.display = "none";
var getModalBackdrop = document.getElementsByClassName('modal-backdrop')[0];
document.body.removeChild(getModalBackdrop)
document.getElementsByTagName('body')[0].removeAttribute('style');
});
}
})