sources.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  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: 'T event',
  25. start: y + '-06-06T10:20:00',
  26. allDay: false
  27. },
  28. {
  29. title: 'No T event',
  30. start: y + '-06-06 11:30:00',
  31. allDay: false
  32. },
  33. {
  34. id: 999,
  35. title: 'Repeating Event',
  36. start: new Date(y, m, d-3, 16, 0),
  37. allDay: false
  38. },
  39. {
  40. id: 999,
  41. title: 'Repeating Event',
  42. start: new Date(y, m, d+4, 16, 0),
  43. allDay: false
  44. },
  45. {
  46. title: 'Meeting',
  47. start: new Date(y, m, d, 10, 30),
  48. allDay: false
  49. },
  50. {
  51. id: 777,
  52. title: 'Lunch',
  53. start: new Date(y, m, d, 12, 0),
  54. end: new Date(y, m, d, 14, 0),
  55. allDay: false,
  56. //className: 'yellow-event black-text-event',
  57. className: ['yellow-event', 'black-text-event']
  58. },
  59. {
  60. title: 'Birthday Party',
  61. start: new Date(y, m, d+1, 19, 0),
  62. end: new Date(y, m, d+1, 22, 30),
  63. allDay: false
  64. },
  65. {
  66. title: 'Click for Google',
  67. start: new Date(y, m, 28),
  68. end: new Date(y, m, 29),
  69. url: 'http://google.com/'
  70. }
  71. ];
  72. var customSource = function(start, end, callback) {
  73. callback([
  74. {
  75. title: 'FIRST',
  76. start: start
  77. },
  78. {
  79. title: 'LAST',
  80. start: new Date(end - 1)
  81. }
  82. ]);
  83. };
  84. $(document).ready(function() {
  85. cal = $('#calendar').fullCalendar({
  86. editable: true,
  87. header: {
  88. left: 'prev,next today',
  89. center: 'title',
  90. right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
  91. },
  92. //events: staticEvents,
  93. eventSources: [
  94. staticEvents,
  95. jsonFeed,
  96. gcalFeed,
  97. customSource
  98. ],
  99. loading: function(bool) {
  100. if (bool) {
  101. $('#loading').show();
  102. }else{
  103. $('#loading').hide();
  104. }
  105. }
  106. /*
  107. ,
  108. startParam: 'mystart',
  109. endParam: 'myend',
  110. cacheParam: 'uniq'
  111. */
  112. });
  113. });
  114. </script>
  115. <style>
  116. .red-event a {
  117. background: red;
  118. }
  119. .yellow-event a {
  120. background: yellow;
  121. }
  122. .black-text-event a {
  123. color: #000;
  124. }
  125. button {
  126. font-size: 11px;
  127. }
  128. </style>
  129. </head>
  130. <body style='font-size:12px'>
  131. <div id='loading' style='position:absolute;top:0;left:0;display:none'>loading...</div>
  132. <p>
  133. <button onclick="cal.fullCalendar('refetchEvents')">refetch</button>
  134. </p>
  135. <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
  136. </body>
  137. </html>