add list option

dist/css/doodle.css

+.doodle-list {
+    list-style-type: none;
+}
+
+.doodle-label {
+    margin-left: 15px;
+}
+
 .doodle-table {
     border-collapse: collapse;
     width: 100%;

dist/js/doodle.js

@@ -8,7 +8,6 @@
      */
 
     let DoodleFront = function(item, config) {
-
         this.item = item;
         this.config = config;
         this.json = null;
@@ -20,6 +19,8 @@
         this.initLoad = () => {
             this.getJsonData();
 
+            console.log(this.json);
+
             if(!this.json) {
                 console.warn('Invalid Json data');
                 return;
@@ -27,21 +28,30 @@
 
             this.getDays();
             this.getHours();
-            this.createTable();
+            this.createTable(config);
 
-            this.initCSS();
+            this.initCSS(config);
 
             //Remet l'overflow pour le responsive en front
+            if(!config.vertical) {
                 $('table').parent().css('overflow-x', 'auto');
-
+            }
         };
 
         /**
          * Create Table
          */
-        this.createTable = () => {
+        this.createTable = (config) => {
+            console.log(config);
             $(document).on('click', 'input[type=checkbox]', this.eventInput);
 
+            if(config.vertical) {
+                this.item.append(`
+                <ul class="doodle-list">
+                    ${this.createList()}
+                </ul>
+            `);
+            } else {
                 this.item.append(`
                 <table class="table doodle-table frontend">
                 <thead>
@@ -53,11 +63,39 @@
                  </tbody>
                 </table>
             `);
+            }
         };
 
+        this.createList = function() {
+            let div = $('<div>');
+            // DAYS =>
+            for(let index in this.days) {
+                let formatDateDay = moment(this.days[index], this.dateFormat).locale('fr').format('dddd DD');
+                let formatDateMonth = moment(this.days[index], this.dateFormat).locale('fr').format('MMMM');
+
+                let $h3 = $('<h5><span class="date_format"><b>' + formatDateDay + '</b></span> ' + formatDateMonth + '</td>');
+                div.append($h3);
+
+                for(let index2 in this.hours) {
+                    let $li = $('<li class="p-3">');
+                    if(this.json[this.days[index]].includes(this.hours[index2])) {
+                        let hour = this.hours[index2];
+                        if (hour.indexOf(':') === -1) {
+                            hour += 'h';
+                        } else {
+                            hour = hour.replace(':', 'h');
+                        }
+                        $li.html(this.createInputBox(this.hours[index2], formatDateDay) + '<label class="doodle-label">' + hour + '</label>');
+                        div.append($li);
+                    }
+                }
+            }
+
+            return div.html();
+        }
+
         this.initCSS = function() {
             $('.empty').css('background', '#fafafa')
-
         };
 
         /**
@@ -185,9 +223,8 @@
                 this.json = JSON.parse(dataJson);
             } else {
                 let data = this.fileExistsAndGetData(dataJson);
-                if(data){
+                if(data) {
                     let json = JSON.parse(data);
-
                     if (!$.isEmptyObject(json)) {
                         this.json = json;
                     }

test/js/app.js

 $( document ).ready(function() {
     $('.doodle').Doodle({
-        editMode: true,
+        editMode: false,
         inputSelector: '#inputVal'
     });
 });
\ No newline at end of file