JSFiddle - React, Tailwind, and code Playground

by timothy_shee

HTML

<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>google calendar api sample</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!-- endbower -->
        <!-- endbuild -->
        <!-- build:css(.tmp) styles/main.css -->
      <!--  <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild -->
    </head>
    <body>

        <button id="authorize-button">authorize google</button>

        <section class="calendar-list calendar-settings">
            <h1>Your Calendar List</h1>
            <ul></ul>
        </section>

        <section class="add-event-list calendar-settings">
            <h1>Event List</h1>
            <p>If you click following button These events are created in your calendar you are selected.</p>
            <ol>
                <li data-event-date="2015"><button>2015 Happy Valentine.</button></li>
                <li data-event-date="2016"><button>2016 Happy Valentine.</button></li>
                <li data-event-date="2017"><button>2017 Happy Valentine.</button></li>
                <li data-event-date="2018"><button>2018 Happy Valentine.</button></li>
                <li data-event-date="2019"><button>2019 Happy Valentine.</button></li>
            </ol>
        </section>

        <!-- build:js scripts/vendor.js -->
        <!-- bower:js -->
        <script src="bower_components/jquery/jquery.js"></script>
        <!-- endbower -->
        <!-- endbuild -->

        <!-- build:js({app,.tmp}) scripts/main.js -->
        <script src="scripts/main.js"></script>
        <!-- endbuild -->

        <script src="https://apis.google.com/js/client.js?onload=onLoadGapiClient"></script>

    </body>
</html>

JavaScript

(function(exports){

    'use strict';

    /**
     * @class GapiClientManager
     */
    var clientId = '872370762969-fheu1sibq23qacpqsmg9juitshnqluoe.apps.googleusercontent.com',
        scope = 'https://www.googleapis.com/auth/calendar',
        $authorizeButton = $('#authorize-button'),
        $settingsElms = $('.calendar-settings');

    var GapiClientManager = {

        onLoadGapiClient: function() {
            $authorizeButton.on('click', $.proxy(this.handleAuthClick, this));
            NewEventInserter.bindClickEvent();
            this.showButton();
        },

        showButton: function() {
            $authorizeButton.show();
        },

        handleAuthResult: function(authResult){
            if (authResult && !authResult.error) {
                this.loadClient($.proxy(this.getCalenderList, this));
            }
        },

        loadClient: function(callback) {
            gapi.client.load('calendar', 'v3', callback);
        },

        getCalenderList: function() {
            // @see
            // https://developers.google.com/google-apps/calendar/v3/reference/calendarList/list
            var config = {
                    minAccessRole: 'owner'
                },
                request = gapi.client.calendar.calendarList.list(config);

            request.execute(function(res){
                $settingsElms.show();
                CalendarListRenderer.render(res.items);
            });
        },

        handleAuthClick: function(){
            this.auth();
            return false;
        },

        auth: function() {
            var config = {
                'client_id': clientId,
                'scope'    : scope,
                'immediate': false
            };
            gapi.auth.authorize(config, $.proxy(this.handleAuthResult, this));
        }
    };
    /**
     * @class CalendarListRenderer
     */
    var CalendarListRenderer = {
        getSelectedCalendar: function() {
            return $('.calendar-list...