Unfortunately, the jquery Calendar plugin is malfunctioning

After much consideration, I decided to implement this calendar plugin on my website

Plugin

Unfortunately, it isn't working as expected. I am encountering the following 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)

I have made sure to include the jQuery plugin.

This is the code I have used:

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

Could you please provide assistance in identifying what could be causing the error?

Thank you for your help.

Answer №1

This particular step was overlooked. It is crucial to include the following JavaScript file in your header section:

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

Answer №2

If you're facing this issue, it might be because you are already calling jQuery and attempting to use the full version of JS from Pignose calendar. Make sure you check if jQuery is already loaded and if it is, switch to the normal version instead. If you do switch to the normal version, remember to include moment.js as well. You can get moment.js here.

Once you have made these changes, initialize by using the following code:

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

With these adjustments, everything should now work smoothly.

Answer №3

The reason for this issue might be that you have included a 3.x version of Jquery instead of the required 1.x version by the pignose calendar.

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

Another tip is to place the pignose calendar script in the head section rather than in the body to ensure it loads when necessary. However, it's generally advised to load scripts at the end of your page for faster loading times.

Answer №4

Get the pignose.calendar.full.js script.

Click here to download the file

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing web components in React by solely relying on a CDN for integration

I have a client who has provided us with a vast library of UI elements that they want incorporated into our project. These elements are stored in javascript and css files on a CDN, and unfortunately I do not have access to the source code. All I have at my ...

What is the process for importing css and js files in laravel-webpack when utilizing a newly installed package through composer?

I've been working on installing this package called phackage. You can find more information about it here. After successfully installing it with Composer PHP, I've encountered several errors because I'm using Laravel 5.4 with Webpack 2 and ...

The Net Core controller did not receive the ajax data as expected

My ajax call seems to be having an issue as the data is not getting passed to my controller correctly. Ajax $.ajax( { url: 'Playlist/AttachVideoToPlaylist', contentType: "application/json; charset=utf-8&q ...

How to ensure MUI DataGrid fills the vertical space without any overflow issues

Trying to implement a MUI DataGrid within a Flexbox layout that fills the remaining space precisely can be quite challenging. Imagine a setup like this: --------------------------- | Header | --------------------------- | Table Header ...

What is the process for generating a three-dimensional surface using 3D points in Three.js?

I am currently working on a project that involves creating simple 3D models using dots and lines, whether curved or straight. In the initial version of the project, I utilized SVG elements for rendering, smooth curves, and mouse events. Now, I am explorin ...

What are the best techniques for styling the aria label element in HTML?

Looking to enhance the appearance of a button label upon hover. Curious about how I can customize the aria-label element to resemble the design in the screenshot provided below. https://i.sstatic.net/Mjr7q.png ...

The 'innerText' property is not present in the 'Element' type. (2339)

Recently, I've been working with javaScript and I encountered some issues while writing a function. Strangely, I kept receiving error messages that I couldn't quite understand. Initially, there was a problem where every time I tried to create a j ...

Tips for utilizing regex to locate words and spaces within a text?

I'm feeling so frustrated and lost right now. Any help you can offer would be greatly appreciated. I am currently dealing with an issue in Katex and Guppy keyboard. My goal is to create a regex that will identify the word matrix, locate the slash that ...

Tips for implementing a default font on a website

I've incorporated a unique font into a specific section of my website design, but I'm aware that this particular font may not be available on most of my users' computers. Is there a method to apply this font to selected text without resortin ...

Utilizing Form Validation in Angular 4

In the process of developing a straightforward Angular application that utilizes Twitter Bootstrap and jQuery to showcase employee data. I have hardcoded 4 sets of data which are displayed in a table, as shown in the attached image. The addition of an "Add ...

Curious about the distinction between express-ejs-layouts and DHTML?

According to Google search results, DHTML involves generating HTML content dynamically using Javascript. Meanwhile, EJS also claims to do the same thing with its abbreviation of Embedded JavaScript. It seems like both DHTML and EJS have similar functional ...

Using AngularJS ui-router to implement Bootstrap UI tabs

Having trouble with Bootstrap UI Tabs in AngularJS ui-router. Trying to add an active class when refreshing the page. Passing the tab's URL to the asActive(url) function in my controller to compare with the current URL of the page. Using the "active" ...

When implementing getStaticProps and getStaticPaths in a dynamic route, a 404 error page is displayed

As someone new to Next.js, I decided to delve into creating a basic news website where I could access articles through this specific route: /[category]/[article] The directory structure of pages is organized as follows: _pages __[category] ____index.jsx ...

Customization disrupts the uniformity of button dimensions

When localizing a web application, we encountered an issue with browsers using different fonts for different languages. This led to the height of certain HTML objects changing, especially noticeable with input buttons. While this behavior is expected, how ...

Upon running `npm start`, an unexpected token error arises in the file originating from a local

After developing my first-app with the help of create-react-app, I incorporated some components from Material-UI. Everything was running smoothly when I launched it using npm start. Upon completion, I decided to extract the nice-component into its own fol ...

Stop the link height from changing when hovered over

Incorporating Angular, Angular Material, and Angular Flex-Layout, I have designed a collection of links that resemble cards or tiles. The links initially display an icon and title but transition to show informational text upon hovering. However, for links ...

Text flickering unexpectedly during hover animation in Bootstrap

Encountered a peculiar issue where dark colors flicker during animation. Link to codepen Adding -webkit-backface-visibility: hidden partially resolves the problem, but it also affects font appearance by making it tighter and brighter. This issue is obser ...

Incorporating a dynamic HTML editing button to every new row in a table using JavaScript

My application features a form that allows users to dynamically add new rows to a table using JavaScript: // Function to add a new account row if (tit.innerHTML === "Add Account"){ var table = document.getElementById(tableId); var row = table ...

Warning: multiple selections have been made on the checkboxes

Currently, I am using FormData to submit data and trying to alert the values of checked checkboxes in my form. At the moment, I can only make it work for one checkbox. How can I alert the values of all checked checkboxes? var formData = new FormData(docu ...

Is there a way to dynamically pass values to a form in React?

Learning React on my own has been challenging, especially when trying to accomplish what I thought would be a simple task. To put it briefly, I have a menu with several items. I aim to select a menu item and have a form open next to it. The form shoul ...