selectable.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href='../build/out/fullcalendar.css' rel='stylesheet' />
  5. <link href='../build/out/fullcalendar.print.css' rel='stylesheet' media='print' />
  6. <script src='../lib/moment/moment.js'></script>
  7. <script src='../lib/jquery/jquery.js'></script>
  8. <script src='../lib/jquery-ui/ui/jquery-ui.js'></script>
  9. <script src='../build/out/fullcalendar.js'></script>
  10. <script>
  11. // TODO: get rid of this!!! (used at the bottom too)
  12. var date = new Date();
  13. var d = date.getDate();
  14. var m = date.getMonth();
  15. var y = date.getFullYear();
  16. var calendar;
  17. $(document).ready(function() {
  18. calendar = $('#calendar').fullCalendar({
  19. header: {
  20. left: 'prev,next today',
  21. center: 'title',
  22. right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
  23. },
  24. date: '2014-01-12',
  25. defaultView: 'month',
  26. //firstDay: 1,
  27. //isRTL: true,
  28. //minTime: 7,
  29. //weekends: false,
  30. //allDaySlot: false,
  31. //hiddenDays: [ 2, 4 ], // tuesdays and thursdays
  32. selectable: true,
  33. /*
  34. selectable: {
  35. month: false,
  36. agenda: true
  37. },
  38. */
  39. selectHelper: true,
  40. /*
  41. selectHelper: function(start, end) {
  42. return $("<div style='background:red' />").text(start+' '+end);
  43. },
  44. */
  45. //unselectAuto: false,
  46. //unselectCancel: '.fc',
  47. select: function(start, end, ev) {
  48. console.log(
  49. '---- selection ----\n' +
  50. 'start: ' + start.format() + '\n' +
  51. 'end: ' + end.format()
  52. );
  53. if (ev) {
  54. //console.log('select mouse: ' + ev.pageX + ', ' + ev.pageY);
  55. }
  56. },
  57. unselect: function(ev) {
  58. console.log('unselect');
  59. if (ev) {
  60. //console.log('unselect mouse: ' + ev.pageX + ', ' + ev.pageY);
  61. }
  62. },
  63. dayClick: function(date) {
  64. console.log('DAYCLICK', date.format());
  65. console.log(this);
  66. },
  67. editable: true,
  68. events: [
  69. {
  70. title: 'All Day Event',
  71. start: '2014-01-01'
  72. },
  73. {
  74. title: 'Long Event',
  75. start: '2014-01-07',
  76. end: '2014-01-10'
  77. },
  78. {
  79. id: 999,
  80. title: 'Repeating Event',
  81. start: '2014-01-09T16:00:00'
  82. },
  83. {
  84. id: 999,
  85. title: 'Repeating Event',
  86. start: '2014-01-16T16:00:00'
  87. },
  88. {
  89. title: 'Meeting',
  90. start: '2014-01-12T10:30:00',
  91. end: '2014-01-12T12:30:00'
  92. },
  93. {
  94. title: 'Lunch',
  95. start: '2014-01-12T12:00:00'
  96. },
  97. {
  98. title: 'Birthday Party',
  99. start: '2014-01-13T07:00:00'
  100. },
  101. {
  102. title: 'Click for Google',
  103. url: 'http://google.com/',
  104. start: '2014-01-28'
  105. }
  106. ]
  107. });
  108. });
  109. </script>
  110. <style>
  111. body {
  112. font-size: 13px;
  113. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  114. }
  115. #calendar {
  116. width: 900px;
  117. margin: 40px auto;
  118. }
  119. </style>
  120. </head>
  121. <body>
  122. <button onclick="calendar.fullCalendar('select', new Date(y, m, d-1), new Date(y, m, d-2), true)">1day, allday</button>
  123. <button onclick="calendar.fullCalendar('select', new Date(y, m, d-1))">1day, noend, noallday</button>
  124. <button onclick="calendar.fullCalendar('select', new Date(y, m, d-1), null, false)">1day, noend, allday=false</button>
  125. <button onclick="calendar.fullCalendar('select', new Date(y, m, d, 5, 15), new Date(y, m, d, 15, 30), false)">1day, timed</button>
  126. <button onclick="calendar.fullCalendar('select', new Date(y, m, d-3), new Date(y, m, d), true)">3day, allday</button>
  127. <button onclick="calendar.fullCalendar('select', new Date(y, m, d-2, 5, 15), new Date(y, m, d+1, 15, 30), false)">3day, timed</button>
  128. <button onclick="calendar.fullCalendar('unselect')">unselect</button>
  129. <div id='calendar'></div>
  130. </body>
  131. </html>