我正在使用FullCalendar 4开发日历。有一个模式,可以让我通过选择来带出必须显示的事件。通过ajax,我恢复了事件。这是我正在使用的代码。
$(document).ready(function (){
loadCalendar();
});
function setting_eventos(){
'use strict';
var form = $('#panel-setting'), form_data, message = $('.contact__msg');
message.hide();
form.submit(function (e) {
e.preventDefault();
form_data = $(this).serialize();
console.log(form_data);
loadCalendar(form_data);
$("#panel-setting").modal('hide');
});
}
function loadCalendar(param){
op = 'has='+window.btoa(param);
var url = get_vinculador(3649,op); //aqui recupero la url en conjunto los parametros del modal
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid','list', 'rrule'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
locale: 'es',
events: {
url: url,
failure: function () {
document.getElementById('script-warning').style.display = 'block'
}
},
});
calendar.render();
}
<div class="modal fade" id="modal-panel-setting" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<form id="panel-setting">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row ">
<div class="col-md-12">
<div class = "row">
<div class = "col-md-2">
<div class = "form-group">
<label for = "tipoEvento">Tipos de Eventos</label>
<select name = "tipoEvento" class = "form-control plan">
<option disabled = "disabled" value = "-1" selected = "selected"> ---</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Cancelar</button>
<button type = "submit" class = "btn btn-primary">Guardar</button>
</div>
</div>
</div>
</form>
</div>
<div id='calendar'></div>
我很好地恢复了事件,但是戏剧性的是,每当我使用模式形式进行过滤时,都会再次重复显示日历,如图所示。我要做的是每次我从更新Fullcalendar网址的表单中过滤掉。