I have a section based on a fullCalendar which I use to create and move the dates of the events.
The problem I have is that when doing drag with one of the events, the border of the cells and the row where I position the cursor disappear:
My code: JS
var calendar = $('#taskCalendar').fullCalendar({
numberOfMonths: 3,
height:"parent",
aspectRatio: 1.20,
header: {
left: '',
center: 'title',
right: 'prev,next today'
},
eventLimit: true,
editable: true,
monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
dayNames: ['Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado'],
dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sab'],
firstDay: 1, // 1(Monday) this can be changed to 0(Sunday) for the USA system
selectable: true,
defaultView: 'month',
buttonText: {
today: 'Hoy',
month: 'Mes',
week: 'Semana',
day: 'día'
},
dragScroll: false,
select: function(start, end, allDay) {
$('.darkLayer').css('display', 'inline-block');
$('#addTaskModal').css('display', 'inline-block');
$('.addTaskModalMenuIcon.fa-list').addClass('active');
$('.addTaskModalMenuIcon.fa-comment-o').removeClass('active');
$('.addTaskModalMenuIcon.fa-user').removeClass('active');
$('.addTaskModalMenuIcon.fa-folder-o').removeClass('active');
$('.addSubtaskHiddenContent').css('display', 'inline-block');
$('.addChatHiddenContent').css('display', 'none');
$('.addParticipantHiddenContent').css('display', 'none');
$('.addAttachmentHiddenContent').css('display', 'none');
$('.wrapper-taskImage').css('display', 'inline-block');
$('#addInputSubtask').val("");
$('.changeImageInput').val("");
$('#datepicker2 .selectedFather2').removeClass('selectedFather2');
$('#datepicker2 .selectedFather').removeClass('selectedFather');
start = new Date(start);
startd = start.getDate();
startm = start.getMonth() + 1;
starty = start.getFullYear();
start = starty + "-" + startm + "-" + startd;
end = new Date(end);
end = sumarDias(end, -1);
endd = end.getDate();
endm = end.getMonth() + 1;
endy = end.getFullYear();
end = endy + "-" + endm + "-" + endd;
$('#dateRangepicker2').data('dateRangePicker').setDateRange( start , end, true);
$('#inputNewTaskMessage').val("");
$('.addTaskParticipantBoxContent').html("");
$('.addAttachmentContentBox').html("");
$('.taskImage').css('background-image', 'url("../assets/img/various/añadirfoto.jpg")');
$('#changeTaskImageInput').val();
$('.taskImage').css('outline', '2px dashed #fff');
$('.noImage').css('display', 'none');
$('#changeTaskImageInput').val('');
$('.addTaskTitle').html('Nueva Tarea');
$('#changeAddTaskTitle').val('');
$('.addTaskTitle').css('display', 'inline-block');
$('#changeAddTaskTitle').css('display', 'none');
$('.addTaskAlarmSelector').attr('value', '');
$('.addTaskAlarmSelector .addTaskAlarmSelectorText').text('AVISAME');
$('.addChatList').html("");
$('.addOpenSubtaskList').html("<div id='noAddSubtask' >No hay Subtareas</div>");
$('#changeOpenAddTaskSubject').val('');
$('.addTaskTitle').text('Nueva Tarea');
$('#changeAddTaskTitle').val('Nueva Tarea');
},
eventResize:function(event, jsEvent, ui, view){
taskId = event.id;
dateStart = event.start.format();
end = sumarDias( new Date(event.end.format()), -1 );
endDay = end.getDate();
endMonth = end.getMonth()+1;
endYear = end.getFullYear();
dateEnd = endYear + '-' + (endMonth<10 ? '0' : '') + endMonth + '-' + (endDay<10 ? '0' : '') + endDay;
$.ajax({
url: base_url + 'Task/changeDate',
type: 'post',
data:{
'autor' : employeeId,
'taskId' : taskId,
'dateStart' : dateStart,
'dateEnd' : dateEnd
},
success:function(){
},
error:function(){
}
});
},
eventDrop:function(event, delta, revertFunc){
taskId = event.id;
if( event.end != null )
{
dateStart = event.start.format();
end = sumarDias( new Date(event.end.format()), -1 );
endDay = end.getDate();
endMonth = end.getMonth()+1;
endYear = end.getFullYear();
dateEnd = endYear + '-' + (endMonth<10 ? '0' : '') + endMonth + '-' + (endDay<10 ? '0' : '') + endDay;
}else{
dateStart = event.start.format();
dateEnd = event.start.format();
}
$.ajax({
url: base_url + 'Task/changeDate',
type: 'post',
data:{
'autor' : employeeId,
'taskId' : taskId,
'dateStart' : dateStart,
'dateEnd' : dateEnd
},
success:function(){
},
error:function(){
}
});
},
eventClick:function(event, jsEvent, view){
$(this).addClass('active');
}
});