JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="http://angular-ui.github.io/ui-calendar/bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.io/ui-calendar/bower_components/bootstrap-css/css/bootstrap.css">
<link rel="stylesheet" href="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/fullcalendar.css">
<script src="http://angular-ui.github.io/ui-calendar/bower_components/angular/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/fullcalendar.js"></script>
<script src="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/gcal.js"></script>
<script src="http://rawgithub.com/angular-ui/ui-calendar/master/src/calendar.js"></script>
<form name="form1" class="form-horizontal">
    <div ng-app="scrollApp">
        <div ng-controller="scrollController">
            <div class="calCtrl">
                <div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
            </div>
        </div>
</form>

CSS

.calCtrl {
    padding:15px;
    display:inline-block;
}

JavaScript

angular.module("scrollApp", ['ui.calendar','ui.bootstrap'])
    .controller("scrollController", function ($scope) {
    $scope.eventSources = [];
    $scope.uiConfig = {
        calendar: {
            height: 200,
            editable: true,
            header: {
                left: 'month basicWeek basicDay agendaWeek agendaDay',
                center: 'title',
                right: 'today prev,next'
            },
            dayClick: $scope.alertEventOnClick           
        }
    };
});