var Calendar = function () { //function to initiate Full CAlendar var runCalendar = function () { var $modal = $('#event-management'); $('#event-categories div.event-category').each(function () { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) // it doesn't need to have a start or end var eventObject = { title: $.trim($(this).text()) // use the element's text as the event title }; // store the Event Object in the DOM element so we can get to it later $(this).data('eventObject', eventObject); // make the event draggable using jQuery UI $(this).draggable({ zIndex: 999, revert: true, // will cause the event to go back to its revertDuration: 50 // original position after the drag }); }); /* initialize the calendar -----------------------------------------------------------------*/ var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var form = ''; var calendar = $('#calendar').fullCalendar({ buttonText: { prev: '', next: '' }, header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, events: [{ title: 'Meeting with Boss', start: new Date(y, m, 1), className: 'label-default' }, { title: 'Bootstrap Seminar', start: new Date(y, m, d - 5), end: new Date(y, m, d - 2), className: 'label-teal' }, { title: 'Lunch with Nicole', start: new Date(y, m, d - 3, 12, 0), className: 'label-green', allDay: false }], editable: true, droppable: true, // this allows things to be dropped onto the calendar !!! drop: function (date, allDay) { // this function is called when something is dropped // retrieve the dropped element's stored Event Object var originalEventObject = $(this).data('eventObject'); var $categoryClass = $(this).attr('data-class'); // we need to copy it, so that multiple events don't have a reference to the same object var copiedEventObject = $.extend({}, originalEventObject); // assign it the date that was reported copiedEventObject.start = date; copiedEventObject.allDay = allDay; if ($categoryClass) copiedEventObject['className'] = [$categoryClass]; // render the event on the calendar // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); // is the "remove after drop" checkbox checked? if ($('#drop-remove').is(':checked')) { // if so, remove the element from the "Draggable Events" list $(this).remove(); } }, selectable: true, selectHelper: true, select: function (start, end, allDay) { $modal.modal({ backdrop: 'static' }); form = $("
"); form.append(""); form.find(".row").append("