gcal.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  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='../src/_loader.js?debug'></script>
  5. <script type='text/javascript' src='../src/gcal/_loader.js'></script>
  6. <script type='text/javascript'>
  7. $(document).ready(function() {
  8. $('#calendar').fullCalendar({
  9. weekends: false,
  10. header: {
  11. left: 'prev,next today',
  12. center: 'title',
  13. right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
  14. },
  15. editable: true,
  16. eventSources: [
  17. $.fullCalendar.gcalFeed(
  18. "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
  19. {
  20. editable: true,
  21. className: ['holiday']
  22. }
  23. ),
  24. $.fullCalendar.gcalFeed(
  25. "http://www.google.com/calendar/feeds/b62ul6i1vvfh9vqabsal835028%40group.calendar.google.com/public/basic", // most recent event in Nov 2009
  26. {
  27. editable: true,
  28. currentTimezone: 'America/Edmonton' // 'America/Los_Angeles' 'America/Los Angeles'
  29. }
  30. )
  31. ],
  32. eventClick: function(event) {
  33. console.log(event.start);
  34. console.log(event.end);
  35. return false;
  36. }
  37. });
  38. });
  39. </script>
  40. <style>
  41. .holiday,
  42. .fc-agenda .holiday .fc-event-time,
  43. .holiday a {
  44. background: green;
  45. border-color: green;
  46. color: yellow;
  47. }
  48. </style>
  49. </head>
  50. <body style='font-size:12px'>
  51. <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
  52. </body>
  53. </html>