theming.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href='../dist/fullcalendar.css' rel='stylesheet' />
  5. <link href='../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
  6. <script src='../lib/jquery/dist/jquery.js'></script>
  7. <script src='../lib/moment/moment.js'></script>
  8. <script src='../dist/fullcalendar.js'></script>
  9. <script src='lib/themeswitcher/jquery.themeswitcher.js'></script>
  10. <script>
  11. function initCalendar() {
  12. var date = new Date();
  13. var d = date.getDate();
  14. var m = date.getMonth();
  15. var y = date.getFullYear();
  16. $('#calendar').fullCalendar({
  17. theme: true,
  18. editable: true,
  19. //weekends: false,
  20. header: {
  21. left: 'prev,next today', //'prevYear,prev,next,nextYear today',
  22. center: 'title',
  23. right: 'month,agendaWeek,agendaDay' //'month,agendaWeek,basicWeek,agendaDay,basicDay'
  24. },
  25. /*
  26. buttonIcons: {
  27. prev: 'triangle-1-w',
  28. next: 'triangle-1-e',
  29. today: 'home'
  30. },
  31. */
  32. /*
  33. isRTL: true,
  34. header: {
  35. left: 'nextYear,next,prev,prevYear today',
  36. center: 'title',
  37. right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
  38. },
  39. */
  40. events: [
  41. {
  42. title: 'All Day Event',
  43. start: new Date(y, m, 1)
  44. },
  45. {
  46. title: 'Long Event',
  47. start: new Date(y, m, d-5),
  48. end: new Date(y, m, d-2)
  49. },
  50. {
  51. id: 999,
  52. title: 'Repeating Event',
  53. start: new Date(y, m, d-3, 16, 0),
  54. allDay: false
  55. },
  56. {
  57. id: 999,
  58. title: 'Repeating Event',
  59. start: new Date(y, m, d+4, 16, 0),
  60. allDay: false
  61. },
  62. {
  63. title: 'Meeting',
  64. start: new Date(y, m, d, 10, 30),
  65. allDay: false
  66. },
  67. {
  68. id: 777,
  69. title: 'Lunch',
  70. start: new Date(y, m, d, 12, 0),
  71. end: new Date(y, m, d, 14, 0),
  72. allDay: false,
  73. //className: 'yellow-event black-text-event',
  74. className: ['yellow-event', 'black-text-event']
  75. },
  76. {
  77. title: 'Birthday Party',
  78. start: new Date(y, m, d+1, 19, 0),
  79. end: new Date(y, m, d+1, 22, 30),
  80. allDay: false
  81. },
  82. {
  83. title: 'Click for Google',
  84. start: new Date(y, m, 28),
  85. end: new Date(y, m, 29),
  86. url: 'http://google.com/'
  87. }
  88. ]
  89. });
  90. }
  91. $(document).ready(function() {
  92. initCalendar();
  93. $('#switcher').themeswitcher({
  94. imgPath: 'lib/themeswitcher/images/',
  95. loadTheme: 'Cupertino',
  96. height: 400,
  97. onSelect: function(theme) {
  98. setTimeout(function() {
  99. $('#calendar').fullCalendar('render');
  100. },1000);
  101. }
  102. });
  103. });
  104. </script>
  105. </head>
  106. <body style='font-size:13px;margin:0'>
  107. <div id="switcher" style='position:absolute;top:5px;left:5px'></div>
  108. <div id='calendar' style='width:900px;margin:50px auto 0;font-family:arial'></div>
  109. </body>
  110. </html>