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>
<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>
        <form class="form-horizontal">
            <label for="dateFrom" class="col-sm-2 control-label">FROM</label>
            <div class="col-sm-10">
                <input type="date" class="form-control" id="dateFrom" ng-model="ev.from">
            </div>
            <label for="dateTo" class="col-sm-2 control-label">TO</label>
            <div class="col-sm-10">
                <input type="date" class="form-control" id="dateTo" ng-model="ev.to">
            </div>
            <label for="dateTitle" class="col-sm-2 control-label">TITLE</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="dateTitle" ng-model="ev.title" placeholder="your title">
            </div>
            <button type="submit" class="btn btn-primary" ng-click="createEvent(ev)">Create Event</button>
        </form>
        <div class="well">
            <div class="row-fluid">
                <div class="span8">
                    <uib-tabset>
                        <uib-tab select="renderCalender('myCalendar1');">
                            <div class="alert alert-success" ng-show="alertMessage != undefined && alertMessage !=...

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 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']
        }];
        callback(events);
    };

    $scope.calEventsExt = {
        color: '#f00',
        textColor: 'yellow',
        events: [{
            type: 'party',
            title: 'Lunch',
            start: new Date(y, m, d, 12, 0),
            end: new Date(y, m, d, 14, 0),
            allDay: false
        }, {
     ...