<div id="fullCalendar"></div>
<input type="text" name="selected[]" value="" id="selectedDate">
<script type="text/javascript">
 $().ready(function () {
    var events ={!! $result !!};
    var selectedEventDate=[];
    $calendar = $('#fullCalendar');


    today = new Date();
    y = today.getFullYear();
    m = today.getMonth();
    d = today.getDate();

    $calendar.fullCalendar({
        header: {
            left: 'title',
            right: 'prev,next today'
        },
        defaultDate: today,
        selectable: true,
        selectHelper: false,
        titleFormat: {
            month: 'MMMM YYYY', // September 2015
            week: "MMMM D YYYY", // September 2015
            day: 'D MMM, YYYY'  // Tuesday, Sep 8, 2015
        },
        select: function (start, end) {
            var event_date = new Date(start);
            y = event_date.getFullYear();
            m= parseInt(event_date.getMonth())+1;
            m= (m<10)? '0'+m: m;
            d = (event_date.getDate() < 10) ? '0' + event_date.getDate() : event_date.getDate();
            event_date = y + "-" + m + "-" + d;
            selectedEventDate.push({date:event_date});
            $("#selectedDate").after("<input type='text' name='selected[]' value='asdf'");
        },
        dayClick: function (date, jsEvent, view) {
            $(this).css({background:'#A5E8FF'});

        },
        eventLimit: true, // allow "more" link when too many events
// color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
        events: events,
        eventClick: function(calEvent, jsEvent, view) {

            alert('Event: ' + calEvent.title);
            alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
            alert('View: ' + view.name);

// change the border color just for fun
            $(this).css('border-color', 'red');

        }

    });
});


</script>