|
|
@@ -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);
|
|
|
});
|
|
|
});
|