jquery Calendar plugin not works

Question

I decide to use this calendar plugin at my website

Plugin

But it not works. I get this error

$(...).pignoseCalendar is not a function at HTMLDocument. (Index:97) at mightThrow (jquery-3.1.1.js:3570) at process (jquery-3.1.1.js:3638)

But I include jquery plugin.

Here is my code

<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<link href="~/Content/pignose.calendar.min.css" rel="stylesheet" />
<script src="~/Scripts/pignose.calendar.min.js"></script>
<div id="container" style="width: 100%; height: 700px;  margin-top: 85px; white-space: nowrap;">
    <div id="left3" >

    </div>
    <div id="right3">
        <p class="blue-text" style="margin-top: 10px;"><b>Opening times</b></p>
        <div class="calendar"></div>
    </div>
</div>
<script>
    $(function() {
        $('.calendar').pignoseCalendar();
    });
</script>

Where can be error?

Thank's for help.

Answer 1

You missed this one. We want add at first this js file in your header.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 2

I just had this problem. You're probably calling jquery already and trying to use the full version js from pignose calendar.

Check if you have jQuery already and if so, stop using the full version and use the normal version. In case you use the normal version you'll have to add moment.js as well. You can download it here: moment.js

After that, call initialize like this:

$(function () {
      $('.pgcalendar').pignoseCalender();
})

It should work as expected now.

Answer 3

This may be due to you including a 3.x version of Jquery, instead of a 1.x version that the pignose calendar requires.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

I also found including pignose calendar in the head rather than in the body helped it ensure it was loaded when needed. Though general practice is to heap as much script at the end of your page for faster load/render times.

Answer 4

Download the pignose.calendar.full.js file

https://www.jqueryscript.net/time-clock/Beautiful-Multifunctional-Calendar-Plugin-For-jQuery-PIGNOSE-Calender.html

<script type="text/javascript">
  $(document).ready(function() {
    $('.calender').pignoseCalendar();
  })
</script>