Ajout du format date et création des inputs

assets/lib/doodle/css/doodle.css

 table {
     border-collapse:collapse;
-    width:90%;
+    width:100%;
     table-layout: fixed;
 }
 th, td {
     border:1px solid black;
-    width:20%;
+    padding: 0;
 }
 td, th {
     text-align:center;
@@ -13,3 +13,78 @@ td, th {
 caption {
     font-weight:bold
 }
+/*******************************************************
+ *************************INPUT*************************
+ *******************************************************/
+
+label.label_input{
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0;
+}
+
+.label_input input {
+    display: none;
+}
+
+.label_input span {
+    position: relative;
+    display: flex;
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(44,44,44,.35);
+    border-radius: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.label_input span i {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    margin-left: 2px;
+    transform: rotate(-45deg) translateX(0%) translateY(0%) scale(0.8);
+    transform-origin: center left;
+}
+
+.label_input span i:before, .label_input span i:after {
+    content: "";
+    position: absolute;
+    background-color: white;
+    border-radius: 20px;
+}
+
+.label_input span i:before {
+    height: 0;
+    top: 50%;
+    left: 0;
+    width: 2px;
+}
+
+.label_input span i:after {
+    width: 0;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+}
+
+.label_input input:checked ~ span {
+    border: none;
+    background-color: rgba(44,44,44,.35);
+}
+
+.label_input input:checked ~ span i:before {
+    height: 50%;
+    transition: height 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
+}
+
+.label_input input:checked ~ span i:after {
+    width: 100%;
+    transition: width 300ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+/*******************************************************
+ ***********************END INPUT***********************
+ *******************************************************/
\ No newline at end of file

assets/lib/doodle/js/doodle.js

@@ -61,7 +61,7 @@
                     let $tr = $('<tr>');
 
                     if (!(i == dayLength)) {
-                        let formatDate = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('DD MMMM YYYY');
+                        let formatDate = moment(this.days[i], 'DD/MM/YYYY').locale('fr').format('dddd DD MMMM YYYY');
 
                         html = $tr.append('<td>' + formatDate + '</td>')
                             .append(this.createBodyContent(this.days[i]));
@@ -78,7 +78,7 @@
                 for(let index in this.days) {
                     let $tr = $('<tr>');
 
-                    let formatDate = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('DD MMMM YYYY');
+                    let formatDate = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('dddd DD MMMM YYYY');
 
                     html = $tr.append('<td>' + formatDate + '</td>')
                         .append(this.createBodyContent(this.days[index]));
@@ -124,7 +124,7 @@
         function createInputBox(hour, day) {
             let dayFormat = moment(day, 'DD/MM/YYYY').format('DDMMYYYY');
 
-            return "<input type='checkbox' data-check=" + dayFormat  + '_' + hour + " />"
+            return "<label class='label_input'><input type='checkbox' data-check=" + dayFormat  + '_' + hour + " /><span><i></i></span></label>"
         }
 
         /**
@@ -149,8 +149,6 @@
                 } else {
                     finalSortedTab.push(el)
                 }
-
-                /*console.log(finalSortedTab.sort());*/
             });
 
             let hoursSorted = finalSortedTab.sort();