JSFiddle - React, Tailwind, and code Playground

by jack_pallot

HTML

<h2>Current</h2>
<ul id="js-EventList"></ul>

<h2>Desired</h2>
<ul>
    <li><strong>03/09/2015</strong></li>
    <li>event thurs</li>
    <li>No event name</li>
    <li><strong>04/09/2015</strong></li>
    <li>Event Friday</li>
    <li><strong>05/09/2015</strong></li>
    <li>event name</li>
    <li>event name</li>
    <li>event name</li>
</ul>

JavaScript

var GOOGLE_CAL = function () {

    // basic API settings
    var today = new Date();
    var settings = {
        calendarId: '[email protected]',
        apiKey: 'AIzaSyBTvM3WiFxCZcgasLM_IugF-RZtsTEMd-g',
        maxResults: 3,
        orderBy: 'startTime',
        singleEvents: true,
        showEventsFrom: today.toISOString()
    };

    // create the URL using the settings above
    var apiUrl = 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(settings.calendarId.trim()) +'/events?key=' + settings.apiKey + '&orderBy=' + settings.orderBy + '&singleEvents=' + settings.singleEvents + '&maxResults=' + settings.maxResults + '&timeMin=' + settings.showEventsFrom;

    // create a blank array to store items later
    var events = [];

    // request API
    $.ajax({
        url: apiUrl,
        dataType: 'json',
        success: function(data) {
            $.each(data.items, function(key, entry) {

                // assign values + some basic value checking
                var id = entry.id;
                var title = entry.summary;
                var startTime = entry.start.dateTime;
                if (!startTime) {
                    var startTime = entry.start.date;
                }
                if (title === undefined || title === "") {
                    var title = "No event name";
                }

                // push data to events array
                events.push({
                	id: id,
                	title: title,
                	start: startTime
                });
            });

            // output the dates, append to the dom
            $(events).each(function(key, item) {
                $( '#js-EventList' ).append( $( '<li>' + '<strong>' + formatDate(item.start) + '</strong>' + '</li>' ) );
                $( '#js-EventList' ).append( $( '<li>' + item.title + '</li>' ) );
                console.log(item);
            });
        },
        error: function() {
            console.log('Error...