javascript
/
fullcalendar
zrkadlo https://github.com/fullcalendar/fullcalendar.git


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

/*

(main options)
startParam
endParam
cacheParam
ignoreTimezone
defaultAllDay
editable
eventColor
eventTextColor
eventBorderColor
eventBackgroundColor

(event source)
startParam
endParam
cacheParam
ignoreTimezone
defaultAllDay
className
editable
color
textColor
borderColor
backgroundColor

(event)
className
editable
color
textColor
borderColor
backgroundColor

*/

$(document).ready(function() {

  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  $('#calendar').fullCalendar({
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,week,dayGridWeek,day,dayGridDay'
    },

    editable: true,
    //eventStartEditable: false,
    //eventDurationEditable: false,

    selectable: true,
    selectMirror: true,
    eventSources: [

      {
        url: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
        color: 'orange',
        className: 'google-calendar',
        success: function(events) {
          console.log('successfully loaded google-calendar event data!', events);
        },
        editable: true
      },

      /*
      FullCalendar.gcalFeed('http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic', {
        color: 'orange',
        className: 'google-calendar'
      }),
      */

      {
        url: "../demos/json-events.php",
        //editable: false,
        color: 'red',
        data: {
          something: 'cool'
        },
        success: function() {
          console.log('json-events.php is done!!!', arguments);
        }
      },

      {
        color: 'purple',
        //editable: false,
        //startEditable: false,
        //durationEditable: false,
        events: [
          {
            title: 'All Day Event',
            //startEditable: false,
            //durationEditable: false,
            start: new Date(y, m, 1)
          },
          {
            title: 'Long Event',
            start: new Date(y, m, d-5),
            end: new Date(y, m, d-2)
          },
          {
            groupId: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d-3, 16, 0),
            allDay: false
          },
          {
            groupId: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d+4, 16, 0),
            allDay: false
          }
        ]
      },

      {
        events: [
          {
            title: 'Meeting',
            start: new Date(y, m, d, 10, 30),
            allDay: false
          },
          {
            title: 'Lunch',
            start: new Date(y, m, d, 12, 5),
            end: new Date(y, m, d, 14, 43),
            allDay: false
          },
          {
            title: 'Birthday Party',
            start: new Date(y, m, d+1, 19, 0),
            end: new Date(y, m, d+1, 22, 30),
            allDay: false
          },
          {
            title: 'Click for Google',
            start: new Date(y, m, 28),
            end: new Date(y, m, 29),
            url: 'http://google.com/'
          }
        ]
      }

    ],
    eventClick: function(event) {
      if (event.url) {
        window.open(event.url);
      }
      return false;
    }
  });

});

</script>
<style>

body {
  margin-top: 40px;
  text-align: center;
  font-size: 13px;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  }

#calendar {
  width: 900px;
  margin: 0 auto;
  }

</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>