对于 FullCalendar(和 jquery)的初学者，我想显示一个模式，以允许用户在将事件创建到日历中之前输入有关该事件的一些信息(例如标题)。 - 如果用户有效:ajax 中的一些控件。如果控制正常:可以将事件添加到日历和数据库中。 - 如果用户取消:日历上不会创建任何内容。
我尝试一下。它几乎可以工作，但我不满意，这不完全是我想要的。因为事件总是在模态出现之前创建。我无法更改事件标题上的任何内容。
这里有一个快照来解释:
这是我的 js 代码:
$('#calendar').fullCalendar({
header :
{
left : 'prev,next today',
center : 'title',
},
editable : true,
droppable : true,
events:
{
url: $('#url_for_ajax').val()+"/epreuve_json",
type: 'GET',
data: { custom_param1: 'something', custom_param2: 'somethingelse'}
},
eventClick :
function(calEvent, jsEvent, view) {
console.log(calEvent);
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
},
eventRender:
function(event, element) {
$(element).tooltip({html: true, title: 'bla bla bla bla bla <br />'+event.description+'<br />bla bla bla bla bla'});
},
eventDrop:
function(event, delta, revertFunc) {
alert(event.title + " was dropped on " + event.start.format());
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
},
drop:
function( date, jsEvent, ui ) {
var dateEpreuve = new Date(date);
var jourEpreuve = dateEpreuve.getDate();
var moisEpreuve = dateEpreuve.getMonth()+1;
var anneeEpreuve= dateEpreuve.getFullYear();
// console.log(jourEpreuve+'/'+moisEpreuve+'/'+anneeEpreuve);
console.log(ui);
console.log(ui.helper);
$('#date_epreuve').val(jourEpreuve+'/'+moisEpreuve+'/'+anneeEpreuve);
$('#reponse_serveur').html("");
$("#modal_formulaire_evenement").modal('show');
$('#modal_formulaire_evenement').on('hide.bs.modal', function () {
alert('annulation');
// ajaxcall.abort();
});
}
});
以及 ajax 调用的脚本(用于控件)。该脚本运行良好。
$('#boutton_confirmation').click(function() {
var id_matiere_a_supprimer = $('#id_matiere').val();
// alert('id matiere_a supprimer:'+id_matiere_a_supprimer);
// récupération du token qui sera passé en POST à la requete
var _token = $('meta[name="_token"]').attr('content')
var url= $('#url_for_ajax').val();
// envoi des infos creation epreuve
$.ajax({
type : 'POST',
url : url + '/postEpreuveAjax',
dataType : 'json',
data : {_token:_token,
id_epreuve:$('#id_epreuve').val(),
label_epreuve:$('#label_epreuve').val(),
id_section:$('#id_section').val(),
id_matiere:$('#id_matiere').val(),
id_epreuve_type:$('#id_epreuve_type').val(),
date_epreuve:$('#date_epreuve').val(),
note_mini:$('#note_mini').val(),
note_maxi:$('#note_maxi').val()
},
beforeSend : function() {},
success : function(data) {
if (data.retour == 0) {
// alert ('fini');
// window.location=url+"/calendrier_epreuve";
} else {
// $('#modal_confirmation_suppression').modal('hide');
$('#reponse_serveur').html(data.texte_retour);
}
}
});
});
我想我距离解决方案并不遥远。非常感谢您对这个主题的一些帮助。祝你有美好的一天。
多米尼克
最佳答案
关于jquery - 全日历 : how to create an event from a form in a modal，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30680243/