JSFiddle - React, Tailwind, and code Playground

by wsgrah

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="http://www.kacurak.com/formatgooglecalendar/format-google-calendar.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="calendar">
  <ul id="upcoming-events"></ul>
</div>

JavaScript

var formatGoogleCalendar = (function() {

  'use strict';

  //Gets JSON from Google Calendar and transfroms it into html list items and appends it to past or upcoming events list
  var init = function(settings) {
    var result;

    //Get JSON, parse it, transform into list items and append it to past or upcoming events list
    jQuery.getJSON(settings.calendarUrl, function(data) {
      result = data.items;
      result.sort(comp).reverse();

      var pastCounter = 0,
        upcomingCounter = 0,
        pastResult = [],
        upcomingResult = [],
        $upcomingElem = jQuery(settings.upcomingSelector),
        $pastElem = jQuery(settings.pastSelector),
        i;

      if (settings.pastTopN === -1) {
        settings.pastTopN = result.length;
      }

      if (settings.upcomingTopN === -1) {
        settings.upcomingTopN = result.length;
      }

      if (settings.past === false) {
        settings.pastTopN = 0;
      }

      if (settings.upcoming === false) {
        settings.upcomingTopN = 0;
      }

      for (i in result) {

        if (isPast(result[i].end.dateTime || result[i].end.date)) {
          if (pastCounter < settings.pastTopN) {
            pastResult.push(result[i]);
            pastCounter++;
          }
        } else {
          if (upcomingCounter < settings.upcomingTopN) {
            upcomingResult.push(result[i]);
            upcomingCounter++;
          }
        }
      }

      upcomingResult.reverse();

      for (i in pastResult) {
        $pastElem.append(transformationList(pastResult[i], settings.itemsTagName, settings.format));
      }

      for (i in upcomingResult) {
        $upcomingElem.append(transformationList(upcomingResult[i], settings.itemsTagName, settings.format));
      }

      if ($upcomingElem.children().length !== 0) {
        jQuery(settings.upcomingHeading).insertBefore($upcomingElem);
      }

      if ($pastElem.children().length !== 0) {
       ...