JSFiddle - React, Tailwind, and code Playground

by Zonedark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<div class="container-fluid" ng-controller="MyCtrl">
  <div class="row">
    <div class="col-md-12">
      <h3>
    Sélectionnez un nom
    </h3>

      <label>Nom:</label>
      <select name="selectColor" id="selectColor" ng-model="data.selectedColor">
        <option ng-repeat="option in data.colors" value="{{option}}">{{option}}</option>
      </select>
      <h4>
  Cliquez sur une case vide pour vous ajouter sur ce créneau horaire. Re-cliquez sur une case où vous êtes déjà inscrit pour vous en désinscrire
  </h4>
      <table class="table table-bordered table-hover table-condensed">
        <thead>
          <tr>
            <th>
              Doodle Pampa
            </th>
            <th ng-repeat="d in week">
              {{d.day}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="h in hours">
            <td>
              {{h.hour }}
            </td>
            <td ng-repeat="d in week" ng-click="addHere(d.hours[$parent.$index])">
              <!--{{ d.hours[$parent.$index].value }}-->
              <square-Directive color="blue">
              </square-Directive>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br/>
  <label>Dispo :</label>
  <select name="selectDispoDay" id="selectDispoDay" ng-model="data.selectedDay">
    <option ng-repeat="option in week" value="{{option.day}}">{{option.day}}</option>
  </select>
  <br/>
  <label>De :</label>
  <select name="selectHourBegin" id="selectHourBegin" ng-model="data.selectedHourBegin">
    <option ng-repeat="option in hours" value="{{option.hour}}">{{option.hour}}</option>
  </select>
  <label>à :</label>
  <select name="selectHourEnd" id="selectHourEnd" ng-model="data.selectedHourEnd">
    <option ng-repeat="option in hours"...

CSS

.okbutton {
  width: 100px;
  height: 20px;
}

.square {
  width: 20px;
  height: 20px;
  background: white;
  border: solid 1px;
  float: left;
  margin-right: 4px;
  margin-left: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.circle {
  -moz-border-radius: 50px/50px;
  -webkit-border-radius: 50px 50px;
  border-radius: 50px/50px;
  border: solid 21px #f00;
  width: 50px;
  height: 50px;
}

JavaScript

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
// http://angular-ui.github.io/ui-calendar/

myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.hours = [{
    hour: "9:00",
    value: ""
  }, {
    hour: "10:00",
    value: ""
  }, {
    hour: "11:00",
    value: ""
  }, {
    hour: "12:00",
    value: ""
  }, {
    hour: "13:00",
    value: ""
  }, {
    hour: "14:00",
    value: ""
  }, {
    hour: "15:00",
    value: ""
  }, {
    hour: "16:00",
    value: ""
  }, {
    hour: "17:00",
    value: ""
  }, {
    hour: "18:00",
    value: ""
  }, {
    hour: "19:00",
    value: ""
  }, {
    hour: "20:00",
    value: ""
  }, {
    hour: "21:00",
    value: ""
  }, {
    hour: "22:00",
    value: ""
  }, {
    hour: "23:00",
    value: ""
  }]

  $scope.week = [{
      day: "Lundi",
      hours: angular.copy($scope.hours)
    }, {
      day: "Mardi",
      hours: angular.copy($scope.hours)
    }, {
      day: "Mercredi",
      hours: angular.copy($scope.hours)
    }, {
      day: "Jeudi",
      hours: angular.copy($scope.hours)
    }, {
      day: "Vendredi",
      hours: angular.copy($scope.hours)
    }, {
      day: "Samedi",
      hours: angular.copy($scope.hours)
    }, {
      day: "Dimanche",
      hours: angular.copy($scope.hours)
    },

  ]

  $scope.data = {
    selectedDay: null,
    selectedHourBegin: null,
    selectedHourEnd: null,
    selectedColor: null,
    colors: ["blue", "red", "yellow"]
  }

  $scope.debugData = function() {
    alert($scope.data.selectedDay + $scope.data.selectedHourBegin + $scope.data.selectedHourEnd + $scope.data.selectedColor);
  };

  $scope.addCreneau = function() {
    for (var i = 0; i < $scope.week.length; i++) {

      if ($scope.week[i].day == $scope.data.selectedDay) {
        for (var j = 0; j < $scope.week[i].hours.length; j++) {
          if ($scope.isInCreneau($scope.week[i].hours[j].hour) == true) {

         ...