Cool-Y.github.io/themes/next/layout/_third-party/schedule.swig

{% if theme.calendar.enable %}
{% if page.type == 'schedule' %}

<script>

// Initialization
var _n = function(arg) { if(arg) return arg; else return void 0;}

var cal_data = void 0;

var now = new Date();
var timeMax = new Date();
var timeMin = new Date();

// Read config form theme config file
var calId           = _n('{{ theme.calendar.calendar_id  }}')                ;
var apiKey          = _n('{{ theme.calendar.api_key      }}')                ;
var orderBy         = _n('{{ theme.calendar.ordarBy      }}')  || 'startTime';
var showLocation    = _n('{{ theme.calendar.showLocation }}')  || 'false'    ;
var offsetMax       = _n( {{ theme.calendar.offsetMax    }} )  || 72         ;
var offsetMin       = _n( {{ theme.calendar.offsetMin    }} )  || 4          ;
var timeZone        = _n( {{ theme.calendar.timeZone     }} )  || void 0     ;
var showDeleted     = _n( {{ theme.calendar.showDeleted  }} )  || 'false'    ;
var singleEvents    = _n( {{ theme.calendar.singleEvents }} )  || 'true'     ;
var maxResults      = _n( {{ theme.calendar.maxResults   }} )  || '250'      ;

timeMax.setHours(now.getHours() + offsetMax);
timeMin.setHours(now.getHours() - offsetMin);

// Build URL
BASE_URL            = 'https://www.googleapis.com/calendar/v3/calendars/';
FIELD_KEY           = 'key';
FIELD_ORDERBY       = 'orderBy';
FIELD_TIMEMAX       = 'timeMax';
FIELD_TIMEMIN       = 'timeMin';
FIELD_TIMEZONE      = 'timeZone';
FIELD_SHOWDELETED   = 'showDeleted';
FIELD_SINGLEEVENTS  = 'singleEvents';
FIELD_MAXRESULTS    = 'maxResults';

timeMaxISO          = timeMax.toISOString();
timeMinISO          = timeMin.toISOString();

request_url = BASE_URL + calId + '/events?'  +
  FIELD_KEY           + '=' + apiKey        + '&' +
  FIELD_ORDERBY       + '=' + orderBy       + '&' +
  FIELD_TIMEMAX       + '=' + timeMaxISO    + '&' +
  FIELD_TIMEMIN       + '=' + timeMinISO    + '&' +
  FIELD_SHOWDELETED   + '=' + showDeleted   + '&' +
  FIELD_SINGLEEVENTS  + '=' + singleEvents  + '&' +
  FIELD_MAXRESULTS    + '=' + maxResults;

if (timeZone) {
  request_url = request_url + '&' + FIELD_TIMEZONE + '=' + timeZone;
}

fetchData();
var queryLoop = setInterval(fetchData, 60000);

function fetchData() {
  $.ajax({
    dataType: 'json',
    url: request_url,
    success: function(data) {

      $eventList = $('#schedule #event-list');

      // clean the event list
      $eventList.html("");
      var prevEnd = 0; // used to decide where to insert an <hr>

      data['items'].forEach((event) => {

        // parse data
        var start = new Date(event.start.dateTime);
        var end   = new Date(event.end.dateTime);

        tense = judgeTense(now, start, end); // 0:now 1:future -1:past

        if (tense == 1 && prevEnd < now) $eventList.append('<hr>');

        eventDOM = buildEventDOM(tense, event);
        $eventList.append(eventDOM);

        prevEnd = end;
      });
    }
  });
}

function getRelativeTime(current, previous) {
  var msPerMinute = 60 * 1000;
  var msPerHour = msPerMinute * 60;
  var msPerDay = msPerHour * 24;
  var msPerMonth = msPerDay * 30;
  var msPerYear = msPerDay * 365;

  var elapsed = current - previous;
  var tense = elapsed > 0 ? "ago" : "later";

  elapsed = Math.abs(elapsed);

  if      ( elapsed < msPerHour  ) {
    return Math.round(elapsed/msPerMinute) + ' minutes ' + tense;
  }
  else if ( elapsed < msPerDay   ) {
    return Math.round(elapsed/msPerHour) + ' hours ' + tense;
  }
  else if ( elapsed < msPerMonth ) {
    return 'about ' + Math.round(elapsed/msPerDay) + ' days ' + tense;
  }
  else if ( elapsed < msPerYear  ) {
    return 'about ' + Math.round(elapsed/msPerMonth) + ' months ' + tense;
  }
  else {
    return 'about' + Math.round(elapsed/msPerYear) + ' years' + tense;
  }
}

function judgeTense(now, eventStart, eventEnd) {
  if      (eventEnd   < now)  { return -1; }
  else if (eventStart > now)  { return  1; }
  else                        { return  0; }
}

function buildEventDOM(tense, event) {
  var tenseClass = "";
  var start      = new Date(event.start.dateTime);
  var end        = new Date(event.end.dateTime);
  switch(tense) {
    case 0 : // now
      tenseClass = "event-now";
      break;
    case 1 : // future
      tenseClass = "event-future";
      break;
    case -1: // past
      tenseClass = "event-past";
      break;
    default:
      throw "Time data error";
  }
  durationFormat = {
    weekday: 'short',
    hour: '2-digit',
    minute:'2-digit'
  };
  relativeTimeStr = (tense == 0) ? "NOW" : getRelativeTime(now, start);
  durationStr = start.toLocaleTimeString([], durationFormat) + " - " +
                end.toLocaleTimeString([], durationFormat);

  liOpen                = `<li class="event ${tenseClass}">`;
  liClose               = `</li>`;
  h2Open                = `<h2 class="event-summary">`;
  h2Close               = `</h2>`;

  locationDOM     = "";
  if (showLocation && event['location']) {
    locationDOM   = `<span class="event-location event-details">
                      ${event['location']}
                     </span>`;
  }
  relativeTimeDOM = `<span class="event-relative-time">
                      ${relativeTimeStr}
                     </span>`;
  durationDOM     = `<span class="event-duration event-details">
                      ${durationStr}
                     </span>`;

  eventContent =
    liOpen +
      h2Open +
        event['summary'] +
        relativeTimeDOM+
      h2Close +
      locationDOM +
      durationDOM +
    liClose;
  return eventContent;
}

</script>

{% endif %}
{% endif %}