JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.esatoivola.net/gcal/gcal.js"></script>
<div id="gcal"></div>

CSS

h1 {font-size:1.5em;}

#gcal {width:240px; padding:10px; border: 1px solid black;}
#gcal .gcaltitle {padding-bottom: 5px; margin-bottom:10px; width:220px; border-bottom: 2px solid blue;}
#gcal .gcalitem {margin-bottom:5px; font-style:italic; cursor:pointer;}
#gcal .gcalitem:hover {margin-left:15px; color:blue;}

JavaScript

function Output(container) {
    this.print = function(output) {
        container.innerHTML += output;
    };
    this.addEl = function(tag, ihtml) {
        var newEl = document.createElement(tag);
        newEl.innerHTML = ihtml;
        if ("className" in this) {
            newEl.className = this.className;
        }
        // if (this.id) {newEl.id        
        container.appendChild(newEl)
        return newEl;
    };
}




function Calendar(gcal) {
    var i;
    this.showEvents = function(n) {
        var o = new Output(document.getElementById("gcal"));
        if (typeof n != "number") {
            n = 1000000;
        }
        if ("title" in this) {
            o.className = "gcaltitle";
            o.addEl("h1", this.title);
        }
        o.className = "gcalitem";
        for (i = 0; i < n && i < gcal.feed.entry.length; i++) {
            o.addEl("div", gcal.feed.entry[i].title.$t);
        }
    };
}

function showCalendar() {
    var ETC;
    if (typeof gcal == "undefined") {
        setTimeout(showCalendar, 500);
    }
    else {
        ETC = new Calendar(gcal);
        ETC.title = "Kalenteri";
        ETC.showEvents();
    }
}
setTimeout(showCalendar, 500);