123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- var Calendar = function () {
- return {
- //main function to initiate the module
- init: function () {
- App.addResponsiveHandler(function () {
- Calendar.initCalendar();
- });
- $('.page-sidebar .sidebar-toggler').click(function () {
- Calendar.initCalendar();
- });
- Calendar.initCalendar();
- },
- initCalendar: function () {
- if (!jQuery().fullCalendar) {
- return;
- }
- var date = new Date();
- var d = date.getDate();
- var m = date.getMonth();
- var y = date.getFullYear();
- var h = {};
- if (App.isRTL()) {
- if ($('#calendar').parents(".portlet").width() <= 720) {
- $('#calendar').addClass("mobile");
- h = {
- right: 'title, prev, next',
- center: '',
- right: 'agendaDay, agendaWeek, month, today'
- };
- } else {
- $('#calendar').removeClass("mobile");
- h = {
- right: 'title',
- center: '',
- left: 'agendaDay, agendaWeek, month, today, prev,next'
- };
- }
- } else {
- if ($('#calendar').parents(".portlet").width() <= 720) {
- $('#calendar').addClass("mobile");
- h = {
- left: 'title, prev, next',
- center: '',
- right: 'today,month,agendaWeek,agendaDay'
- };
- } else {
- $('#calendar').removeClass("mobile");
- h = {
- left: 'title',
- center: '',
- right: 'prev,next,today,month,agendaWeek,agendaDay'
- };
- }
- }
-
- var initDrag = function (el) {
- // 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(el.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
- el.data('eventObject', eventObject);
- // make the event draggable using jQuery UI
- el.draggable({
- zIndex: 999,
- revert: true, // will cause the event to go back to its
- revertDuration: 0 // original position after the drag
- });
- }
- var addEvent = function (title) {
- title = title.length == 0 ? "Untitled Event" : title;
- var html = $('<div class="external-event label">' + title + '</div>');
- jQuery('#event_box').append(html);
- initDrag(html);
- }
- $('#external-events div.external-event').each(function () {
- initDrag($(this))
- });
- $('#event_add').unbind('click').click(function () {
- var title = $('#event_title').val();
- addEvent(title);
- });
- //predefined events
- $('#event_box').html("");
- addEvent("My Event 1");
- addEvent("My Event 2");
- addEvent("My Event 3");
- addEvent("My Event 4");
- addEvent("My Event 5");
- addEvent("My Event 6");
- $('#calendar').fullCalendar('destroy'); // destroy the calendar
- $('#calendar').fullCalendar({ //re-initialize the calendar
- header: h,
- slotMinutes: 15,
- 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');
- // 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;
- copiedEventObject.className = $(this).attr("data-class");
- // 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();
- }
- },
- events: [{
- title: 'All Day Event',
- start: new Date(y, m, 1),
- backgroundColor: App.getLayoutColorCode('yellow')
- }, {
- title: 'Long Event',
- start: new Date(y, m, d - 5),
- end: new Date(y, m, d - 2),
- backgroundColor: App.getLayoutColorCode('green')
- }, {
- title: 'Repeating Event',
- start: new Date(y, m, d - 3, 16, 0),
- allDay: false,
- backgroundColor: App.getLayoutColorCode('red')
- }, {
- title: 'Repeating Event',
- start: new Date(y, m, d + 4, 16, 0),
- allDay: false,
- backgroundColor: App.getLayoutColorCode('green')
- }, {
- title: 'Meeting',
- start: new Date(y, m, d, 10, 30),
- allDay: false,
- }, {
- title: 'Lunch',
- start: new Date(y, m, d, 12, 0),
- end: new Date(y, m, d, 14, 0),
- backgroundColor: App.getLayoutColorCode('grey'),
- allDay: false,
- }, {
- title: 'Birthday Party',
- start: new Date(y, m, d + 1, 19, 0),
- end: new Date(y, m, d + 1, 22, 30),
- backgroundColor: App.getLayoutColorCode('purple'),
- allDay: false,
- }, {
- title: 'Click for Google',
- start: new Date(y, m, 28),
- end: new Date(y, m, 29),
- backgroundColor: App.getLayoutColorCode('yellow'),
- url: 'http://google.com/',
- }
- ]
- });
- }
- };
- }();
|