我正在使用 FullCalendar,但是当我使用 Ajax 更新作为格式条件的事件的状态时,当我横向滚动调用 ajax 时,滚动条重置为开始,防止查看者站在他想要可视化的位置.
我尝试为包含 Calendar 类的 div 设置固定宽度,没有结果可能我没有设置正确
function ajaxcall1(calendar) {
$.ajax({
type: 'GET',
url: "call for API",
success: function(doc) {
successAjax(doc, calendar);
},
error: function() {
console.log("error");
}
}).done(function() {
window.setTimeout(function() {
ajaxcall2(calendar);
}, 4000);
});
}
function ajaxcall2(calendar) {
$.ajax({
type: 'GET',
url: "call for API",
success: function(doc) {
successAjax(doc, calendar);
},
error: function() {
console.log("error");
}
}).done(function() {
window.setTimeout(function() {
ajaxcall1(calendar);
}, 4000);
});
}
$(document).ready(function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: ['interaction', 'resourceTimeGrid'],
resourceGroupField: 'group',
defaultView: 'resourceTimeGridDay',
displayEventTime: false,
slotEventOverlap: false,
height: 700,
scrollTime: starthour,
resourceGroupField: 'groupId',
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short',
hour12: false
},
resources: [{
id: '1',
title: 'R16/MOTORES',
groupId: 'P16'
}, {
id: '2',
title: 'R19/TRANSMISSÃO',
groupId: 'P19'
}, {
id: '3',
title: 'R26/CHASSIS',
groupId: 'P26'
}, {
id: '4',
title: 'R27/CHASSIS',
groupId: 'P27'
}, {
id: '5',
title: 'R40/CABINAS 1',
groupId: 'p40'
}, {
id: '6',
title: 'R54/CABINAS 2',
groupId: 'p54'
}, {
id: '7',
title: 'R56/KD',
groupId: 'P56'
}, {
id: '8',
title: 'TRUCK ON WHEELS',
groupId: 'P56'
}],
nowIndicator: true,
timeFormat: 'H:mm'
});
calendar.render();
ajaxcall1(calendar);
})
`enter code here`.fc-time-grid .fc-slats td {
height: 3.4em;
}
.fc-title {
font-size: 15px;
}
#erro {
background-color: #FF0000;
}
body {
margin: 40px 10px;
padding: 0;
font-size: 14px;
min-height: 100%;
}
#backDiv {
background-size: 100% 120%;
background-color: #FAFAFA;
background-position: center;
position: fixed;
opacity: 0;
height: 100%;
width: 100%;
top: 50px;
left: 0;
opacity: 1;
z-index: -1;
}
#erro {
background-color: #FF0000;
}
#warning {
background-color: #D6001C;
pointer-events: none;
position: fixed;
opacity: 0;
height: 100%;
width: 100%;
top: 0px;
left: 0;
opacity: 0.5;
z-index: 900 !important;
}
.fc table {
table-layout: auto;
}
.fc-view > table {
min-width: 0;
width: auto;
}
.fc-axis {
min-width: 70px; /*the width of times column*/
width: 70px; /*the width of times column*/
}
.fc-day, .fc-resource-cell, .fc-content-col, .data-resource-id {
min-width: 300px;
width: 300px;
}
successAjax() 的代码
enter code here
函数successAjax(文档,日历){
allEvents = [];
$(doc).each(function (idata) {
$(location).each(function (iloc) {
if (location[iloc] == "R16") {
allEvents.push({
id: idata,
resourceId: '1',
title: doc[idata].CARRIER_CODE_FOR_DISPLAY + " - " + licenseplate + "\n" + "Entry: " + entrada + "\n" + " - MUs: " + doc[idata].QuantityInside,
start: doc[idata].EDA,
end: dt,
allday: false,
backgroundColor: '#041E42',
textColor: '#FAFAFA',
arrival: doc[idata].PRU_GATE_ARRIVAL_DATE,
entry: doc[idata].PRU_GATE_ENTRY_DATE,
departure: doc[idata].PRU_GATE_DEPARTURE_DATE,
trailerId: doc[idata].TRAILER_ID,
description: doc[idata].CARRIER_CODE_FOR_DISPLAY,
hour: catchHour
});
} else if (location[iloc] == "R19") {
allEvents.push({
id: idata,
resourceId: '2',
title: doc[idata].CARRIER_CODE_FOR_DISPLAY + " - " + licenseplate + "\n" + "Entry: " + entrada + "\n" + " - MUs: " + doc[idata].QuantityInside,
start: doc[idata].EDA,
end: dt,
allday: false,
backgroundColor: '#041E42',
textColor: '#FAFAFA',
arrival: doc[idata].PRU_GATE_ARRIVAL_DATE,
entry: doc[idata].PRU_GATE_ENTRY_DATE,
departure: doc[idata].PRU_GATE_DEPARTURE_DATE,
trailerId: doc[idata].TRAILER_ID,
description: doc[idata].CARRIER_CODE_FOR_DISPLAY,
hour: catchHour
});
} else if (location[iloc] == "R26") {
allEvents.push({
id: idata,
resourceId: '3',
title: doc[idata].CARRIER_CODE_FOR_DISPLAY + " - " + licenseplate + "\n" + "Entry: " + entrada + "\n" + " - MUs: " + doc[idata].QuantityInside,
start: doc[idata].EDA,
end: dt,
allday: false,
backgroundColor: '#041E42',
textColor: '#FAFAFA',
arrival: doc[idata].PRU_GATE_ARRIVAL_DATE,
entry: doc[idata].PRU_GATE_ENTRY_DATE,
departure: doc[idata].PRU_GATE_DEPARTURE_DATE,
trailerId: doc[idata].TRAILER_ID,
description: doc[idata].CARRIER_CODE_FOR_DISPLAY,
hour: catchHour
});
... Input of Events via API
try {
calendar.getEventSources()[0].remove();
} catch (err)
{
}
calendar.addEventSource(allEvents);
其余的是改变事件颜色并在特定小时内重新定位多余事件的逻辑