JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<div ng-app="calendarDemoApp" class="container">
    <section id="directives-calendar" ng-controller="CalendarCtrl">
        <div class="page-header"><h1>UI-Calendar</h1></div>
        <div class="alert alert-success" ng-show="alertMessage != undefined && alertMessage != ''"><strong>{{alertMessage}}</strong></div>
        <div class="well well-sm">
            <uib-tabset>
                    <uib-tab select="renderCalender('myCalendar1');">
                        <tab-heading><i class="glyphicon glyphicon-bell"></i> Calendar One</tab-heading>
                        <div class="btn-toolbar">
                            <p class="pull-right lead">Calendar One View Options</p>
                            <div class="btn-group">
                                <button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar1')">AgendaDay</button>
                                <button class="btn btn-success"...

CSS

/*** Docs ***/
 body {
    margin-top: 40px;
}
section {
    padding-top: 40px;
}
.hero-unit {
    position: relative;
    padding: 40px 0;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .075);
    background: #020031;
    background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #020031), color-stop(100%, #6d3353));
    background: -webkit-linear-gradient(45deg, #020031 0%, #6d3353 100%);
    background: -o-linear-gradient(45deg, #020031 0%, #6d3353 100%);
    background: -ms-linear-gradient(45deg, #020031 0%, #6d3353 100%);
    background: linear-gradient(45deg, #020031 0%, #6d3353 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);
    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
    -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
}
.hero-unit .btn, .pagination-centered .btn {
    float: none;
    font-weight: normal;
}
.hero-unit p {
    margin: 1em 0;
}
.bs-docs-social {
    margin-top: 1em;
    padding: 15px 0;
    text-align: center;
    background-color: rgba(245, 245, 245, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(221, 221, 221, 0.3);
}
.bs-docs-social-buttons {
    margin-left: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}
.bs-docs-social-buttons li {
    display: inline-block;
    padding: 5px 8px;
    line-height: 1;
}
/* Allows .modal-backdrop to remain on the page without blocking */
 .modal-backdrop {
    overflow: hidden;
    height: 0;
    -webkit-transition: opacity 0.15s...

JavaScript

/**
 * calendarDemoApp - 0.9.0
 */
var calendarDemoApp = angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);

calendarDemoApp.controller('CalendarCtrl', function (
                           $scope, $compile, $timeout, uiCalendarConfig) {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $scope.changeTo = 'Hungarian';
    /* event source that pulls from google.com */
    $scope.eventSource = {
        url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
        className: 'gcal-event', // an option!
        currentTimezone: 'America/Chicago' // an option!
    };
    /* event source that contains custom events on the scope */
    $scope.events = [{
        title: 'All Day Event',
        start: new Date(y, m, 1)
    }, {
        title: 'Long Event',
        start: new Date(y, m, d - 5),
        end: new Date(y, m, d - 2)
    }, {
        id: 999,
        title: 'Repeating Event',
        start: new Date(y, m, d - 3, 16, 0),
        allDay: false
    }, {
        id: 999,
        title: 'Repeating Event',
        start: new Date(y, m, d + 4, 16, 0),
        allDay: false
    }, {
        title: 'Birthday Party',
        start: new Date(y, m, d + 1, 19, 0),
        end: new Date(y, m, d + 1, 22, 30),
        allDay: false
    }, {
        title: 'Click for Google',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        url: 'http://google.com/'
    }];
    /* event source that calls a function on every view switch */
    $scope.eventsF = function (start, end, timezone, callback) {
        var s = new Date(start).getTime() / 1000;
        var e = new Date(end).getTime() / 1000;
        var m = new Date(start).getMonth();
        var events = [{
            title: 'Feed Me ' + m,
            start: s + (50000),
            end: s + (100000),
            allDay: false,
            className: ['customFeed']
        }];
  ...