Ajax Loader
HTML 
<!-- HTML -->
1
<!-- HTML -->
2
<!DOCTYPE html>
3
<html>
4
  <head>
5
    <title>Calendar</title>
6
7
    <!-- CSS -->
8
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet" />
9
    <link href="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet" />
10
    <link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.print.css" rel="stylesheet" />
11
12
    <!-- SCRIPTS -->
13
    <script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
14
    <script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
15
    <script class="cssdesk" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js" type="text/javascript"></script>
16
    <script class="cssdesk" src="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
17
  </head>
18
19
  <body>
20
    <div class="container">
21
      <h1>Date</h1>
22
23
      <div id='calendar'></div>
24
    </div>
25
  </body>
26
</html>
 
CSS 
/* CSS */
1
/* CSS */
2
body {
3
  margin-top: 40px;
4
  text-align: center;
5
  font-size: 14px;
6
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
7
}
8
 
9
#calendar {
10
  width: 100%;
11
  margin: 0 auto;
12
}
 
JavaScript 
/* Javascript */
1
/* Javascript */
2
$(function () {
3
  var date = new Date();
4
  var d = date.getDate();
5
  var m = date.getMonth();
6
  var y = date.getFullYear();
7
8
  $('#calendar').fullCalendar({
9
    header: {
10
      left: 'prev,next today',
11
      center: 'title',
12
      right: 'month,agendaWeek,agendaDay'
13
    },
14
    editable: true
15
  });
16
});
 

Month Week Day Date Calendar

CSSDeck G+