当我将日历中的事件从一个日期移动到另一个日历时，我希望在停止拖动事件后将最终日期存储在我的数据库中（我说的是已经存在的事件而不是外部事件） ： 这是我的剧本：
<script type="text/javascript">
!function($) {
"use strict";
var CalendarApp = function() {
this.$body = $("body")
this.$modal = $('#event-modal'),
this.$event = ('#external-events div.external-event'),
this.$calendar = $('#calendar'),
this.$saveCategoryBtn = $('.save-category'),
this.$categoryForm = $('#add-category form'),
this.$extEvents = $('#external-events'),
this.$calendarObj = null
};
/* on drop */
CalendarApp.prototype.onDrop = function (eventObj, date) {
var $this = this;
// retrieve the dropped element's stored Event Object
var originalEventObject = eventObj.data('eventObject');
var $categoryClass = eventObj.attr('data-class');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
if ($categoryClass)
copiedEventObject['className'] = [$categoryClass];
// render the event on the calendar
$this.$calendar.fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
eventObj.remove();
}
},
/* on click on event */
CalendarApp.prototype.onEventClick = function (calEvent, jsEvent, view) {
var $this = this;
var form = $("<form></form>");
form.append("<label>Change event name</label>");
form.append("<div class='input-group'><input class='form-control' name='title' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success waves-effect waves-light'><i class='fa fa-check'></i> Save</button></span></div>");
$this.$modal.modal({
backdrop: 'static'
});
$this.$modal.find('.delete-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.delete-event').unbind('click').click(function () {
$this.$calendarObj.fullCalendar('removeEvents', function (ev) {
return (ev._id == calEvent._id);
});
$this.$modal.modal('hide');
});
$this.$modal.find('form').on('submit', function () {
calEvent.title = form.find("input[type=text]").val();
$this.$calendarObj.fullCalendar('updateEvent', calEvent);
$.ajax({
url: 'calendar/update/'+calEvent.id,
type: 'put',
data:{title:form.find("input[name='title']").val()},
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
success:function(){
alert("succes modif");
},error:function(){
alert("erreur!!!!");
}
});
$this.$modal.modal('hide');
return false;
});
$( "#delete" ).click(function() {
$.ajax({
url: "{{ URL::to('calendar/delete') }}",
type: 'post',
data:{id:calEvent.id},
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
success:function(){
alert("succes delete");
},error:function(){
alert(" delete erreur!!!!");
}
});
});
},
/* on select */
CalendarApp.prototype.onSelect = function (start, end, allDay) {
var $this = this;
$this.$modal.modal({
backdrop: 'static'
});
var form = $("<form></form>");
form.append("<div class='row'></div>");
form.find(".row")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>")
.append("<input name='_token' type='hidden' value='{{csrf_token()}}'>")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>")
.find("select[name='category']")
@foreach($categories as $categorie)
.append("<option value='bg-black' name='categorie'>{{$categorie->title}}</option>")
@endforeach
.append("</div></div>");
$this.$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
form.submit();
});
$this.$modal.find('form').on('submit', function () {
var title = form.find("input[name='title']").val();
var beginning = form.find("input[name='beginning']").val();
var ending = form.find("input[name='ending']").val();
var categoryClass = form.find("select[name='category'] option:checked").val();
$.ajax({
url: "{{ URL::to('calendar/store') }}",
type: 'post',
data:{ title:form.find("input[name='title']").val(),start:start.format("YYYY-MM-DD"),end:end.format("YYYY-MM-DD")},
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
success:function(){
alert("succes ajout");
},error:function(){
alert("erreur!!!!");
}
});
if (title !== null && title.length != 0) {
$this.$calendarObj.fullCalendar('renderEvent', {
title: title,
start:start,
end: end,
allDay: false,
className: categoryClass
}, true);
$this.$modal.modal('hide');
}
else{
alert('Veuillez donner un titre à votre événement');
}
return false;
});
$this.$calendarObj.fullCalendar('unselect');
},
/* Initializing */
CalendarApp.prototype.init = function() {
/* Initialize the calendar */
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var form = '';
var today = new Date($.now());
var defaultEvents = "{{url('/events')}}";
var $this = this;
$this.$calendarObj = $this.$calendar.fullCalendar({
slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
minTime: '08:00:00',
maxTime: '19:00:00',
defaultView: 'month',
handleWindowResize: true,
height: $(window).height() - 200,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: defaultEvents,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
eventLimit: true, // allow "more" link when too many events
selectable: true,
drop: function(date) { $this.onDrop($(this), date); },
select: function (start, end, allDay) { $this.onSelect(start, end, allDay); },
eventClick: function(calEvent, jsEvent, view) { $this.onEventClick(calEvent, jsEvent, view); }
});
//on new event
this.$saveCategoryBtn.on('click', function(){
var categoryName = $this.$categoryForm.find("input[name='category-name']").val();
var categoryColor = $this.$categoryForm.find("select[name='category-color']").val();
if (categoryName !== null && categoryName.length != 0) {
$this.$extEvents.append('<div class="external-event bg-' + categoryColor + '" data-class="bg-' + categoryColor + '" style="position: relative;"><i class="mdi mdi-checkbox-blank-circle m-r-10 vertical-middle"></i>' + categoryName + '</div>')
}
});
},
//init CalendarApp
$.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp
}(window.jQuery),
//initializing CalendarApp
function($) {
"use strict";
$.CalendarApp.init()
}(window.jQuery);
</script>
我使用ajax来存储事件并更新他们的标题，因为我在我的jquery脚本中有一个表单但是当我移动时更改事件的开始和结束我无法找到解决方案
答案 0 :(得分：2)
var $this = this;
$this.$calendarObj = $this.$calendar.fullCalendar({
slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
minTime: '08:00:00',
maxTime: '19:00:00',
defaultView: 'month',
handleWindowResize: true,
height: $(window).height() - 200,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: defaultEvents,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
eventLimit: true, // allow "more" link when too many events
selectable: true,
drop: function(date) { $this.onDrop($(this), date); },
select: function (start, end, allDay) { $this.onSelect(start, end, allDay); },
eventClick: function(calEvent, jsEvent, view) { $this.onEventClick(calEvent, jsEvent, view); },
eventDrop : function(event, delta, revertFunc){
$.ajax({
url: "{{ URL::to('calendar/updatedate') }}",
type: 'put',
data:{id:event.id,start:event.start.format("YYYY-MM-DD"),end:event.end.format("YYYY-MM-DD")},
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
success:function(){
alert("succes drag");
},error:function(){
alert("erreur drag !!!!");
}
});
}
});