Есть проблема. Когда я пытаюсь добавить рендеринг событий в фоновом режиме (добавление рендеринга: 'background'), обычные события не могут быть изменены.
Тем не менее, отображаются обычные и фоновые события, можно добавлять новые события. Единственная проблема заключается в редактировании. Я использую диалоговые окна модели для добавления и редактирования событий. и фоновые события жестко закодированы.
источник - javascript
$ (документ) .ready (function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
timezone: "Asia/India",
beforeShowDay: "setHoliDays"
},
ignoreTimezone: false, timezone:'Asia/Kolkata',
axisFormat: 'h:mm A',
allday:false,
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
select: function(start, end) {
$('#ModalAdd #startd').val(moment(start).format('DD-MM-YYYY'));
//$('#ModalAdd #startd').val($('calendar').fullCalendar('getView').start);
//$('#ModalAdd #startd').val($('calendar').fullCalendar('getView').end);
//$('#ModalAdd #startd').val($('calendar').fullCalendar('getView').start);
//$('#ModalAdd #endd').val($.fullCalendar.formatDate(end, "DD-MM-YYYY"));
$('#ModalAdd #endd').val(moment(end).subtract(1,'days').format('DD-MM-YYYY'));
$('#ModalAdd').modal('show');
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
$('#ModalEdit #EventId').val(event.id);
$('#ModalEdit #desc').val(event.desc);
$('#ModalEdit #started').val(event.start.format('DD-MM-YYYY'));
$('#ModalEdit #ended').val(event.end.format('DD-MM-YYYY'));
$('#ModalEdit #tpe1').val(event.start.format('hh:mm A'));
$('#ModalEdit #tpe2').val(event.end.format('hh:mm A'));
$('#ModalEdit #title').val(event.title);
$('#ModalEdit #color').val(event.color);
$('#ModalEdit #place1').val(event.place);
$('#DeleteModal #EventId1').val(event.id);
if(event.bdate=="first")
{
$('#ModalEdit #edate1').prop('checked',true);
$('#ModalEdit #edate2').prop('checked',false);
$('#ModalEdit #edate3').prop('checked',false);
}
else if (event.bdate=="Second")
{
$('#ModalEdit #edate2').prop('checked',true);
$('#ModalEdit #edate1').prop('checked',false);
$('#ModalEdit #edate3').prop('checked',false);
}
else if (event.bdate=="Full")
{
$('#ModalEdit #edate3').prop('checked',true);
$('#ModalEdit #edate1').prop('checked',false);
$('#ModalEdit #edate2').prop('checked',false);
}
else
{
$('#ModalEdit #edate1').prop('checked',false);
$('#ModalEdit #edate2').prop('checked',false);
$('#ModalEdit #edate3').prop('checked',false);
}
if(event.efor=="video")
{
$('#ModalEdit #video').prop('checked',true);
$('#ModalEdit #camera').prop('checked',false);
$('#ModalEdit #hybrid').prop('checked',false);
}
else if (event.efor=="camera")
{
$('#ModalEdit #camera').prop('checked',true);
$('#ModalEdit #video').prop('checked',false);
$('#ModalEdit #hybrid').prop('checked',false);
}
else if (event.efor=="hybrid")
{
$('#ModalEdit #hybrid').prop('checked',true);
$('#ModalEdit #video').prop('checked',false);
$('#ModalEdit #camera').prop('checked',false);
}
$('#ModalEdit #id').val(event.bdate);
$('#ModalEdit').modal('show');
});
},
eventMouseover: function (data, event, view) {
tooltip = '<div class="tooltiptopicevent" style="width:auto;height:auto;background:#feb811;position:absolute;z-index:10001;padding:10px 10px 10px 10px ; line-height: 200%;">' + 'title: ' + ': ' + data.title + '</br>' + 'description: ' + ': ' + data.desc + '</div>';
$("body").append(tooltip);
$(this).mouseover(function (e) {
$(this).css('z-index', 10000);
$('.tooltiptopicevent').fadeIn('500');
$('.tooltiptopicevent').fadeTo('10', 1.9);
}).mousemove(function (e) {
$('.tooltiptopicevent').css('top', e.pageY + 10);
$('.tooltiptopicevent').css('left', e.pageX + 20);
});
},
eventMouseout: function (data, event, view) {
$(this).css('z-index', 8);
$('.tooltiptopicevent').remove();
},
eventDrop: function(event, delta, revertFunc) { // si changement de position
edit(event);
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur
edit(event);
},
events: [
{
title:'Mhoortham',
start: '2020-01-20',
end: '2020-01-20',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-01-27',
end: '2020-01-27',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-01-30',
end: '2020-01-30',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-02-05',
end: '2020-02-05',
color: '#FFF',
rendering: 'background'
},
{
id:'10',
title:'Mhoortham',
start: '2020-02-07',
end: '2020-02-07',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-02-12',
end: '2020-02-12',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-02-14',
end: '2020-02-14',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-02-20',
end: '2020-02-20',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-02-21',
end: '2020-02-21',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-02-26',
end: '2020-02-26',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-03-05',
end: '2020-03-05',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-03-06',
end: '2020-03-06',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-03-12',
end: '2020-03-12',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-03-13',
end: '2020-03-13',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-03-22',
end: '2020-03-22',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-03-30',
end: '2020-03-30',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-04-09',
end: '2020-04-09',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-04-17',
end: '2020-04-17',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-04-26',
end: '2020-04-26',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-04-27',
end: '2020-04-27',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-04-29',
end: '2020-04-29',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-05-04',
end: '2020-05-04',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-05-06',
end: '2020-05-06',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-05-13',
end: '2020-05-13',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-05-18',
end: '2020-05-18',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-05-24',
end: '2020-05-24',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-05-27',
end: '2020-05-27',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-05-28',
end: '2020-05-28',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-06-01',
end: '2020-06-01',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-06-03',
end: '2020-06-03',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-06-07',
end: '2020-06-07',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-06-10',
end: '2020-06-10',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-06-11',
end: '2020-06-11',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-07-12',
end: '2020-07-12',
color: '#FFF',
rendering: 'background'
}
,
{
title:'Mhoortham',
start: '2020-07-24',
end: '2020-07-24',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-07-02',
end: '2020-07-02',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-07-12',
end: '2020-07-12',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-08-21',
end: '2020-08-21',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-08-23',
end: '2020-08-23',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-08-24',
end: '2020-08-24',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-08-28',
end: '2020-08-28',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-08-30',
end: '2020-08-30',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-08-31',
end: '2020-08-31',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-09-04',
end: '2020-09-04',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-09-14',
end: '2020-09-14',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-09-16',
end: '2020-09-16',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-10-18',
end: '2020-10-18',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-10-26',
end: '2020-10-26',
color: '#FFF',
rendering: 'background',
allDay: 'allDay'
},
{
title:'Mhoortham',
start: '2020-10-29',
end: '2020-10-29',
color: '#FFF',
rendering: 'background',
allDay: 'allDay'
},
{
title:'Mhoortham',
start: '2020-11-04',
end: '2020-11-04',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-11-06',
end: '2020-11-06',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-11-11',
end: '2020-11-11',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-11-12',
end: '2020-11-12',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-11-13',
end: '2020-11-13',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-11-20',
end: '2020-11-20',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-11-26',
end: '2020-11-26',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-11-27',
end: '2020-11-27',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-12-04',
end: '2020-12-04',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-12-10',
end: '2020-12-10',
color: '#FFF',
rendering: 'background'
},
{
title:'Mhoortham',
start: '2020-12-11',
end: '2020-12-11',
color: '#FFF',
rendering: 'background'
},
<?php foreach($events as $event):
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: "<?php echo $event['id']; ?>",
title: "<?php echo $event['title']; ?>",
start: "<?php echo $event['start']; ?>",
end: "<?php echo $event['end']; ?>",
color: "<?php echo $event['color']; ?>",
desc: "<?php echo $event['description']; ?>",
bdate: "<?php echo $event['bdate']; ?>",
efor: "<?php echo $event['efor']; ?>",
place: "<?php echo $event['place']; ?>",
rendering: ""
},
<?php endforeach; ?>
],
eventRender: function (event, element) {
if (event.rendering == 'background') {
element.append('<i class="fa fa-camera" aria-hidden="true"></i>');
element.append(event.title);
}
}/* ,
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.rendering == 'background';
} */
});
$("#startd").datepicker({dateFormat: "dd-mm-yy"});
$('#endd').datepicker({dateFormat: "dd-mm-yy"});
$('#tp1').timepicki();
$('#tp2').timepicki();
$("#started").datepicker({dateFormat: "dd-mm-yy"});
$('#ended').datepicker({dateFormat: "dd-mm-yy"});
$('#tpe1').timepicki();
$('#tpe2').timepicki();
$(document).on('click', '#bdate1', function(){
$('#tp1').val("6:00 AM");
$('#tp2').val("1:00 PM");
$( "#bdate2" ).prop( "checked", false );
$( "#bdate3" ).prop( "checked", false );
});
$(document).on('click', '#bdate2', function(){
$('#tp1').val("4:00 PM");
$('#tp2').val("9:00 PM");
$( "#bdate1" ).prop( "checked", false );
$( "#bdate3" ).prop( "checked", false );
});
$(document).on('click', '#bdate3', function(){
$('#tp1').val("6:00 AM");
$('#tp2').val("1:00 PM");
$( "#bdate1" ).prop( "checked", false );
$( "#bdate2" ).prop( "checked", false );
});
$(document).on('click', '#edate1', function(){
$('#tpe1').val("6:00 AM");
$('#tpe2').val("1:00 PM");
$( "#edate2" ).prop( "checked", false );
$( "#edate3" ).prop( "checked", false );
});
$(document).on('click', '#edate2', function(){
$('#tpe1').val("4:00 PM");
$('#tpe2').val("9:00 PM");
$( "#edate1" ).prop( "checked", false );
$( "#edate3" ).prop( "checked", false );
});
$(document).on('click', '#edate3', function(){
$('#tpe1').val("6:00 AM");
$('#tpe2').val("1:00 PM");
$( "#edate1" ).prop( "checked", false );
$( "#edate2" ).prop( "checked", false );
});
$(document).on('click', '#video', function(){
$( "#camera" ).prop( "checked", false );
$( "#hybrid" ).prop( "checked", false );
});
$(document).on('click', '#camera', function(){
$( "#video" ).prop( "checked", false );
$( "#hybrid" ).prop( "checked", false );
});
$(document).on('click', '#hybrid', function(){
$( "#camera" ).prop( "checked", false );
$( "#video" ).prop( "checked", false );
});
});
если я удаляю фоновые события, я могу редактировать обычные события.