I am attempting to use the google calendar module of the fullcalendar plugin in JavaScript. When I attempt to load the google calendar, the console is displaying:
Uncaught TypeError: Cannot read property 'applyAll' of undefined
The error is occurring on line 23 of gcal.js:
21| var fc = $.fullCalendar;
22| console.log($.fullCalendar);
23| var applyAll = fc.applyAll;
The console.log() that I have added returns $.fullCalendar as undefined, and then fc.applyAll is also returning undefined. My knowledge of JS is not good enough to fully understand what is going on in this file, and I am not sure what is going wrong.
Here is my html:
<head>
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<link href='style.css' rel='stylesheet' />
</head>
<body>
<div id='calendar'></div>
</body>
My JavaScript:
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'my-api-key',
events: {
googleCalendarId: 'my-calendar-id'
}
});
});
And I have downloaded the most recent version of gcal.js (there seemed to be a problem with the file, and the site provided a link to the most up to date version).
The problem is with the order you've imported the library files.
fullcalendar is a jQuery plugin, which usually means it will end up as a property on the jQuery object e.g. $.fullCalendar.
Now, the gcal file depends on that property being there, so that it can access the .applyAll method on it, however, you're loading gcal.js before you load fullcalendar.js.
If you change the ordering like this, it works without problems.
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/gcal.js'></script>
As a rule of thumb, try and put the files that you know have no dependencies (they don't rely on another library) first.
Related
I am playing with full calendar and I need change the locale.
When I try to do it. I get an error.
What script do I have to add to get rid off the error?
Chrome dev - error:
pt-br.js:1 Uncaught TypeError: Cannot read property 'datepickerLocale' of undefined
I have used:
html:
<div id='calendar'></div>
JS:
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/locale/pt-br.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.css">
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
locale: 'pt-br'
})
});
</script>
The locale file needs fullcalendar to be present already.
Load the locale file after loading fullcalendar itself.
i think the full calendar is not called correctly. It expects a setting or options object.
Try calling it inside document ready object, by
(function($){
$(function(){
// rest of the code here
})
})(jQuery)
Posting this as my solution was different....
using fullCalendar 3.0.9.2 (latest version as of today), I kept getting the same error
Cannot read property 'datepickerLocale' of undefined
Making sure the locale file was after the .js didn't help
DOES NOT WORK
<script src="path_to_js/fullcalendar.min.js"></script>
<script src="path_to_js/locale-all.js"></script>
DOES WORK
<script src="path_to_js/fullcalendar.js"></script>
<script src="path_to_js/locale-all.js"></script>
The difference is in the use of the 'min' version - went to the full version and all looks/works great.
It might also be that I'm using the 'locale-all' file instead of a single one. Not all combinations tested, though you can't argue with success!
I have seen similar questions to this, but I haven't been able to find an answer. Anyway, I am experimenting using Kendo (open source core for now) in a Visual Studio Cordova project. Taking Cordova out of the equation to start with, I am just trying to get a very simple view with the following to work..
...
<script src="lib/kendo-ui-core/js/jquery.min.js"></script>
<script src="lib/angularjs/angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.core.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.loader.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.view.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.pane.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.application.js"</script>
</head>
<body kendo-mobile-application ng-app="foo">
<kendo-mobile-view ng-controller="MyCtrl" k-title="'My Title'" k-layout="'default'">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div>{{hello}}</div>
</kendo-mobile-view>
<script>
angular.module("foo", [ "kendo.directives" ])
.controller("MyCtrl", function($scope) {
$scope.hello = "Hello World!";
});
</script>
<script src="scripts/index.js"></script>
</body>
</html>
I added each Kendo file to try and get rid of each error (initially just started with kendo.core.js)
At this stage, when I try to run this (just opening index.html in Chrome, out side of Visual Studio), I get
Uncaught TypeError: kendo.ViewContainer is not a function
Observable.extend.init # kendo.mobile.view.js:469
Widget.extend.init # kendo.mobile.pane.js:102
startHistory # kendo.mobile.application.js:171
So this is occuring at the line
that.viewContainer = new kendo.ViewContainer(that.container);
in the file kendo.mobile.view.js.
I don't seem to be able to find where ViewContainer is declared.
If I use a CDN of like <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"> then this works fine, so I need to know which references to use from the core library.
I found the doco that explains what I need here.
I added everything for the "Application" section (in the exact order listed), and then put
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
at the end.
I'm trying to implement FullCalendar into a page on my wordpress web site using the built in page editor.
Here's the code:
<code>
<!DOCTYPE html>
<html>
<head>
<link href='../fullcalendar-2.0.2/fullcalendar.css' rel='stylesheet' />
<script src='../fullcalendar-2.0.2/lib/moment.min.js'></script>
<script src='../fullcalendar-2.0.2/lib/jquery.min.js'></script>
<script src='../fullcalendar-2.0.2/fullcalendar.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
</code>
The problem I am having is that even though I am following the implementation guides closely I keep getting the error:
Uncaught SyntaxError: Unexpected token <
When I click to go into the code in the console it loads nothing up and after an hour of changing small things it's completely stopped me moving forward
If you want to do this in your page's content, you should not include the <html>, <head>, etc elements. You will also need to use an absolute path to your included files so that they do not products 404 errors (likely where the error you see is coming from) - this means you need to start the URL with a / to point directly to the files.
Try this code, assuming that fullcalendar is in your theme under the directory /wp-content/themes/yourtheme/fullcalendar-2.0.2/:
<link href='/wp-content/themes/yourtheme/fullcalendar-2.0.2/fullcalendar.css' rel='stylesheet' />
<script src='/wp-content/themes/yourtheme/fullcalendar-2.0.2/lib/moment.min.js'></script>
<script src='/wp-content/themes/yourtheme/fullcalendar-2.0.2/lib/jquery.min.js'></script>
<script src='/wp-content/themes/yourtheme/fullcalendar-2.0.2/fullcalendar.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
});
});
</script>
<div id="calendar"></div>
I have discovered that the Wordpress plugin for Fullcalendar allows for custom XML feeds. So I have managed to implement the calendar onto my page, which was the aim of this question.
I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.
I'm trying to get this toggles plugin to work but I keep getting the error:
Uncaught TypeError: Object [object Object] has no method 'toggles'
The plugin doesn't give too much implementation information so I figured it would be straight-forward. I know the plugin script is linking correctly and I have jquery above that. Here's my html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="toggles-modern.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" href="toggles.js"></script>
</head>
<body>
<div class="toggle"></div>
<script type="text/javascript">$('.toggle').toggles();</script>
</body>
</html>
How do I get this plugin working exactly? The plugin resources are here:
https://github.com/simontabor/jquery-toggles
http://simontabor.com/labs/toggles/
See if this helps at all....
I use "https://rawgithub.com" to do CDN as that is what they suggest.... HOWEVER this is NOT meant for production type environments so don't do that
<script type="text/javascript" src="https://rawgithub.com/simontabor/jquery-toggles/master/toggles.min.js"></script>
$(function () {
$('.toggle').toggles();
});
I seem to have it working with including the file directly from github... Do you have errors in your dev console?
http://jsfiddle.net/Mutmatt/fJ6gF
Please note: In the js fiddle i included two external resources on the left panel**