Как правильно настроить FullCalendar с тегами скрипта? - PullRequest
Новая
       105

Как правильно настроить FullCalendar с тегами скрипта?

0 голосов
/ 12 апреля 2020

Использование FullCalendar с плагинами премиум-класса всегда приводит к ошибке после первой визуализации календаря. Да, я видел подобные вопросы в StackOverflow, но они устарели, поскольку имеют дело со старой версией, в которую включен планировщик. js (теперь каждый плагин компонента является отдельным), а jQuery - зависимость (сейчас это не так. основы c - просто создание экземпляра календаря и выполнение с ним каких-либо действий. Понятно, что существует некоторый конфликт с плагинами и основным календарем, который, возможно, можно было бы решить с помощью определенного порядка сценариев, например c. просто не смог разобраться)

Вот моя скрипка: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.js'></script>
</head>
<body>
<script type="text/javascript">
var test;
var eventToAdd;
var calendarEl;
var calendar;
    $(document).ready(function () {
		calendarEl = document.getElementById('calendar');

		calendar = new FullCalendar.Calendar(calendarEl, {
		  plugins: [ 'timeline', 'dayGrid', 'timeGrid', 'interaction' ],
		  now: '2020-04-01',
		  editable: true,
		  aspectRatio: 1.8,
		  scrollTime: '00:00',
		  header: {
			left: 'today prev,next',
			center: 'title',
			right: 'timelineDay,timeGridWeek,dayGridMonth'
		  },
		  defaultView: 'timeGridWeek',
		  minTime: "08:00",
		  maxTime: "22:00",
		  displayEventEnd: true,
		  selectable: true,
		  select: function (info) {
						var newEvent = new Object();
						newEvent.title = "New Event!";
						newEvent.start = moment(info.start).format();
						newEvent.allDay = false;
						eventToAdd = newEvent;
						calendarEl.fullCalendar('renderEvent', eventToAdd); //calendarEl.fullCalendar is not defined, so this throws calendarEl.fullCalendar is not a function
					}
		});
    
    //Calling calendarEl.fullCalendar after the above code to  instantiate it, throws the error that says calendarEl.fullCalendar is not a function
   var newEvent = new Object();
	 newEvent.title = "New Event!";
	 newEvent.start = moment(moment(new Date()).format()).format();
	newEvent.allDay = false;
	eventToAdd = newEvent;
	//calendarEl.fullCalendar('renderEvent', eventToAdd); //Calling calendarEl.fullCalendar after the above code to  instantiate it, throws the error that says calendarEl.fullCalendar is not a function

		calendar.render();
    });
</script>
<style>

  body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  p {
    text-align: center;
  }

  #calendar {
    max-width: 900px;
    margin: 50px auto;
  }

  .fc-resource-area td {
    cursor: pointer;
  }

</style>
  <div id='calendar'></div>
</body>
</html>

Как правильно настроить его с помощью тегов скрипта?

1 Ответ

1 голос
/ 13 апреля 2020

Там не было ничего плохого в настройке. Было много других вопросов с такой же ошибкой calendar.fullCalendar is not a function, и в одном из вопросов в принятом ответе упоминалось, что проблемой для них (в их версии календаря) был конфликт между плагином и основным календарем, поэтому Я предположил, что изменение порядка загрузки скриптов решит проблему.

В новой версии библиотеки больше нет метода fullCalendar. Правильный способ добавить событие на самом деле calendar.addEvent.

. Все, что вы делаете, см. В документации по https://www.fullcalendar.io/docs. У них есть документация для разных версий библиотеки, поэтому вы не будете смешивать примеры из разных версий, как я.

...