CODEWITHSUNDEEP
jquerylaravel-5fullcalendarlaravel-blade
vsoni
vsoni

Reputation: 497

Uncaught TypeError: $(...).fullCalendar is not a function(…)

$(document).ready(function() {

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

    $('#calendar').fullCalendar({
        // put your options and callbacks here
        left:   'Calendar',
        center: '',
        right:  'today prev,next'
    })

});
<html>
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='/js/fullcalendar/lib/moment.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
<link rel='stylesheet' href='/js/fullcalendar/fullcalendar.css' />
    </head>
  <body>
  <div id='calendar'></div>
  </body>

  </html>

I am trying to add calendar with my blade template and I end up with this error.

app.js:3 Uncaught TypeError: $(...).fullCalendar is not a function(…)

my head section looks like this

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='/js/fullcalendar/lib/moment.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
<link rel='stylesheet' href='/js/fullcalendar/fullcalendar.css' />

and than after that I am calling fullCalender on ready event

<script>
$(document).ready(function() {

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

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});
</script>

With CDN I am trying to fetch latest Jquery and FullCalendar.

With my snippet i have added /lib/moment.min.js I confirm that this file loads fine from my local machine.

Upvotes: 0

Views: 23504

Answers (3)

Beginner
Beginner

Reputation: 4153

Include your script after including your jquery library

    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://momentjs.com/downloads/moment.min.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
        <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" />
        </head>
      <body>
         <div id='calendar'></div>

        <script>
            $(document).ready(function() {

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

            $('#calendar').fullCalendar({
                // put your options and callbacks here
                left:   'Calendar',
                center: '',
                right:  'today prev,next'
                });

            });
        </script>
      </body>
      </html>

Upvotes: 2

vsoni
vsoni

Reputation: 497

I appreciate all for your time taking to help me out here. I found that I have got other .js file resides at the bottom of the page which causes this issue. I commented out that .js and I got the calendar showing on my blade template. Thanks all.

Upvotes: 0

norcal johnny
norcal johnny

Reputation: 2115

Where is your jquery ui and you need to run scripts at the bottom and css at top.

Codepen Demo http://codepen.io/norcaljohnny/pen/OWLjaX

<head>
<link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' />
</head>

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

<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery-ui.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script>
</body>

This is the sample source from the developer.

> <meta charset='utf-8' /> <link href='../fullcalendar.min.css'
> rel='stylesheet' /> <link href='../fullcalendar.print.min.css'
> rel='stylesheet' media='print' /> <script
> src='../lib/moment.min.js'></script> <script
> src='../lib/jquery.min.js'></script> <script
> src='../lib/jquery-ui.min.js'></script> <script
> src='../fullcalendar.min.js'></script> <script>

Upvotes: 3

Related Questions