JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
	   
	  <table class="scheduleTable table-bordered">
			<thead>
				<tr>	
					<th>Name:</th>						
					<th ng-repeat="item in calendar()">{{ item }}</th>					
				</tr>
			</thead>
			<tbody>		
				<tr ng-repeat="institutionUserConnection in getCurrentDateScheduler()">
					<td>{{ institutionUserConnection.user.firstname }} {{ institutionUserConnection.user.lastname }}</td>
					<td ng-repeat="x in rangeTypeArray()" ng-dblclick="removeSchedulerContainer(calendar()[x], institutionUserConnection)">
						<span class="timeRange" ng-if="calendar()[x].indexOf(serviceSchedule.start.split(' ')[0]) > -1" ng-repeat="serviceSchedule in getServiceScheduler(institutionUserConnection)">
							<span editable-text="serviceSchedule.startTime" e-style="width:55px; height:18px; padding:0;">{{serviceSchedule.start}}</span>
							-
							<span editable-text="serviceSchedule.startTime" e-style="width:55px; height:18px; padding:0;">{{serviceSchedule.end}}</span>
						</span>
					</td>
				</tr>
			</tbody>
	 </table>	  
	</div>

CSS

.scheduleTable {
    margin-left: 100px;
    margin-top: 100px;
}
.scheduleTable .timeRange {
    background-color: #74d2eb;
    margin: 0.1em;
}

JavaScript

var myApp = angular.module('myApp', []);
		
		myApp.controller('MyController', ['$scope', function($scope) {
		  $scope.viewType = 'TABLEVIEW';
		  $scope.textToEdit = 'TextToEdit';
		  
		  var currentDateScheduler = [];
		  
		  $scope.$watchCollection('currentDateScheduler', function(newValue, oldValue) {
    		console.log('watch');
    		});
		  
		  
		  /********************/
		  var arrayFunction1 = [];
		  var containedObject1 = {
				start: "21.09.2015 09:27",
				end: "21.09.2015 13:54",
				containerType: "SERVICE"
				};
		  var containedObject2 = {
				start: "23.09.2015 09:27",
				end: "23.09.2015 13:54",
				containerType: "VACATION"
				};
		 arrayFunction1.push(containedObject1);
		 arrayFunction1.push(containedObject2);
		  /********************/
		  
		 
		 // institutionUserConnection 1
		 var institutionUserConnection1 = {};
		 var user1 = {};
		 user1.firstname = 'Hans';
		 user1.lastname = 'Huber';
		 var scheduler1 = {};
		 var serviceSchedules1 = {};
		 serviceSchedules1['1440367200000'] = arrayFunction1;
		 scheduler1.serviceSchedules = serviceSchedules1;
		 institutionUserConnection1.user = user1;
		 institutionUserConnection1.scheduler = scheduler1;
		 currentDateScheduler.push(institutionUserConnection1);
		  
		 // institutionUserConnection 2
		 var institutionUserConnection2 = {};
		 var user2 = {};
		 user2.firstname = 'Walter';
		 user2.lastname = 'Meier';
		 var scheduler2 = {};
		 var serviceSchedules2 = {};
		 serviceSchedules2['1440367200000'] = arrayFunction1;
		 scheduler2.serviceSchedules = serviceSchedules2;
		 institutionUserConnection2.user = user2;
		 institutionUserConnection2.scheduler = scheduler2;
		 currentDateScheduler.push(institutionUserConnection2);
		  
		var calendarLabelsArray = [];
    	calendarLabelsArray.push('Montag: 21.09.2015');
		calendarLabelsArray.push('Dienstag: 22.09.2015');
		calendarLabelsArray.push('Mittwoch: 23.09.2015');
		
		var names = [];
		names.push('Hans Meier');
		names.push('Walter...