selectable.html 3.6 KB

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