sources.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <script type='text/javascript' src='loader.js'></script>
  5. <script type='text/javascript'>
  6. var cal;
  7. var date = new Date();
  8. var d = date.getDate();
  9. var m = date.getMonth();
  10. var y = date.getFullYear();
  11. var gcalFeed = $.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic");
  12. var jsonFeed = "../examples/json-events.php";
  13. var staticEvents = [
  14. {
  15. title: 'All Day Event',
  16. start: new Date(y, m, 1)
  17. },
  18. {
  19. title: 'Long Event',
  20. start: new Date(y, m, d-5),
  21. end: new Date(y, m, d-2)
  22. },
  23. {
  24. title: 'Event with \n newline',
  25. start: new Date(y, m, d),
  26. end: new Date(y, m, d)
  27. },
  28. {
  29. title: 'T event',
  30. start: y + '-06-06T10:20:00',
  31. allDay: false
  32. },
  33. {
  34. title: 'No T event',
  35. start: y + '-06-06 11:30:00',
  36. allDay: false
  37. },
  38. {
  39. id: 999,
  40. title: 'Repeating Event',
  41. start: new Date(y, m, d-3, 16, 0),
  42. allDay: false
  43. },
  44. {
  45. id: 999,
  46. title: 'Repeating Event',
  47. start: new Date(y, m, d+4, 16, 0),
  48. allDay: false
  49. },
  50. {
  51. title: 'Meeting',
  52. start: new Date(y, m, d, 10, 30),
  53. allDay: false
  54. },
  55. {
  56. id: 777,
  57. title: 'Lunch',
  58. start: new Date(y, m, d, 12, 0),
  59. end: new Date(y, m, d, 14, 0),
  60. allDay: false,
  61. //className: 'yellow-event black-text-event',
  62. className: ['yellow-event', 'black-text-event']
  63. },
  64. {
  65. title: 'Birthday Party',
  66. start: new Date(y, m, d+1, 19, 0),
  67. end: new Date(y, m, d+1, 22, 30),
  68. allDay: false
  69. },
  70. {
  71. title: 'Click for Google',
  72. start: new Date(y, m, 28),
  73. end: new Date(y, m, 29),
  74. url: 'http://google.com/'
  75. }
  76. ];
  77. var customSource = function(start, end, callback) {
  78. callback([
  79. {
  80. title: 'FIRST',
  81. start: start
  82. },
  83. {
  84. title: 'LAST',
  85. start: new Date(end - 1)
  86. }
  87. ]);
  88. };
  89. //$.ajaxSetup({
  90. // cache: false // should NOT insert an extra _ parameter
  91. //});
  92. $(document).ready(function() {
  93. cal = $('#calendar').fullCalendar({
  94. //lazyFetching: false,
  95. editable: true,
  96. header: {
  97. left: 'prev,next today',
  98. center: 'title',
  99. right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
  100. },
  101. //events: staticEvents,
  102. eventSources: [
  103. staticEvents,
  104. jsonFeed,
  105. gcalFeed,
  106. customSource
  107. ],
  108. loading: function(bool) {
  109. if (bool) {
  110. $('#loading').show();
  111. }else{
  112. $('#loading').hide();
  113. }
  114. }
  115. /*
  116. ,
  117. startParam: 'mystart',
  118. endParam: 'myend',
  119. cacheParam: 'uniq'
  120. */
  121. });
  122. });
  123. </script>
  124. <style>
  125. .red-event a {
  126. background: red;
  127. }
  128. .yellow-event a {
  129. background: yellow;
  130. }
  131. .black-text-event a {
  132. color: #000;
  133. }
  134. button {
  135. font-size: 11px;
  136. }
  137. </style>
  138. </head>
  139. <body style='font-size:12px'>
  140. <div id='loading' style='position:absolute;top:0;left:0;display:none'>loading...</div>
  141. <p>
  142. <button onclick="cal.fullCalendar('refetchEvents')">refetch</button>
  143. </p>
  144. <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
  145. </body>
  146. </html>