selectable.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../fullcalendar.css' rel='stylesheet' />
  6. <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
  7. <script src='../lib/moment.min.js'></script>
  8. <script src='../lib/jquery.min.js'></script>
  9. <script src='../lib/jquery-ui.custom.min.js'></script>
  10. <script src='../fullcalendar.min.js'></script>
  11. <script>
  12. $(document).ready(function() {
  13. $('#calendar').fullCalendar({
  14. header: {
  15. left: 'prev,next today',
  16. center: 'title',
  17. right: 'month,agendaWeek,agendaDay'
  18. },
  19. defaultDate: '2014-06-12',
  20. selectable: true,
  21. selectHelper: true,
  22. select: function(start, end) {
  23. var title = prompt('Event Title:');
  24. var eventData;
  25. if (title) {
  26. eventData = {
  27. title: title,
  28. start: start,
  29. end: end
  30. };
  31. $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
  32. }
  33. $('#calendar').fullCalendar('unselect');
  34. },
  35. editable: true,
  36. events: [
  37. {
  38. title: 'All Day Event',
  39. start: '2014-06-01'
  40. },
  41. {
  42. title: 'Long Event',
  43. start: '2014-06-07',
  44. end: '2014-06-10'
  45. },
  46. {
  47. id: 999,
  48. title: 'Repeating Event',
  49. start: '2014-06-09T16:00:00'
  50. },
  51. {
  52. id: 999,
  53. title: 'Repeating Event',
  54. start: '2014-06-16T16:00:00'
  55. },
  56. {
  57. title: 'Meeting',
  58. start: '2014-06-12T10:30:00',
  59. end: '2014-06-12T12:30:00'
  60. },
  61. {
  62. title: 'Lunch',
  63. start: '2014-06-12T12:00:00'
  64. },
  65. {
  66. title: 'Birthday Party',
  67. start: '2014-06-13T07:00:00'
  68. },
  69. {
  70. title: 'Click for Google',
  71. url: 'http://google.com/',
  72. start: '2014-06-28'
  73. }
  74. ]
  75. });
  76. });
  77. </script>
  78. <style>
  79. body {
  80. margin: 0;
  81. padding: 0;
  82. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  83. font-size: 14px;
  84. }
  85. #calendar {
  86. width: 900px;
  87. margin: 40px auto;
  88. }
  89. </style>
  90. </head>
  91. <body>
  92. <div id='calendar'></div>
  93. </body>
  94. </html>