Я боролся с этим некоторое время, поэтому, пожалуйста, обратитесь за помощью. Здесь я пытаюсь получить полный календарь с помощью momentTimezone для поддержания часового пояса независимо от часового пояса системы клиента. Поэтому я просто использую файл часовых поясов. html из полной папки календаря для целей тестирования, и я включил файлы момента js («момент», «момент-часовой пояс»).
Так что, когда я запускаю файл. Выдает ошибку
введите описание изображения здесь
введите описание изображения здесь
Вот мой код
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<link href='../packages/timegrid/main.css' rel='stylesheet' />
<link href='../packages/list/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/moment/main.js'></script>
<script src='../packages/moment-timezone/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src='../packages/timegrid/main.js'></script>
<script src='../packages/list/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var initialTimeZone = 'America/New_York';
var timeZoneSelectorEl = document.getElementById('time-zone-selector');
var loadingEl = document.getElementById('loading');
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'moment','momentTimezone','interaction', 'dayGrid', 'timeGrid', 'list' ],
timeZone: initialTimeZone,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2019-08-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2019-08-01'
},
{
title: 'Long Event',
start: '2019-08-07',
end: '2019-08-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-08-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-08-16T16:00:00'
},
{
title: 'Conference',
start: '2019-08-11',
end: '2019-08-13'
},
{
title: 'Meeting',
start: '2019-08-12T10:30:00',
end: '2019-08-12T12:30:00'
}
],
loading: function(bool) {
if (bool) {
loadingEl.style.display = 'inline'; // show
} else {
loadingEl.style.display = 'none'; // hide
}
},
eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' },
dateClick: function(arg) {
console.log('dateClick', calendar.formatIso(arg.date));
},
select: function(arg) {
console.log('select', calendar.formatIso(arg.start), calendar.formatIso(arg.end));
}
});
calendar.render();
// load the list of available timezones, build the <select> options
// it's HIGHLY recommended to use a different library for network requests, not this internal util func
FullCalendar.requestJson('GET', 'php/get-time-zones.php', {}, function(timeZones) {
timeZones.forEach(function(timeZone) {
var optionEl;
if (timeZone !== 'UTC') { // UTC is already in the list
optionEl = document.createElement('option');
optionEl.value = timeZone;
optionEl.innerText = timeZone;
timeZoneSelectorEl.appendChild(optionEl);
}
});
}, function() {
// TODO: handle error
});
// when the timezone selector changes, dynamically change the calendar option
timeZoneSelectorEl.addEventListener('change', function() {
calendar.setOption('timeZone', this.value);
});
});
</script>
</head>
<body>
<div id='top'>
<div class='left'>
Timezone:
<select id='time-zone-selector'>
<option value='local' selected>local</option>
<option value='UTC'>UTC</option>
</select>
</div>
<div class='right'>
<span id='loading'>loading...</span>
<span id='script-warning'><code>php/get-events.php</code> must be running.</span>
</div>
<div class='clear'></div>
</div>
<div id='calendar'></div>
</body>
</html>