Skip to content

Instantly share code, notes, and snippets.

/Bootstrap responsive Calendar?.markdown

Created July 20, 2015 18:50
Show Gist options
  • Save anonymous/473c8feba75535bd1042 to your computer and use it in GitHub Desktop.
Save anonymous/473c8feba75535bd1042 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap responsive Calendar?
Raw
index.html
<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<!-- CSS -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet" />
<link href="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet" />
<link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.print.css" rel="stylesheet" />
<!-- SCRIPTS -->
<script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script class="cssdesk" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js" type="text/javascript"></script>
<script class="cssdesk" src="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<h1>Date</h1>
<div id='calendar'></div>
</div>
</body>
</html>
Raw
script.js
/* Javascript */
$(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true
});
});
Raw
style.css
/* CSS */
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 100%;
margin: 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment