javascript
/
fullcalendar
espejo de https://github.com/fullcalendar/fullcalendar.git


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

  /*
  TODO:
  this file demonstrates a bug, unrelated to triggers, where starting off in a small window,
  changing to week, maximizing the window, switching to month causes the last column of
  events to be misaligned (don't stretch all the way right)
  this happens due to week being taller than month before the switch back
  */

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

  $(document).ready(function() {
    $('#calendar').fullCalendar({
      //weekends: false,
      //initialView: 'week',

      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,week,dayGridWeek,day,dayGridDay'
      },
      editable: true,
      //direction: 'rtl',

      viewDisplay: function(view) {
        console.log('viewDisplay');
        console.log(view.activeStart + ' - ' + view.activeEnd);
        console.log(view.currentStart + ' - ' + view.currentEnd);
        //console.log(view);
        //console.log(this);
      },

      _eventsPositioned: function(view) {
        console.log('all rendered', view);
      },

      //loading: // see sources.html

      windowResize: function(view) {
        console.log('windowResize - ' + view.title);
        //console.log(this);
      },

      slotMinTime: '5',
      slotMaxTime: '21:30',
      dayClick: function(dayDate, allDay, ev, view) {
        //alert(dayDate);
        console.log('dayClick - ' + dayDate + ', allDay:' + allDay + ' - ' + view.title);
        //console.log(ev);
        console.log(this);
      },

      selectable: true,
      select: function(start, end, allDay) {
        console.log('select', start, end, allDay);
      },
      unselect: function() {
        console.log('unselect');
      },

      eventRender: function(event, element, view) {
        if (event.id == 888) {
          return false;
        }
        else if (event.id == 777) {
          return $("<div style='background:green'>").text(event.title);
        }
        else if (event.id == 999) {
          element.css('border-color', 'red');
          //console.log('renderEvent (' + event.title + ') - ' + view.title);
        }
      },
      eventPositioned: function(event, element, view) {
        //console.log('after render for "' + event.title + '":');
        //console.log(element);
      },

      eventClick: function(event, jsEvent, view) {
        console.log('EVENT CLICK ' + event.title);
        //console.log(jsEvent);
        //console.log(view);
        //console.log(this);
        //return false;
      },


      eventMouseover: function(event, jsEvent, view) {
        console.log('MOUSEOVER ' + event.title);
        //console.log(jsEvent);
        //console.log(view);
        //console.log(this);
      },
      eventMouseout: function(event, jsEvent, view) {
        console.log('MOUSEOUT ' + event.title);
        //console.log(jsEvent);
        //console.log(view);
        //console.log(this);
      },


      eventDragStart: function(event, jsEvent, ui, view) {
        console.log('DRAG START ' + event.title);
        console.log(this);
      },
      eventDragStop: function(event, jsEvent, ui, view) {
        console.log('DRAG STOP ' + event.title);
        console.log(this);
      },
      eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
        console.log('DROP ' + event.title);
        console.log(dayDelta + ' days');
        console.log(minuteDelta + ' minutes');
        console.log('allday: ' + allDay);
        //setTimeout(function() {
        //  revertFunc();
        //}, 2000);
        //console.log(jsEvent);
        //console.log(ui);
        //console.log(view.title);
        //console.log(this);
      },

      eventResizeStart: function(event, jsEvent, ui, view) {
        console.log('RESIZE START ' + event.title);
        //console.log(this);
      },
      eventResizeStop: function(event, jsEvent, ui, view) {
        console.log('RESIZE STOP ' + event.title);
        //console.log(this);
      },
      eventResize: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
        console.log('RESIZE!! ' + event.title);
        console.log(dayDelta + ' days');
        console.log(minuteDelta + ' minutes');
        //setTimeout(function() {
        //  revertFunc();
        //}, 2000);
        //console.log(jsEvent);
        //console.log(ui);
        //console.log(view.title);
        //console.log(this);
      },

      /* for testing _eventsPositioned
      events: {
        url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
        editable: true,
        className: 'holiday'
      },
      */

      events: [
        {
          title: 'All Day Event',
          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
        },
        {
          id: 888,
          title: 'Meeting',
          start: new Date(y, m, d, 10, 30),
          allDay: false
        },
        {
          id: 777,
          title: 'Lunch',
          start: new Date(y, m, d, 12, 0),
          end: new Date(y, m, d, 14, 0),
          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/'
        }
      ]
    });
  });

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