| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- <!DOCTYPE html>
- <html>
- <head>
- <link href='../../dist/fullcalendar.css' rel='stylesheet' />
- <link href='../../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
- <script src='../../node_modules/jquery/dist/jquery.js'></script>
- <script src='../../node_modules/moment/moment.js'></script>
- <script src='../../dist/fullcalendar.js'></script>
- <script src='../../dist/plugins/google-calendar.js'></script>
- <script>
- var gcalFeed = FullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic");
- $(document).ready(function() {
- var cal = $('#calendar').fullCalendar({
- header: {
- left: 'prev,next today',
- center: 'title',
- right: 'month,week,dayGridWeek,day,dayGridDay'
- },
- loading: function(bool) {
- if (bool) {
- $('#loading').show();
- }else{
- $('#loading').hide();
- }
- }
- });
- cal.fullCalendar('addEventSource', gcalFeed);
- cal.fullCalendar('removeEventSource', gcalFeed);
- // events should not be rendered when jsonp returns!
- });
- </script>
- <style>
- .red-event a {
- background: red;
- }
- .yellow-event a {
- background: yellow;
- }
- .black-text-event a {
- color: #000;
- }
- button {
- font-size: 11px;
- }
- </style>
- </head>
- <body style='font-size:12px'>
- <div id='loading' style='position:absolute;top:0;left:0;display:none'>loading...</div>
- <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
- </body>
- </html>
|