CODEWITHSUNDEEP
javascriptphpjqueryfullcalendar
jkloster7
jkloster7

Reputation: 39

FullCalendar Not Displaying Calendar

I'm working on a simple cms app but I can't get the Full Calendar plugin to display the calendar. I've followed the steps that I found online and nothing has worked. I've been trying to solve this problem for a week and can't figure it out. I've checked the console for errors and it looks good.

So I wanted to reach out. My app is built in PHP, my code is included below. I've linked to everything and the jquery is working.

The code for the calendar I've included in the head section.

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="css/admin-main.css">

<title>CMS</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">


<script type="text/javascript">
    $(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        weekends: true
    });

});
</script>

</head>

In the HTML on the calendar page I have this included.

<div id="calendar"></div>

Any help would be greatly appreciated! Thanks!

Upvotes: 1

Views: 10770

Answers (2)

Jacob Hilt
Jacob Hilt

Reputation: 23

I know this question is old and you may have already found the solution, however, i will give my answer to help anyone else that may be running into the same issue.

I found that when the console is giving you the error that fullcalendar is not a function and your code seems to be correct, its for the following reason.

If you are using bootstrap, you need to remove the Jquery link provided in the bootstrap starter template. You have already loaded jquery in the header, by doing it again in the body, it is creating the error.. I hope it helps!

Upvotes: 2

Syden
Syden

Reputation: 8625

You have an extra ) on .fullCalendar(), should be:

$('#calendar').fullCalendar({
    //options
});

Example below: 

$(document).ready(function() {
  // page is now ready, initialize the calendar...
  $('#calendar').fullCalendar({
    weekends: true
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<div id="calendar"></div>

Upvotes: 0

Related Questions