I have tried to add the fullCalendar jquery to a view in my MVC 4 project. When I try to laod the page there are no errors but the calendar does not appear on the page. I am not sure why it isn't appearing and I have looked at the documentation and it looks like I got everything covered.
Here is my HTML:
#{
ViewBag.Title = "Calendar";
}
<h2>Calendar</h2>
<html>
<head>
<title>Calendar</title>
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/fullcalendar.print.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("/Scripts/moment.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery-ui.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/fullcalendar.min.js")"></script>
<script type="text/javascript">
$("#calendar").fullCalendar({
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
HERE IS MY CSS:
#calendar {
width: 900px;
margin: 40px auto;
}
Add refs to the libs you want to use;
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'>
Related
Can someone help me with this code. Is there any problem? Because I'm not able to display the calendar when I'm running it.
<!DOCTYPE html>
<html>
<head>
<link href="CSS/Master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Holder"></div>
<div id="Datepicker1"></div>
</div>
<script type="text/javascript">
$(function() {
$("#Datepicker1").datepicker({
numberOfMonths:3
});
});
</body>
</html>
As mentioned in the comments, you haven't included jQuery or jQuery UI, and your HTML closing tags are incorrect. If you view the source of the demo on the jqueryui site, you will find the code is a little different you yours.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
To implement this into your code, it would be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="CSS/Master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="holder"></div>
<div id="datepicker1"></div>
<script type="text/javascript">
$(function() {
$("#datepicker1").datepicker({
numberOfMonths:3
});
});
</script>
</body>
</html>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
You have to include jQuery and jQuery UI (I changed a few things in your markup as well):
<!DOCTYPE html>
<html>
<head>
<!-- <link> doesn't need a closing tag -->
<link href="CSS/Master.css" rel="stylesheet" type="text/css">
<!-- include the jQuery UI style sheet -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- include jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="Datepicker1"></div>
<script type="text/javascript">
$(function() {
$("#Datepicker1").datepicker({
numberOfMonths: 3
});
});
</script>
</body>
</html>
This my code.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="~/Style/fullcalendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/Custom/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/Custom/moment.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
})
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Doing with asp.net MVC project.It nothing show.What happen and what need more in my code?I just follow do with FullCalendar Basic Usage .Thanks.
I'm studying Jquery, and I was trying to do a simple SlideShow, but nothing happens...
Here's my HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<meta charset="UTF-8">
<title>SlideShow</title>
</head>
<body>
<div id="slides">
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<img src="imgs/3.jpg">
</div>
<script type="text/javascript">
$(function(){
$("#slides").cycle({
fx: 'fade',
speed:2000,
timeout:4000,
});
})
</script>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
</body>
</html>
My Css:
*{
margin: 0;
padding: 0;
}
#slides{
width: 1024px;
height: 768px;
margin: 0 auto;
overflow: hidden;
}
I also tried to change, this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
for this:
<script src="js/jquery-1.11.0.js"></script>
Nothing...
You need to include jQuery before your Cycle plugin, so reverse the order of your scripts here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
Also, it's better to include CSS before Javascript as well as putting your Javascript at the bottom of your page before closing </body> tag.
I'm trying to use jScrollPane and always get a Javascript error "jScrollPane is not a function". My Header looks like this
...
<link rel="stylesheet" type="text/css" href="assets/css/jquery.jscrollpane.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ruda" media="all" />
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="assets/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
script.js contains this line of code:
$(window).load(function() {
$(function(){ $('.scrollbar').jScrollPane(); });
});
My div looks like this:
<div class="scrollbar"><p>...</p></div>
And has the following styles:
.scrollbar {
background: none repeat scroll 0 0 #FFFFFF;
max-height: 550px;
overflow: auto;
}
Whatever I tried, I keep getting this error and have absolutely no idea, how to get jScrollpane to function properly. Any help with this would be appreciated.
Seem to be having some issues with the JQRangeSlider. Trying to implement this tool into an MVC project. After the slider is called the alert is never reached. Is there a bug? I have this working in another project in Dreamweaver, though it renders fine in the live preview mode it does not work bringing it to any browser. Here's my code...
ViewBag.Title = "Test";
Layout = "";
}
<html>
<head>
<title>"Slider"</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery- ui.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/slider/CSS/classic.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")" type="text/javascript"></script>
<script src="../../Content/slider/Scripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderMouseTouch.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderDraggable.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderBar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQDateRangeSliderHandle.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderLabel.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQEditRangeSliderLabel.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSlider.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQEditRangeSlider.js")" type="text/javascript"></script>
</head>
<body>
<div class="page-header">
<h2>Test</h2>
</div>
<div id="slider" style="width:200px;"></div>
<input type="text" class="datepicker" />
<script type="text/javascript">
$(function () {
$("#slider").editRangeSlider();
alert("whocareswhateverbye");
});
</script>
</body>
</html>
I think your code is failing at
$("#slider").editRangeSlider();
due to a compatibility issue with jQuery 1.7, so it's never reaching the alert.
It's working fine with jQuery 1.8 as demonstrated here:
http://jsfiddle.net/QwAqy/1/