Following is the code that I am used to display full calendar view. But it is not working.
<html>
<head>
<link href="fullcalendar.css" rel="stylesheet" />
<link href="scheduler.css" rel="stylesheet" />
<script src="moment.js"></script>
<script src="jquery.js"></script>
<script src="fullcalendar.js"></script>
<script src="scheduler.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
You have to init fullcalendar in a script tag on the end of the body using
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
Also, are you sure the script and stylesheet files are on the same directory of your page?
You can find documentation on FullCalendar Docs
Related
I hope this is not a stupid question/issue. I am trying to use fullcalendar for the first time. I am running this from flask on a local server. Here is the code I am attempting to use, based on examples I have found from some googling:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script>
$(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
So when I run that, it just gives me nothing.Am I missing a resource?
You never load the fullcalendar into the div. Do it like this:
<!DOCTYPE html>
<html>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
This way you load it as soon as the document is ready.
Can you check your css link? I think It should end with fullcalendar.min.css not fullcalednar.min.css.
I'm trying to get a simple qtip2 demo running but it wont work need help.
qtip2 is a framework that allows to create individual tooltips.
if you hover over the link a small yellow box should appear.
all files are in the same folder.
<html>
<head>
<title>My site</title>
<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qtip.js"></script>
<script type="text/javascript" src="jquery.imagesloaded.pkg.min.js"></script>
Sample link
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
$('a[title]').qtip();
})();
</script>
Sample link
</body>
</html>
i removed unnessesary codes like the imagesloaded and replace the jQuery link you have with a CDN version.
And it works.
<html>
<head>
<title>My site</title>
<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script type="text/javascript" src="jquery.qtip.js"></script>
Sample link
<script>
// self executing function here
(function() { $('a[title]').qtip(); })(); </script>
Sample link
</body>
</html>
I am a beginner programmer and I'm trying to make a web page that displays a JQuery Inline Date and Time Picker. As I was researching, I found this documentation: DateTimePicker. I followed the steps of first importing the JS and CSS files (after the closing body tag) using these tags:
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
Following those tags, I called on my <input> from my Home.html file with the id of datetimepicker. Then using that id, I copied the code from the tutorial that creates the Inline DateTime Picker Calendar, like so:
$('#datetimepicker').datetimepicker({
inline:true
});
So my Home.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Home</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h3>Inline DateTimePicker</h3>
<input type="text" id="datetimepicker"/><input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
</body>
<!-- CALLS JQUERY LIBRARY FOR DATE AND TIME PICKER -->
<!-- this should go after your </body> -->
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.js"></script>
<script src="./jquery.datetimepicker.js"></script>
<script>
$('#datetimepicker').datetimepicker({
inline:true
});
</script>
</html>
However, when I run this code, I get an error that says:
TypeError: 'undefined' is not a function (evaluating '$('#datetimepicker').datetimepicker({
inline:true
})')
This is what is displaying:
This is what I want to display:
How can I get an Inline calendar to display on my Home.html page?
Put
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.datetimepicker.js"></script>
between your <head></head> tags and remove
<script src="./jquery.js"></script>
I had the same sort of issue , If download the the source code from the XDSoft site
there is build folder , try using jquery.datetimepicker.full.js file from build folder .
You need to include jquery-ui.js
Do not confuse between jQuery versions. You first referenced jQuery here:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
And then you are doing it here:
<script src="./jquery.js"></script>
Please remove one. As the newer jQuery will be active and it doesn't have the plugin registered.
I'm having issues attaching events from a json file to the calendar. The calendar successfully builds but doesn't append the events.
I uploaded the json file for you guys to view: https://api.myjson.com/bins/1dfki
HTML:
<html>
<head>
<title>Bootstrap Calendar</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.2/fullcalendar.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: 'https://api.myjson.com/bins/1dfki'
});
});
According to the documentation JSON feed is expected to be an array of Event objects. http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/ - first sentence. I made an example feed using the data you provided in yours (modified so it had 3 real dates). https://api.myjson.com/bins/1zibm. You tried to make an Agenda object but it just expects Event objects in an array.
I have a fiddle which displays date picker. same code i have written below but nothing happens, what wrong i am doing? When i click on that green colour then no date picker is generated, but in fiddle it is coming fine, where i am doing wrong?
http://jsfiddle.net/cBwEK/10/
<html>
<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script>//mootools script
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
<input name='date_allow_empty' type='text' value='' class='date picker' />
<div id="invokeDP"></div>
<script type="text/javascript">
var dp = new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true,
toggleElements: ['invokeDP']
});
</script>
</body>
</html>
EDIT: I have taken all scripts inside head section, previously these scripts were in body section
I think you miss a mootools core library.
<script src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script>
Here is my working solution http://jsbin.com/unosar/4/edit#source (click at Render button to preview)
Your CSS isn't being detected because you have your link in the body. If I remove the CSS from your fiddle, it doesn't display at all:
http://jsfiddle.net/cBwEK/11/
Try moving this to the head tag along with your script elements. I've also changed your comment block to the correct HTML syntax:
<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script><!-- mootools script -->
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
.......
Also, your class for the input is date picker. Looking at your mootools script, this should be datepicker.