update css

dist/css/doodle.css

@@ -241,11 +241,11 @@
     border-radius: 0 2px 2px 0 !important;
 }
 
-.doodle-table .label_input input {
+.doodle-table .label_input input, .doodle-list .label_input input {
     display: none;
 }
 
-.doodle-table .label_input span {
+.doodle-table .label_input span, .doodle-list .label_input span {
     position: relative;
     display: flex;
     width: 16px;
@@ -256,7 +256,7 @@
     overflow: hidden;
 }
 
-.doodle-table .label_input span i {
+.doodle-table .label_input span i, .doodle-list .label_input span i {
     position: relative;
     width: 16px;
     height: 16px;
@@ -265,38 +265,66 @@
     transform-origin: center left;
 }
 
-.doodle-table .label_input span i:before, .doodle-table .label_input span i:after {
+.doodle-list .label_input span {
+    margin-left: 5px;
+    float: left;
+}
+
+.doodle-list .label_input {
+    position: relative;
+    height: 100%;
+    width: 120px;
+    display: flex;
+    align-items: center;
+}
+
+.doodle-list .label_input h5 {
+    margin-left: 10px;
+}
+
+.doodle-list .doodle-label {
+    position: absolute;
+}
+
+.doodle-list li {
+    height: 50px;
+    width: 120px;
+    cursor: pointer;
+    margin-top: 2px;
+}
+
+.doodle-table .label_input span i:before, .doodle-table .label_input span i:after, .doodle-list .label_input span i:before, .doodle-list .label_input span i:after {
     content: "";
     position: absolute;
     background-color: white;
     border-radius: 20px;
 }
 
-.doodle-table .label_input span i:before {
+.doodle-table .label_input span i:before, .doodle-list .label_input span i:before {
     height: 0;
     top: 60%;
     left: 0;
     width: 2px;
 }
 
-.doodle-table .label_input span i:after {
+.doodle-table .label_input span i:after, .doodle-list .label_input span i:after {
     width: 0;
     bottom: 0;
     left: 0;
     height: 2px;
 }
 
-.doodle-table .label_input input:checked ~ span {
+.doodle-table .label_input input:checked ~ span, .doodle-list .label_input input:checked ~ span{
     border: none;
     background-color: rgba(109, 92, 174, 1);
 }
 
-.doodle-table .label_input input:checked ~ span i:before {
+.doodle-table .label_input input:checked ~ span i:before, .doodle-list .label_input input:checked ~ span i:before {
     height: 25%;
     transition: height 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
 }
 
-.doodle-table .label_input input:checked ~ span i:after {
+.doodle-table .label_input input:checked ~ span i:after, .doodle-list .label_input input:checked ~ span i:after {
     width: 75%;
     transition: width 300ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
 }

dist/js/doodle.js

@@ -85,7 +85,7 @@
                         } else {
                             hour = hour.replace(':', 'h');
                         }
-                        $li.html(this.createInputBox(this.hours[index2], formatDateDay) + '<label class="doodle-label">' + hour + '</label>');
+                        $li.html(this.createInputBox(this.hours[index2], formatDateDay, hour));
                         div.append($li);
                     }
                 }
@@ -148,10 +148,16 @@
          * @param day
          * @returns {string}
          */
-        this.createInputBox = (hour, day) => {
+        this.createInputBox = (hour, day, name = null) => {
             let dayFormat = moment(day, this.dateFormat).format('DDMMYYYY');
 
-            return "<label class='label_input'><input type='checkbox' data-check=" + dayFormat  + '_' + hour + " /><span><i></i></span></label>"
+            let html = "<label class='label_input'><input type='checkbox' data-check=" + dayFormat  + '_' + hour + " /><span><i></i></span>";
+            if(name) {
+                html += "<h5>" + name + "</h5>";
+            }
+            html += "</label>"
+            return html;
+
         };
 
         /**
@@ -268,8 +274,11 @@
         this.createJSON = () => {
             let $input = $(this.config.inputSelector);
 
+            console.log($input);
+
             if ($input.length > 0) {
                 $input.val(JSON.stringify(this.outputJson));
+                console.log($input.val());
             }
         };
 
@@ -278,6 +287,7 @@
          * @param e event
          */
         this.eventInput = (e) => {
+            console.log("OUAIS");
             let data = $(e.target).data('check').split('_');
             let isChecked = $(e.target).is(':checked');
 
@@ -950,7 +960,6 @@
         this.initLoad();
     };
 
-
     /**
      *
      * @param options
@@ -986,5 +995,4 @@
         }
 
     };
-
 })(jQuery);
\ No newline at end of file