Search code examples
javascriptfullcalendarfullcalendar-4fullcalendar-scheduler

How can I set up FullCalendar correctly with script tags?

Instantiating the FullCalendar with the premium plugins always results in an error after the calendar is rendered the first time. Yes, I've seen the similar questions on StackOverflow, but they're outdated, as they deal with an old version where Scheduler.js is included (now each component plugin is separate) and jQuery was a dependency (now it isn't).

(Note: I know this sounds like a really lame, newbie question, but trust me it isn't. I've spent days trying to do something that should be very basic - just instantiating the calendar and doing something with it. It's clear that there is some conflict with the plugins and the core calendar, which perhaps could be solved with a particular order of scripts, etc. which I simply haven't been able to figure out)

Here is my fiddle:

<!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>

How can I set up it correctly with script tags?

Solution

  • There was nothing wrong with the setup. There were many other questions that had the same error calendar.fullCalendar is not a function, and in one of the questions, the accepted answer mentioned that the problem for them (in their version of the calendar) was a conflict between the plugin and the core calendar, so I assumed changing the order in which the scripts were loaded would solve the problem.

    There is no longer a fullCalendar method in the new version of the library. The correct way to add an event is actually calendar.addEvent.

    Refer to the documentation at https://www.fullcalendar.io/docs for anything you are doing. They have got documentation for different versions of the library, so you will not mix examples from different versions, like I did.