calendar-demo.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. $(document).ready(function() {
  2. $('#calendar-example-1').fullCalendar({
  3. header: {
  4. left: 'prev,next today',
  5. center: 'title',
  6. right: 'month,agendaWeek,agendaDay'
  7. },
  8. defaultDate: '2014-01-12',
  9. editable: true,
  10. events: [{
  11. title: 'All Day Event',
  12. start: '2014-01-01'
  13. }, {
  14. title: 'Long Event',
  15. start: '2014-01-07',
  16. end: '2014-01-10'
  17. }, {
  18. id: 999,
  19. title: 'Repeating Event',
  20. start: '2014-01-09T16:00:00'
  21. }, {
  22. id: 999,
  23. title: 'Repeating Event',
  24. start: '2014-01-16T16:00:00'
  25. }, {
  26. title: 'Meeting',
  27. start: '2014-01-12T10:30:00',
  28. end: '2014-01-12T12:30:00'
  29. }, {
  30. title: 'Lunch',
  31. start: '2014-01-12T12:00:00'
  32. }, {
  33. title: 'Birthday Party',
  34. start: '2014-01-13T07:00:00'
  35. }, {
  36. title: 'Click for Google',
  37. url: 'http://google.com/',
  38. start: '2014-01-28'
  39. }]
  40. });
  41. /* initialize the external events
  42. -----------------------------------------------------------------*/
  43. $('#external-events div.external-event').each(function() {
  44. // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
  45. // it doesn't need to have a start or end
  46. var eventObject = {
  47. title: $.trim($(this).text()) // use the element's text as the event title
  48. };
  49. // store the Event Object in the DOM element so we can get to it later
  50. $(this).data('eventObject', eventObject);
  51. // make the event draggable using jQuery UI
  52. $(this).draggable({
  53. zIndex: 999,
  54. revert: true, // will cause the event to go back to its
  55. revertDuration: 0 // original position after the drag
  56. });
  57. });
  58. /* initialize the calendar
  59. -----------------------------------------------------------------*/
  60. $('#calendar-example-2').fullCalendar({
  61. header: {
  62. left: 'prev,next today',
  63. center: 'title',
  64. right: 'month,agendaWeek,agendaDay'
  65. },
  66. editable: true,
  67. droppable: true, // this allows things to be dropped onto the calendar !!!
  68. drop: function(date) { // this function is called when something is dropped
  69. // retrieve the dropped element's stored Event Object
  70. var originalEventObject = $(this).data('eventObject');
  71. // we need to copy it, so that multiple events don't have a reference to the same object
  72. var copiedEventObject = $.extend({}, originalEventObject);
  73. // assign it the date that was reported
  74. copiedEventObject.start = date;
  75. // render the event on the calendar
  76. // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
  77. $('#calendar-example-2').fullCalendar('renderEvent', copiedEventObject, true);
  78. // is the "remove after drop" checkbox checked?
  79. if ($('#drop-remove').is(':checked')) {
  80. // if so, remove the element from the "Draggable Events" list
  81. $(this).remove();
  82. }
  83. }
  84. });
  85. });