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


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

  // TODO: get rid of this!!! (used at the bottom too)
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var calendar;

  $(document).ready(function() {
    
    calendar = $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
      },
      date: '2014-01-12',
      defaultView: 'month',
      
      //firstDay: 1,
      //isRTL: true,
      //minTime: 7,
      //weekends: false,
      //allDaySlot: false,
      //hiddenDays: [ 2, 4 ], // tuesdays and thursdays
      
      selectable: true,
      /*
      selectable: {
        month: false,
        agenda: true
      },
      */
      
      selectHelper: true,
      /*
      selectHelper: function(start, end) {
        return $("<div style='background:red' />").text(start+' '+end);
      },
      */
      
      //unselectAuto: false,
      //unselectCancel: '.fc',
      
      select: function(start, end, ev) {
        console.log(
          '---- selection ----\n' +
          'start: ' + start.format() + '\n' +
          'end: ' + end.format()
        );
        if (ev) {
          //console.log('select mouse: ' + ev.pageX + ', ' + ev.pageY);
        }
      },
      unselect: function(ev) {
        console.log('unselect');
        if (ev) {
          //console.log('unselect mouse: ' + ev.pageX + ', ' + ev.pageY);
        }
      },
      dayClick: function(date) {
        console.log('DAYCLICK', date.format());
        console.log(this);
      },
      editable: true,
      events: [
        {
          title: 'All Day Event',
          start: '2014-01-01'
        },
        {
          title: 'Long Event',
          start: '2014-01-07',
          end: '2014-01-10'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2014-01-09T16:00:00'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2014-01-16T16:00:00'
        },
        {
          title: 'Meeting',
          start: '2014-01-12T10:30:00',
          end: '2014-01-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2014-01-12T12:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2014-01-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2014-01-28'
        }
      ]
    });
    
    
  });

</script>
<style>

  body {
    font-size: 13px;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    }

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

</style>
</head>
<body>
<button onclick="calendar.fullCalendar('select', new Date(y, m, d-1), new Date(y, m, d-2), true)">1day, allday</button>
<button onclick="calendar.fullCalendar('select', new Date(y, m, d-1))">1day, noend, noallday</button>
<button onclick="calendar.fullCalendar('select', new Date(y, m, d-1), null, false)">1day, noend, allday=false</button>
<button onclick="calendar.fullCalendar('select', new Date(y, m, d, 5, 15), new Date(y, m, d, 15, 30), false)">1day, timed</button>
<button onclick="calendar.fullCalendar('select', new Date(y, m, d-3), new Date(y, m, d), true)">3day, allday</button>
<button onclick="calendar.fullCalendar('select', new Date(y, m, d-2, 5, 15), new Date(y, m, d+1, 15, 30), false)">3day, timed</button>
<button onclick="calendar.fullCalendar('unselect')">unselect</button>
<div id='calendar'></div>
</body>
</html>