Question

使用FullCalendar（和jquery）的初学者，我想显示一个模态，允许用户在将此事件创建到日历之前输入一些信息（例如标题）。 - 如果用户valids：ajax中的一些控件。如果控件正常：可以在日历和数据库中添加事件。 - 如果用户取消：日历上没有创建任何内容。

我试试。它几乎可以工作，但我不满意，这不是我想要的。因为事件始终是在模态出现之前创建的。而且我无法改变活动标题上的任何内容。

这里有一个快照来解释：

enter image description here

这是我的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);
                }

            }
        });
});

我想我离解决方案并不遥远。非常感谢您对此主题的一些帮助。祝你有个美好的一天。

多米尼克

Answer 1

您需要使用完整日历的以下回调（事件）

<强> eventDragStart

more information

Fullcalendar：如何从模式

1 个答案: