matrix.calendar.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. $(document).ready(function(){
  2. maruti.init();
  3. $('#add-event-submit').click(function(){
  4. maruti.add_event();
  5. });
  6. $('#event-name').keypress(function(e){
  7. if(e.which == 13) {
  8. maruti.add_event();
  9. }
  10. });
  11. });
  12. maruti = {
  13. // === Initialize the fullCalendar and external draggable events === //
  14. init: function() {
  15. // Prepare the dates
  16. var date = new Date();
  17. var d = date.getDate();
  18. var m = date.getMonth();
  19. var y = date.getFullYear();
  20. $('#fullcalendar').fullCalendar({
  21. header: {
  22. left: 'prev,next',
  23. center: 'title',
  24. right: 'month,basicWeek,basicDay'
  25. },
  26. editable: true,
  27. droppable: true, // this allows things to be dropped onto the calendar !!!
  28. drop: function(date, allDay) { // this function is called when something is dropped
  29. // retrieve the dropped element's stored Event Object
  30. var originalEventObject = $(this).data('eventObject');
  31. // we need to copy it, so that multiple events don't have a reference to the same object
  32. var copiedEventObject = $.extend({}, originalEventObject);
  33. // assign it the date that was reported
  34. copiedEventObject.start = date;
  35. copiedEventObject.allDay = allDay;
  36. // render the event on the calendar
  37. // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
  38. $('#fullcalendar').fullCalendar('renderEvent', copiedEventObject, true);
  39. // is the "remove after drop" checkbox checked?
  40. // if so, remove the element from the "Draggable Events" list
  41. $(this).remove();
  42. }
  43. });
  44. this.external_events();
  45. },
  46. // === Adds an event if name is provided === //
  47. add_event: function(){
  48. if($('#event-name').val() != '') {
  49. var event_name = $('#event-name').val();
  50. $('#external-events .panel-content').append('<div class="external-event ui-draggable label label-inverse">'+event_name+'</div>');
  51. this.external_events();
  52. $('#modal-add-event').modal('hide');
  53. $('#event-name').val('');
  54. } else {
  55. this.show_error();
  56. }
  57. },
  58. // === Initialize the draggable external events === //
  59. external_events: function(){
  60. /* initialize the external events
  61. -----------------------------------------------------------------*/
  62. $('#external-events div.external-event').each(function() {
  63. // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
  64. // it doesn't need to have a start or end
  65. var eventObject = {
  66. title: $.trim($(this).text()) // use the element's text as the event title
  67. };
  68. // store the Event Object in the DOM element so we can get to it later
  69. $(this).data('eventObject', eventObject);
  70. // make the event draggable using jQuery UI
  71. $(this).draggable({
  72. zIndex: 999,
  73. revert: true, // will cause the event to go back to its
  74. revertDuration: 0 // original position after the drag
  75. });
  76. });
  77. },
  78. // === Show error if no event name is provided === //
  79. show_error: function(){
  80. $('#modal-error').remove();
  81. $('<div style="border-radius: 5px; top: 70px; font-size:14px; left: 50%; margin-left: -70px; position: absolute;width: 140px; background-color: #f00; text-align: center; padding: 5px; color: #ffffff;" id="modal-error">Enter event name!</div>').appendTo('#modal-add-event .modal-body');
  82. $('#modal-error').delay('1500').fadeOut(700,function() {
  83. $(this).remove();
  84. });
  85. }
  86. };