full-calendar basic example

by mukkaram waheed

HTML

<link rel="stylesheet" href="http://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css">
<script src="http://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.js"></script>
<div id='calendar'></div>

CSS

.oncli{
  cursor:pointer;
}

JavaScript

$(document).ready(function() {
		$('#calendar').fullCalendar({
    

      defaultDate: '2017-11-12',

      eventDestroy: function(event, element, view)
      {
          /* alert('eventDestroy on "' + event.title + '"'); */
          console.log(event, element, view);
      },
       eventRender: function(event, element) {
       console.log(event._id);
            element.append( "<span class='closeon oncli' >X</span>" )
            element.find(".closeon").click(function() {
               $('#calendar').fullCalendar('removeEvents',event._id);
            });
        },
   /*    eventClick: function(calEvent, jsEvent, view)
      {
          if (confirm('Delete "' + calEvent.title + '"?'))
          {
              $('#calendar').fullCalendar('removeEvents', calEvent._id);
          }
      }, */

			events: [
				{
					title: 'All Day Event',
					start: '2017-11-01',
          value: '30'
				},
				{
					title: 'Long Event',
					start: '2017-11-07',
					end: '2017-11-10'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2017-11-09T16:00:00',
          color: 'Green'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2017-11-16T16:00:00',
          color: 'red'
				},
				{
					title: 'Meeting',
					start: '2017-11-12T10:30:00',
					end: '2017-11-12T12:30:00'
				},
				{
					title: 'Lunch',
					start: '2017-11-12T12:00:00'
				},
				{
					title: 'Birthday Party',
					start: '2017-11-13T07:00:00'
				}
			]
		});
		
	});