KOKINIO - MANAGER
Edit File: compCalendar.js
/* * Document : compCalendar.js * Author : pixelcave * Description: Custom javascript code used in Calendar page */ var CompCalendar = function() { var calendarEvents = $('.calendar-events'); /* Function for initializing drag and drop event functionality */ var initEvents = function() { calendarEvents.find('li').each(function() { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) var eventObject = { title: $.trim($(this).text()), color: $(this).css('background-color') }; // 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, revertDuration: 0 }); }); }; return { init: function() { /* Initialize drag and drop event functionality */ initEvents(); /* Add new event in the events list */ var eventInput = $('#add-event'); var eventInputVal = ''; // When the add button is clicked $('#add-event-btn').on('click', function(){ // Get input value eventInputVal = eventInput.prop('value'); // Check if the user entered something if ( eventInputVal ) { // Add it to the events list calendarEvents.append('<li class="animation-slideDown">' + $('<div />').text(eventInputVal).html() + '</li>'); // Clear input field eventInput.prop('value', ''); // Init Events initEvents(); } // Don't let the form submit return false; }); /* Initialize FullCalendar */ var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar').fullCalendar({ header: { left: 'prev,next', center: 'title', right: 'month,agendaWeek,agendaDay' }, firstDay: 1, editable: true, droppable: true, 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'); // 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; // 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); // remove the element from the "Draggable Events" list $(this).remove(); }, events: [ { title: 'Gaming Day', start: new Date(y, m, 1), color: '#9b59b6' }, { title: 'Live Conference', start: new Date(y, m, 3) }, { title: 'Top Secret Project', start: new Date(y, m, 4), end: new Date(y, m, 8), color: '#1abc9c' }, { id: 999, title: 'Gym (repeated)', start: new Date(y, m, d - 3, 15, 0), allDay: false }, { id: 999, title: 'Gym (repeated)', start: new Date(y, m, d + 3, 15, 0), allDay: false }, { title: 'Job Meeting', start: new Date(y, m, d, 16, 00), allDay: false, color: '#f39c12' }, { title: 'Awesome Project', start: new Date(y, m, d, 9, 0), end: new Date(y, m, d, 12, 0), allDay: false, color: '#d35400' }, { title: 'Book Reading', start: new Date(y, m, 15), end: new Date(y, m, 16), allDay: true, color: '#3498db' }, { title: 'Party', start: new Date(y, m, d + 8, 21, 0), end: new Date(y, m, d + 8, 23, 30), allDay: false }, { title: 'Follow me on Twitter', start: new Date(y, m, 20), end: new Date(y, m, 24), url: 'http://twitter.com/pixelcave', color: '#e74c3c' } ] }); } }; }();