Explorar el Código

remove jquery from timezones demo

Adam Shaw hace 7 años
padre
commit
7980133caa
Se han modificado 1 ficheros con 21 adiciones y 15 borrados
  1. 21 15
      demos/timezones.html

+ 21 - 15
demos/timezones.html

@@ -5,12 +5,12 @@
 <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='../node_modules/superagent/superagent.js'></script><!-- TODO: use this all the way -->
+<script src='../node_modules/superagent/superagent.js'></script>
 <script src='../dist/fullcalendar.js'></script>
 <script>
 
   document.addEventListener('DOMContentLoaded', function() {
+    var timezoneSelectorEl = document.getElementById('timezone-selector');
     var calendarEl = document.getElementById('calendar');
 
     var calendar = new FullCalendar.Calendar(calendarEl, {
@@ -27,44 +27,50 @@
       events: {
         url: 'php/get-events.php',
         error: function() {
-          $('#script-warning').show();
+          document.getElementById('script-warning').style.display = 'inline'; // show
         }
       },
       loading: function(bool) {
-        $('#loading').toggle(bool);
+        if (bool) {
+          document.getElementById('loading').style.display = 'inline'; // show
+        } else {
+          document.getElementById('loading').style.display = 'none'; // hide
+        }
       },
 
       timeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' },
       // TODO: once event API is better:
       // eventRender: function(event, el) {
-      //   $(el).find('.fc-title').after(
-      //     $('<div class="tzo"/>').text(tz)
-      //   );
       // },
 
       dayClick: function(date) {
-        console.log('dayClick', date.format());
+        console.log('dayClick', calendar.formatIso(date));
       },
       select: function(startDate, endDate) {
-        console.log('select', startDate.format(), endDate.format());
+        console.log('select', calendar.formatIso(startDate), calendar.formatIso(endDate));
       }
     });
 
     calendar.render();
 
     // load the list of available timezones, build the <select> options
-    $.getJSON('php/get-timezones.php', function(timezones) {
-      $.each(timezones, function(i, timezone) {
+    superagent.get('php/get-timezones.php').end(function(err, res) {
+      var timezones = res.body || JSON.parse(res.text)
+
+      timezones.forEach(function(timezone) {
+        var optionEl;
+
         if (timezone != 'UTC') { // UTC is already in the list
-          $('#timezone-selector').append(
-            $("<option/>").text(timezone).attr('value', timezone)
-          );
+          optionEl = document.createElement('option');
+          optionEl.value = timezone
+          optionEl.innerText = timezone
+          timezoneSelectorEl.appendChild(optionEl)
         }
       });
     });
 
     // when the timezone selector changes, dynamically change the calendar option
-    $('#timezone-selector').on('change', function() {
+    timezoneSelectorEl.addEventListener('change', function() {
       calendar.option('timezone', this.value || false);
     });
   });