ajax请求修改事件,如何使用Ajax在更改事件对象后刷新Fullcalendar v4

我使用fullcalendar

v4来显示事件。事件在负载中正常显示,但是我需要使用多个复选框添加过滤器,并在使用ajax的onchange复选框之后刷新全日历事件。

更改后,我得到了新的对象事件,但我需要刷新我尝试使用的fullcalendar,calendar.render();但无法正常工作

fullcalendar V4 !!

全日历脚本

var taskEvents = JSON.parse($("input[name=tasks_events]").val());

var calendarEl = document.getElementById('tasks_calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {

locale: 'fr',

plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],

header: {

left: 'prev,next today',

center: 'title',

right: 'dayGridMonth,timeGridWeek'

},

defaultDate: new Date(),

defaultView: 'timeGridWeek',

minTime: "09:00:00",

maxTime: "20:00:00",

weekends:false,

businessHours: true, // display business hours

editable: true,

selectable: true,

droppable: true,

//events:taskEvents ,

select: function(info) {

$('#newTaskFormLabel').html('Commence à '+" " + moment(info.startStr).format('DD-MM-YYYY HH:mm') + " "+" fin à " +" " + moment(info.endStr).format('DD-MM-YYYY HH:m:m')) +""

$('#newTaskForm').modal('show');

$('#newTaskForm input[name=start_at]').val(info.startStr);

$('#newTaskForm input[name=end_at]').val(info.endStr);

},

eventClick: function(info) {

$('#editTaskForm').modal('show');

console.log(info);

editTask(info.event);

},

// dateClick: function(info) {

// alert('clicked ' + info.dateStr);

// },

eventResize: function(info) {

$('.popover.in').remove();

if (confirm("Êtes-vous sûr de vouloir appliquer ces modifications?")) {

submitTimeChanges(info.event);

}else{

info.revert();

}

},

eventDrop : function(info){

$('.popover.in').remove();

// $(info.el).removeAttr('aria-describedby');

if (confirm("Êtes-vous sûr de vouloir appliquer ces modifications?")) {

submitTimeChanges(info.event);

}else{

info.revert();

}

},

eventRender: function(info) {

$(info.el).append('User Image');

let state = function (state) {

if(state =="not_started") return "Pas encore commencé";

if(state =="started") return "Commencé";

if(state =="finish") return "Terminer";

}

$(info.el).popover({

title: info.event.title,

content: function () {

let html ="

"+moment(info.event.start).format('DD-MM-YYYY HH:mm')+' / '+moment(info.event.end).format('DD-MM-YYYY HH:mm')+"

"

+"

"+info.event.extendedProps.description+"

"

+"

"+"Utilisateur : "+info.event.extendedProps.user+"

"

+"

"+"Projet : "+info.event.extendedProps.project+"

"

+"

"+"Fonction : "+info.event.extendedProps.activity+"

"

+""+state(info.event.extendedProps.state)+"";

return html;

},

trigger: 'hover',

placement: 'top',

html: 'true',

container: 'body'

});

},

});

calendar.addEventSource( taskEvents );

calendar.render();

//--------------------------------------------------------

阿贾克斯脚本

var getTasks = function (data){

$.ajax({

url:"/admin/get-users-tasks",

type:"POST",

data :{

users:data,

},

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

},

success: function (response) {

calendar.addEventSource( response );

calendar.refetchEvents();

},

error: function(response) {

new PNotify({

title: "Opération échoué",

text: response.message,

type: "error"

});

}

});

}

更改时复选框功能

function onChangeUserCheckbox() {

$("input[name*=selected_user]").on('change',function () {

var selectedUsers = [];

$.each($("input[name*='selected_user']:checked"), function(){

selectedUsers.push($(this).val());

});

getTasks(selectedUsers);

// getTasks(JSON.stringify(selectedUsers));

})

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值