<!DOCTYPE html>
<html>

  <head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.2/fullcalendar.min.css" />
  
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.2/fullcalendar.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.2/scheduler.min.js"></script>
  
   
  <script src="script.js"></script>
  </head>

  <body>
    <h1>Adding events from source!</h1>
    <div id='calendar'></div>

    
  </body>

</html>
// Code goes here
$(document).ready(function() {

    // page is now ready, initialize the calendar...
   var mySource1 = [{
                title : 'Source 1',
                start : moment(),
                allDay: false,
                id: 1,
                description: 'my event 1'
            }];
   var mySource2 = [{
                title : 'Source 2',
                start : moment().add(1, 'days'),
                allDay: false,
                id: 2,
                description: 'my event from 2'
            }];
   $('#calendar').fullCalendar({
        header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
        },
        allDayDefault: false,
        selectable: true,
        selectHelper: true,
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        eventSources:[mySource1, mySource2], 
        eventRender: function(event, element) {
          console.log(event.source);
        }
   });
   

});
/* Styles go here */