javascript
/
fullcalendar
mirror of https://github.com/fullcalendar/fullcalendar.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							<!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>

  $(document).ready(function() {
    $('#calendar').fullCalendar({
      weekends: false,
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,week,dayGridWeek,day,dayGridDay'
      },
      //editable: true,
      eventSources: [
        {
          url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
          editable: true,
          className: 'holiday'
        },
        /*
        FullCalendar.gcalFeed(
          "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
          {
            editable: true,
            className: 'holiday'
          }
        ),
        */
        {
          url: "https://www.google.com/calendar/feeds/ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com/public/basic",
          currentTimezone: 'America/Edmonton', // 'America/Los_Angeles' 'America/Los Angeles'
          editable: true
        }
      ],
      eventClick: function(event) {
        console.log(event.start);
        console.log(event.end);
        return false;
      }
    });
  });

</script>
<style>

  .holiday * {
    color: yellow !important;
    }

</style>
</head>
<body style='font-size:12px'>
<div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
</body>
</html>