jquery callendar example

<script src="http://myhost.com/assets/js/jquery.min.1.7.1.js"></script>
<script src="http://myhost.com/assets/js/jquery.fullcalendar.2.0.0.js"></script>
<div id="calendar"></div>
<script>
function updateCalendarInputs(calendar) {
    var all_events = calendar.clientEvents();

    $('#calendar-hidden-inputs').empty();
    $.each(all_events, function(i, val) {
        var input = $('<input />');
        input.attr('type', 'hidden');
        input.attr('name', 'calendar_events[]');
        input.val(val.start.format() + '::' + val.end.format());
        $('#calendar-hidden-inputs').append(input);
    });
}

$(function() {
    calendar = $('#calendar').fullCalendar({
        timezone: 'UTC',
        defaultDate: '2014-06-30T06:40:37+00:00',
        timeFormat: 'H:mm',
        axisFormat: 'H:mm',
        slotEventOverlap: false,
        columnFormat: {
            week: 'ddd'
        },
        firstDay: 1,
        defaultView: 'agendaWeek',
        header: {
            left: '',
            center: '',
            right: ''
        },
        editable: true,
        disableDragging: false,
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
            calendar.fullCalendar('renderEvent', {
                start: start,
                end: end
            }, true /* make the event "stick" */);

            calendar.fullCalendar('unselect');
        },
        eventClick: function(calEvent, jsEvent, view) {
            calendar.fullCalendar('removeEvents', calEvent._id);
        },
        eventAfterAllRender: function(view) {
            updateCalendarInputs(view.calendar);
        },
        allDaySlot: false,
        events:
        [
            {
                start: '2014-06-30T00:00:00+00:00',
                end: '2014-06-30T01:00:00+00:00'
            },
            {
                start: '2014-06-30T02:00:00+00:00',
                end: '2014-06-30T16:00:00+00:00'
            },
            {
                start: '2014-07-01T07:30:00+00:00',
                end: '2014-07-01T13:00:00+00:00'
            },
            {
                start: '2014-07-01T13:30:00+00:00',
                end: '2014-07-01T18:00:00+00:00'
            },
            {
                start: '2014-07-02T00:30:00+00:00',
                end: '2014-07-02T04:00:00+00:00'
            },
            {
                start: '2014-07-02T05:00:00+00:00',
                end: '2014-07-02T09:00:00+00:00'
            },
            {
                start: '2014-07-03T01:00:00+00:00',
                end: '2014-07-03T11:30:00+00:00'
            }
        ]
    });
});
</script>