add day view

app/assets/index.html

@@ -54,6 +54,25 @@ body,html{
   transition: all 0s ease-in-out;
 }
 
+.dayview {
+  background-color:rgba(255,255,255,0.5);
+  border:2px solid rgba(0,0,0,0.5);
+  border-radius: 10%;
+  margin:5px;
+  min-height: 20vw;
+  /*margin:5px;*/
+/*  scroll-snap-align: center;*/
+  overflow:hidden;
+  transition: all 0s ease-in-out;
+}
+
+.dayview > .label{
+  background-color:#a44;
+  color:#ffa;
+  padding:.2cm;
+  font-size:.7cm;
+  text-align:center;
+}
 .label{
   background-color:#a44;
   color:#fff;
@@ -73,17 +92,39 @@ body,html{
   grid-template-columns: repeat(1, 1fr);
 }
 
+.dayview > .hours{
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.hours > div {
+  text-align:center;
+  height: 2cm; 
+  align:content;
+  border:1px solid grey;
+}
+
 .days div {
   text-align:center;
   height: 2cm; 
   align:content;
   border:1px solid grey;
 }
+
 .weekend{
   color:red;  
   background-color:white;
 }
 
+#daysDiv{
+  /*background: linear-gradient(white,#aaf);*/
+  background-color: #afa;
+  position: absolute;
+  top:0;
+  left:200vw;
+  
+}
 #weeksDiv{
   /*background: linear-gradient(white,#aaf);*/
   background-color: #aaf;
@@ -92,7 +133,7 @@ body,html{
   left:100vw;
   
 }
-#weeksDiv, #monthsDiv{
+#daysDiv, #weeksDiv, #monthsDiv{
   box-sizing:border-box;
   margin:0;
   scroll-snap-align: start;
@@ -122,6 +163,7 @@ box-shadow: 0 0 10px grey;
     <div id="all">
         <div id="monthsDiv" class="infinityScroll"></div> 
         <div id="weeksDiv" class="infinityScroll"></div> 
+        <div id="daysDiv" class="infinityScroll"></div> 
     </div>
    
 <script>
@@ -213,6 +255,35 @@ window.addEventListener("load",()=>{
   }
 
 
+  function createDayView(date = new Date()){
+    var dayviewDiv = document.createElement("div")
+    dayviewDiv.className = "dayview";
+    var labelDiv = document.createElement("div");
+    labelDiv.innerHTML = date.toLocaleString(locale,{"day":"numeric","month":"long","year":"numeric"})
+    labelDiv.className = "label"
+    dayviewDiv.appendChild(labelDiv);
+    var hoursDiv = document.createElement("div");
+    hoursDiv.className="hours";
+    dayviewDiv.appendChild(hoursDiv);
+    for(var hour=0;hour<24;hour+=2)
+    {
+      var hourDiv = document.createElement("div");
+      hourDiv.className = "hour";
+      hourDiv.textContent = ("0"+hour).slice(-2)+":00";
+      hoursDiv.appendChild(hourDiv);
+    }
+    return dayviewDiv;
+  }
+
+  function createDayViewItem(index){
+    var mdate = new Date();
+    mdate.setDate(mdate.getDate()+index);
+    var dayViewItem=createDayView(mdate); 
+    dayViewItem.nnindex=index;
+    return dayViewItem;
+  }
+
+
   function makeInfinityScroll(element,createItem){
     var item;
     //setup initial set of items
@@ -254,6 +325,7 @@ window.addEventListener("load",()=>{
 
   makeInfinityScroll(document.querySelector("#monthsDiv"),createMonthViewItem);
   makeInfinityScroll(document.querySelector("#weeksDiv"),createWeekViewItem);
+  makeInfinityScroll(document.querySelector("#daysDiv"),createDayViewItem);
 //    document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll);
 
 },false);