Я пытался настроить slotLabelFormat в Fullcalendar v4, используя пользовательскую строку, такую как 'dddd, MMMM D, YYYY', но я получаю js "context.cmdFormatter не является функцией".
Я пытаюсь использовать плагин момента, установив «plugins: [ 'moment', 'interaction', 'resourceTimeline' ]» (я не могу использовать метод импорта для загрузки момента), но затем я получаю ошибку «момент не является функцией».
Может кто-нибудь указать мне правильное направление?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages-premium/timeline/main.css' rel='stylesheet' />
<link href='../packages-premium/resource-timeline/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/moment/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages-premium/timeline/main.js'></script>
<script src='../packages-premium/resource-common/main.js'></script>
<script src='../packages-premium/resource-timeline/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'moment','interaction', 'resourceTimeline' ],
locale: 'es',
now: '2019-08-07',
editable: true,
scrollTime: '00:00'
,
eventClick: function (info) {
alert('Event: ' + info.event.title);
alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
alert('View: ' + info.view.type);
return false;
},
header: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear'
},
defaultView: 'resourceTimelineDay',
views: {
resourceTimelineDay: {
buttonText: 'day',
slotDuration: '01:00'
},
resourceTimelineWeek: {
type: 'resourceTimelineWeek',
//titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },
slotLabelFormat: 'dddd, MMMM D, YYYY',
duration: { weeks: 1 },
slotDuration: {days: 1},
buttonText: 'week'
}
},
dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
navLinks: true,
resourceAreaWidth: '20%',
resourceLabelText: 'Rooms',
resources: [
{ id: 'a', title: 'Auditorium A' },
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
{ id: 'd', title: 'Auditorium D', children: [
{ id: 'd1', title: 'Room D1' },
{ id: 'd2', title: 'Room D2' }
] },
{ id: 'e', title: 'Auditorium E' },
{ id: 'f', title: 'Auditorium F', eventColor: 'red' },
{ id: 'g', title: 'Auditorium G' },
{ id: 'h', title: 'Auditorium H' },
{ id: 'i', title: 'Auditorium I' },
{ id: 'j', title: 'Auditorium J' },
{ id: 'k', title: 'Auditorium K' },
{ id: 'l', title: 'Auditorium L' },
{ id: 'm', title: 'Auditorium M' },
{ id: 'n', title: 'Auditorium N' },
{ id: 'o', title: 'Auditorium O' },
{ id: 'p', title: 'Auditorium P' },
{ id: 'q', title: 'Auditorium Q' },
{ id: 'r', title: 'Auditorium R' },
{ id: 's', title: 'Auditorium S' },
{ id: 't', title: 'Auditorium T' },
{ id: 'u', title: 'Auditorium U' },
{ id: 'v', title: 'Auditorium V' },
{ id: 'w', title: 'Auditorium W' },
{ id: 'x', title: 'Auditorium X' },
{ id: 'y', title: 'Auditorium Y' },
{ id: 'z', title: 'Auditorium Z' }
],
events: [
{ id: '1', resourceId: 'b', start: '2019-08-07T02:00:00', end: '2019-08-07T07:00:00', title: 'event 1',color: '#378006' },
{ id: '2', resourceId: 'c', start: '2019-08-07T05:00:00', end: '2019-08-07T22:00:00', title: 'event 2',color: '#378006' },
{ id: '3', resourceId: 'd', start: '2019-08-06', end: '2019-08-08', title: 'event 3',color: 'red' },
{ id: '4', resourceId: 'e', start: '2019-08-07T03:00:00', end: '2019-08-07T08:00:00', title: 'event 4',color: '#378006' },
{ id: '5', resourceId: 'f', start: '2019-08-07T00:30:00', end: '2019-08-07T02:30:00', title: 'event 5',color: '#378006' }
]
});
calendar.render();
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>