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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
							<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../../dist/fullcalendar.css' rel='stylesheet' />
<link href='../../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../../node_modules/moment/moment.js'></script>
<script src='../../node_modules/jquery/dist/jquery.js'></script>
<script src='../../dist/fullcalendar.js'></script>
<script>

  $(document).ready(function() {
    var isOneTime = false;

    function initProfilingAction(containerEl, execFunc, teardownFunc) {
      containerEl.find('.profiling-action__button').on('click', function() {
        if (isOneTime) {
          containerEl.find('.profiling-action__result')
            .text(executeOneTime(execFunc) + 'ms');
        }
        else {
          executeTimes(execFunc, teardownFunc, 100).then(function(res) {
            containerEl.find('.profiling-action__result')
              .text(res + 'ms ave');
          });
        }
      });
    }

    function executeOneTime(execFunc) {
      var startMs;
      var totalMs;

      execFunc(function() {
        startMs = new Date().valueOf();
      }, function() {
        totalMs = new Date().valueOf() - startMs;
      });

      return totalMs;
    }

    function executeTimes(execFunc, teardownFunc, times) {
      var deferred = $.Deferred();
      var totalTotalMs = 0;
      var i = 0;

      function next() {
        if (i < times) {
          setTimeout(function() {
            var startMs;
            var totalMs;

            if (i && teardownFunc) {
              teardownFunc();
            }
            execFunc(function() {
              startMs = new Date().valueOf();
            }, function() {
              totalMs = new Date().valueOf() - startMs;
            });
            totalTotalMs += totalMs;

            i++;
            next();
          }, 0);
        }
        else {
          deferred.resolve(totalTotalMs / times);
        }
      }

      next();

      return deferred.promise();
    }

    function initCalendar() {
      $('#calendar').fullCalendar({
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,week,day,listWeek'
        },
        initialDate: '2017-07-01',
        navLinks: true, // can click day/week names to navigate views
        editable: true
      });
    }

    function destroyCalendar() {
      $('#calendar').fullCalendar('destroy');
    }

    initProfilingAction($('#init-calendar'), function(start, stop) {
      start();
      initCalendar();
      stop();
    }, destroyCalendar);

    initProfilingAction($('#render-month-events'), function(start, stop) {
      initCalendar();

      var calendar = $('#calendar').fullCalendar('getCalendar');
      calendar.changeView('dayGridMonth');

      var date = calendar.view.start.clone();
      var end = calendar.view.end.clone();
      var events = [];

      while (date.isBefore(end)) {
        events.push({
          title: '3 day event',
          start: date.clone(),
          end: date.clone().add(3, 'days')
        }, {
          title: '2 day timed event',
          start: date.clone().time('03:00'),
          end: date.clone().add(1, 'day').time('20:00').format()
        }, {
          title: 'timed event',
          start: date.clone().time('16:00')
        }, {
          title: 'timed event',
          start: date.clone().time('16:00')
        }, {
          title: 'timed event',
          start: date.clone().time('16:00')
        }, {
          title: 'timed event',
          start: date.clone().time('16:00')
        }, {
          title: 'timed event',
          start: date.clone().time('16:00')
        });
        date.add(1, 'day');
      }

      start();
      calendar.renderEvents(events);
      stop();
      //console.log('rendered ' + events.length + ' events');
    }, destroyCalendar);

    initProfilingAction($('#render-timegrid-events'), function(start, stop) {
      initCalendar();

      var calendar = $('#calendar').fullCalendar('getCalendar');
      calendar.changeView('week');

      var date = calendar.view.start.clone();
      var end = calendar.view.end.clone();
      var events = [];
      var time;
      var calendar;

      while (date.isBefore(end)) {
        time = moment.duration(0);

        while (time < moment.duration('24:00')) {
          events.push({
            title: 'event',
            start: date.clone().time(time)
          });

          time.add(30, 'minutes');
        }

        date.add(1, 'day');
      }

      start();
      calendar.renderEvents(events);
      stop();
      //console.log('rendered ' + events.length + ' events');
    }, destroyCalendar);

    initProfilingAction($('#clear-events'), function(start, stop) {
      var calendar = $('#calendar').fullCalendar('getCalendar');

      start();
      calendar.removeEvents();
      stop();
    });

  });

</script>
<style>

  body {
    margin: 10px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
    overflow: scroll;
  }

  #profiling-area {
    float: right;
    text-align: right;
  }

  #calendar {
    max-width: 900px;
    float: left;
  }

</style>
</head>
<body>

  <div id='profiling-area'>

    <div class='profiling-action' id='init-calendar'>
      <span class='profiling-action__result'></span>
      <button class='profiling-action__button'>init calendar</button>
    </div>

    <div class='profiling-action' id='render-month-events'>
      <span class='profiling-action__result'></span>
      <button class='profiling-action__button'>render events for month</button>
    </div>

    <div class='profiling-action' id='render-timegrid-events'>
      <span class='profiling-action__result'></span>
      <button class='profiling-action__button'>render events for timegrid</button>
    </div>

    <div class='profiling-action' id='clear-events'>
      <span class='profiling-action__result'></span>
      <button class='profiling-action__button'>clear events</button>
    </div>

  </div>

  <div id='calendar'></div>

  <div style='clear:both'></div>

</body>
</html>