Javascript 完整日历／；在IE11中，当资源较多时，滚动或事件拖动动画速度太慢
我正在尝试使用FullCalendar（v4.4.0）时间线视图创建日历。 在IE11中，当我向日历添加许多资源（例如100）时，滚动或事件拖动动画会变慢。 当资源数量大约为10时，性能没有问题。 当浏览器是Chrome时，也没有问题 请告诉我一些改进这种缓慢性能的方法 演示：Javascript 完整日历／；在IE11中，当资源较多时，滚动或事件拖动动画速度太慢,javascript,fullcalendar,internet-explorer-11,fullcalendar-4,Javascript,Fullcalendar,Internet Explorer 11,Fullcalendar 4,我正在尝试使用FullCalendar（v4.4.0）时间线视图创建日历。 在IE11中，当我向日历添加许多资源（例如100）时，滚动或事件拖动动画会变慢。 当资源数量大约为10时，性能没有问题。 当浏览器是Chrome时，也没有问题 请告诉我一些改进这种缓慢性能的方法 演示： 文件 html，正文{ 保证金：0； 填充：0； 字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体； 字体大小：14px； } #历法{ 最大宽度：900px； 利润率：40px自动；
文件
html，正文{
保证金：0；
填充：0；
字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体；
字体大小：14px；
}
#历法{
最大宽度：900px；
利润率：40px自动；
}
document.addEventListener（'DOMContentLoaded'，function（）{
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
插件：['交互'，'资源时间线']，
时区：“UTC”，
defaultView:“resourceTimelineDay”，
方面：1.5，
标题：{
左：“上一个，下一个”，
中心：'标题'，
右图：“resourceTimelineDay、resourceTimelineWeek、resourceTimelineMonth”
},
是的，
resourceLabelText:“房间”，
资源：[
{
id:“a”，
标题：“1”
},
{
id:“b”，
标题：“2”
},
{
id:“c”，
标题：“3”
},
{
id:“d”，
标题：“4”
},
{
id:“e”，
标题：“5”
},
{
id:“f”，
标题：“6”
},
{
id:“z7”，
标题：“7”
},
{
id:“z8”，
标题：“8”
},
{
id:“z9”，
标题：“9”
},
{
id:“z10”，
标题：“10”
},
{
id:“z11”，
标题：“11”
},
{
id:“z12”，
标题：“12”
},
{
id:“z13”，
标题：“13”
},
{
id:“z14”，
标题：“14”
},
{
id:“z15”，
标题：“15”
},
{
id:“z16”，
标题：“16”
},
{
id:“z17”，
标题：“17”
},
{
id:“z18”，
标题：“18”
},
{
id:“z19”，
标题：“19”
},
{
id:“z20”，
标题：“20”
},
{
id:“z21”，
标题：“21”
},
{
id:“z22”，
标题：“22”
},
{
id:“z23”，
标题：“23”
},
{
id:“z24”，
标题：“24”
},
{
id:“z25”，
标题：“25”
},
{
id:“z26”，
标题：“26”
},
{
id:“z27”，
标题：“27”
},
{
id:“z28”，
标题：“28”
},
{
id:“z29”，
标题：“29”
},
{
id:“z30”，
标题：“30”
},
{
id:“z31”，
标题：“31”
},
{
id:“z32”，
标题：“32”
},
{
id:“z33”，
标题：“33”
},
{
id:“z34”，
标题：“34”
},
{
id:“z35”，
标题：“35”
},
{
id:“z36”，
标题：“36”
},
{
id:“z37”，
标题：“37”
},
{
id:“z38”，
标题：“38”
},
{
id:“z39”，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css">
<link rel="stylesheet" href="https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.css">
<link rel="stylesheet" href="https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.css">
<style>
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
}
</style>
<script src="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.js"></script>
</head>
<body>
<div id='calendar'></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceTimeline' ],
timeZone: 'UTC',
defaultView: 'resourceTimelineDay',
aspectRatio: 1.5,
header: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resourceLabelText: 'Rooms',
resources: [
{
id: "a",
title: "1"
},
{
id: "b",
title: "2"
},
{
id: "c",
title: "3"
},
{
id: "d",
title: "4"
},
{
id: "e",
title: "5"
},
{
id: "f",
title: "6"
},
{
id: "z7",
title: "7"
},
{
id: "z8",
title: "8"
},
{
id: "z9",
title: "9"
},
{
id: "z10",
title: "10"
},
{
id: "z11",
title: "11"
},
{
id: "z12",
title: "12"
},
{
id: "z13",
title: "13"
},
{
id: "z14",
title: "14"
},
{
id: "z15",
title: "15"
},
{
id: "z16",
title: "16"
},
{
id: "z17",
title: "17"
},
{
id: "z18",
title: "18"
},
{
id: "z19",
title: "19"
},
{
id: "z20",
title: "20"
},
{
id: "z21",
title: "21"
},
{
id: "z22",
title: "22"
},
{
id: "z23",
title: "23"
},
{
id: "z24",
title: "24"
},
{
id: "z25",
title: "25"
},
{
id: "z26",
title: "26"
},
{
id: "z27",
title: "27"
},
{
id: "z28",
title: "28"
},
{
id: "z29",
title: "29"
},
{
id: "z30",
title: "30"
},
{
id: "z31",
title: "31"
},
{
id: "z32",
title: "32"
},
{
id: "z33",
title: "33"
},
{
id: "z34",
title: "34"
},
{
id: "z35",
title: "35"
},
{
id: "z36",
title: "36"
},
{
id: "z37",
title: "37"
},
{
id: "z38",
title: "38"
},
{
id: "z39",
title: "39"
},
{
id: "z40",
title: "40"
},
{
id: "z41",
title: "41"
},
{
id: "z42",
title: "42"
},
{
id: "z43",
title: "43"
},
{
id: "z44",
title: "44"
},
{
id: "z45",
title: "45"
},
{
id: "z46",
title: "46"
},
{
id: "z47",
title: "47"
},
{
id: "z48",
title: "48"
},
{
id: "z49",
title: "49"
},
{
id: "z50",
title: "50"
},
{
id: "z51",
title: "51"
},
{
id: "z52",
title: "52"
},
{
id: "z53",
title: "53"
},
{
id: "z54",
title: "54"
},
{
id: "z55",
title: "55"
},
{
id: "z56",
title: "56"
},
{
id: "z57",
title: "57"
},
{
id: "z58",
title: "58"
},
{
id: "z59",
title: "59"
},
{
id: "z60",
title: "60"
},
{
id: "z61",
title: "61"
},
{
id: "z62",
title: "62"
},
{
id: "z63",
title: "63"
},
{
id: "z64",
title: "64"
},
{
id: "z65",
title: "65"
},
{
id: "z66",
title: "66"
},
{
id: "z67",
title: "67"
},
{
id: "z68",
title: "68"
},
{
id: "z69",
title: "69"
},
{
id: "z70",
title: "70"
},
{
id: "z71",
title: "71"
},
{
id: "z72",
title: "72"
},
{
id: "z73",
title: "73"
},
{
id: "z74",
title: "74"
},
{
id: "z75",
title: "75"
},
{
id: "z76",
title: "76"
},
{
id: "z77",
title: "77"
},
{
id: "z78",
title: "78"
},
{
id: "z79",
title: "79"
},
{
id: "z80",
title: "80"
},
{
id: "z81",
title: "81"
},
{
id: "z82",
title: "82"
},
{
id: "z83",
title: "83"
},
{
id: "z84",
title: "84"
},
{
id: "z85",
title: "85"
},
{
id: "z86",
title: "86"
},
{
id: "z87",
title: "87"
},
{
id: "z88",
title: "88"
},
{
id: "z89",
title: "89"
},
{
id: "z90",
title: "90"
},
{
id: "z91",
title: "91"
},
{
id: "z92",
title: "92"
},
{
id: "z93",
title: "93"
},
{
id: "z94",
title: "94"
},
{
id: "z95",
title: "95"
},
{
id: "z96",
title: "96"
},
{
id: "z97",
title: "97"
},
{
id: "z98",
title: "98"
},
{
id: "z99",
title: "99"
},
{
id: "z100",
title: "100"
}
],
events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline'
});
calendar.render();
});
</script>
</body>
</html>