FullCalendar

HTML

<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.3/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.9.0/printThis.min.js"></script>
<div id='calendar'></div>
<a class="addVal" href="#">Click me</a>
<button id="print">Print</button>

CSS

body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		width: 600px;
		margin: 0 auto;
		}

JavaScript

$(document).ready(function() {
		
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
    var data = [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d-3, 16, 0),
					allDay: false
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+4, 16, 0),
					allDay: false
				},
				{
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false
				},
				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+1, 22, 30),
					allDay: false
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://google.com/'
				}];
    
    $('.addVal').click(function(){
			data.push({
					title: 'Shanid Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				});
      console.log(data);
      $('#calendar').fullCalendar( 'refetchEvents' );
			//quadCalender();      
    })
		
    var calendar = $('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        selectHelper: true,
        editable: false,
        events: data
      });
    
		$("#print").on("click",function(){
		  $('#calendar').printThis();
		})
    //quadCalender();
		
		
	});