I'm attempting to get a simple, empty calendar to show up on a page. I have followed the documentation at http://arshaw.com/fullcalendar/docs/usage/ and the below code seems ok so should be showing a calendar.
Am I doing something wrong here?
Updated code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Calendar</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="navbar.css">
<link rel="stylesheet" href="js/fullcalendar-2.0.2/fullcalendar.css">
<link rel="stylesheet" href="js/fullcalendar-2.0.2/fullcalendar.print.css">
<script src="js/fullcalendar-2.0.2/lib/jquery.min.js"></script>
<script src="js/fullcalendar-2.0.2/lib/moment.min.js"></script>
<script src="js/fullcalendar-2.0.2/fullcalendar.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<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 class="container">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Calendar</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Bookings <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Add</li>
<li>Delete</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Admin</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
<!-- Main component to show the calendar-->
<div id="calendar"></div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Screenshot
http://i.stack.imgur.com/WMUzA.png
You are calling the fullCalendar() plugin on the element with id #calendar, while you have created a DOM element with the class .calendar.
So either change this line:
$('#calendar').fullCalendar();
to
$('.calendar').fullCalendar()
OR change this line:
<div class="calendar"></div>
to
<div id="calendar"></div>
Related
I would like to built a basic website.
Î’elow I have the nav.html document where I have designed a basic dropdown menu. When I open the nav.html with the browser the toggle button works fine, when I click on it,dropdown menu collapses and
when I click on it again drop-down disappears.
The problem appears when I include nav.html in a home.php file.
When I click on the toggle button, dropdown-menu collapses, but when I click on it again dropdown-menu remains open and doesn't disappear.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
</style>
</head>
<body>
<nav class="navbar navbar-light bg-lignt">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
home.php
<html>
<title>Home</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<?php include('./nav.html'); ?>
</body>
</html>
You are including HTML in HTML and this is not supported. As you are including nav.html into home.php, you want to remove tags body, html and completly head.
<nav class="navbar navbar-light bg-lignt">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
PHP and HTML are completly different languages. With PHP you are generating HTML content. You are not including "the result" of nav.html, but the code.
Yes i know this question has been asked previously on Stackoverflow millions of time,i looked over them but still unable to find what's wrong.Any help would be appreciated,thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>front page</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mainNavbar"> <!--Main menu starts-->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
jQuery file should be loaded first in order to achieve that.
So it should be like this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
I am pretty new to bootstrap. I am currently working on Navbar. want to make it responsive on collapse. it works perfectly fine when i am working locally. But i see that menu bar does not close contents on click. I tried to use the CSS link and script link from CDN. also made use of the folders. But i suspect somewhere script is not loading as expected.
here is my code
<html>
<!-- New: report inputs using textarea instead of single text line
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> NB Sep 2016</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/menubarStyle.css">
<link rel="stylesheet" href="css/NB_GUI2.css">
<link rel="stylesheet" href="css/awsModal.css">
<link rel="stylesheet" href="css/PAmodal.css">
<link rel="stylesheet" href="css/eventTable.css">
<link rel="stylesheet" href="css/reportModal.css">
<link rel="stylesheet" href="css/textModal2.css">
</head>
<body>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!--<nav class="navbar navbar-default "> -->
<nav class="navbar navbar-default navbar-fixed-top">
<!--<div class="container-fluid">-->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuItems" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="#">Brand</a>-->
</div>
<div class="navbar-collapse" id="menuItems">
<ul class="nav navbar-nav">
<!--<li><span class="glyphicon glyphicon-align-left" ></span></li>-->
<li> </li>
<li>XYZ</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color:white"><span>Welcome,Dr.David Yang </span></a></li>
<li> <span class="glyphicon glyphicon-user" style="color:brown"></span></li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/fili.min.js"></script>
<!--<script src="js/bootstrap.js"></script>-->
<script src="js/MyJS34-webviewer1-test7.js" type="text/javascript"></script>
<script src="js/teechart.js" type="text/javascript"></script>
<script src="js/teechart-extras.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/downloadify.min.js"></script>
<script type="text/javascript" src="js/jspdf.debug.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/aws-sdk.js"></script>
<!-- <script src="js/PreAnnotationModal6.js" type="text/javascript"></script> -->
<script src="js/PreAnnotationModal7-webviewer1-test4.js" type="text/javascript"></script>
<script src="js/AWSmodal3-webviewer1-test1.js" type="text/javascript"></script>
<script src="js/bootstrap.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I just modified your code it's working fine now
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default row">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Welcome</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left-sm">
<li> </li>
<li>XYZ</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color:#000"><span>Welcome,Dr.David Yang </span></a></li>
<li> <span class="glyphicon glyphicon-user" style="color:brown"></span></li>
</ul>
<hr class="visible-xs visible-sm row"/>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
</body>
</html>
Here in this line <div class="navbar-collapse" id="menuItems"> add collapse class because the data-toggle = "collapse" is written on the button which is supposed to close.
I want to create a navbar with a drop down menu for mobile phones.
I've did this for some other websites and it always worked fine.
Now all of a sudden it stopped working and I wonder why..
This is the code:
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Marco Koopman
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>About me</li>
<li>My school</li>
<li>My skills</li>
<li>More info</li>
</ul>
</div>
</div>
</nav>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"/>
</body>
jQuery must come first in order and proper close script tags as your 2nd script tag is not properly closed.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Marco Koopman
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>About me</li>
<li>My school</li>
<li>My skills</li>
<li>More info</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
I have an index.html and require bootstrap.css and bootstrap.js.When I shrink desktop browser on my desktop, the navbar collapses properly. When I visit the site on my mobile device,everything is responsive EXCEPT the navbar,it doesn't collapse
here is my code
in head
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sylhet International University</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/loaders.min.css" />
<link rel="stylesheet" href="css/jquery.bxslider.css" />
<link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
in body
<!--Navigation Starts-->
<div class="navigation">
<nav class="navbar navbar-default navigation_bar scroll_border navbar-fixed-top">
<div class="container ">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>NEWS</li>
<li>BLOG</li>
<li>ADMISSION</li>
<li>COURSES</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Navigation Ends-->
in footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
You need to have bootstrap.min.js in your scripts:
<script src="path/to/bootstrap.min.js"></script>
Well, You inserted required files(jquery.min.js, bootstrap.css, bootstrap.js).
I test your body code in bootstrap template. That's right. It works in Desktop and Mobile devices correctly.
I think some other files Caused this problem. First Remove other .CSS and .JS files to check it, and then You can find problem better.
You forgot to insert : bootstrap.min.js
<script src="js/bootstrap.min.js"></script>
Also double String around js/bootstrap.min.js""