Now you can navigate the schedule by selecting a date or by clicking the left/right arrows on the guide. I don't like the jqueryui theme, but it's good enough for now

src/main/java/com/moparisthebest/rcrdit/RcrdIt.java

@@ -443,6 +443,10 @@ public class RcrdIt extends ResourceConfig implements AutoCloseable {
     public GetScheduleResponse getSchedule(GetScheduleRequest scheduleRequest) {
         List<Channel> channelList = new ArrayList<>();
         try{
+            if(scheduleRequest.getEndTime().isAfter(GetScheduleRequest.getLastPossibleDateToDisplayOnSchedule(schedule.getLastEndTime()))){
+                //not going to work, need to set things back a bit
+                scheduleRequest.setStartAndEndTimeBasedOnLastDataAvailable(schedule.getLastEndTime());
+            }
             int firstItemToLoad = ((scheduleRequest.getPageNum()-1) * scheduleRequest.getChannelsPerPage());
             if(schedule.getChannels().size() > firstItemToLoad){
                 for(int i=firstItemToLoad; i<schedule.getChannels().size() && channelList.size() <scheduleRequest.getChannelsPerPage() ;i++){

src/main/java/com/moparisthebest/rcrdit/requestbeans/GetScheduleRequest.java

@@ -7,6 +7,7 @@ package com.moparisthebest.rcrdit.requestbeans;
 
 import java.time.Instant;
 import java.time.LocalDateTime;
+import java.time.ZoneId;
 import java.time.ZoneOffset;
 import java.time.format.DateTimeFormatter;
 
@@ -25,13 +26,32 @@ public class GetScheduleRequest {
    private final String dateTimeFormatPattern = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'";
 
     public GetScheduleRequest() {
+        setStartAndEndTimeBasedOnCurrentType();
+    }
+    
+    
+    private void setStartAndEndTimeBasedOnCurrentType(){
         LocalDateTime now =  LocalDateTime.now();
-        LocalDateTime topOfHour = now.withMinute(0);
+        LocalDateTime topOfHour = now.withMinute(0).withSecond(0).withNano(0);
         setStartTime(topOfHour.toInstant(ZoneOffset.systemDefault().getRules().getOffset(topOfHour)));
-        LocalDateTime endOfNextHour = now.plusHours(2).withMinute(59).withSecond(59);
+        LocalDateTime endOfNextHour = now.plusHours(2).withMinute(59).withSecond(59).withNano(0);
         setEndTime(endOfNextHour.toInstant(ZoneOffset.systemDefault().getRules().getOffset(endOfNextHour)));
     }
     
+     public void setStartAndEndTimeBasedOnLastDataAvailable(Instant lastDataAvailable){
+        LocalDateTime lastDataAvailableLdt = LocalDateTime.ofInstant(lastDataAvailable,ZoneId.systemDefault());
+        LocalDateTime newLastDate = lastDataAvailableLdt.minusHours(5).withMinute(59).withSecond(59).withNano(0);
+        LocalDateTime newStartTimeLdt = newLastDate.minusHours(2).withMinute(0).withSecond(0).withNano(0);
+        setStartTime(newStartTimeLdt.toInstant(ZoneOffset.systemDefault().getRules().getOffset(newStartTimeLdt)));
+        setEndTime(newLastDate.toInstant(ZoneOffset.systemDefault().getRules().getOffset(newLastDate)));
+    }
+     
+     public static Instant getLastPossibleDateToDisplayOnSchedule(Instant lastDataAvailable){
+        LocalDateTime lastDataAvailableLdt = LocalDateTime.ofInstant(lastDataAvailable,ZoneId.systemDefault());
+        LocalDateTime newLastDate = lastDataAvailableLdt.minusHours(5).withMinute(59).withSecond(59).withNano(0);
+        return newLastDate.toInstant(ZoneOffset.systemDefault().getRules().getOffset(newLastDate));
+     }
+   
    
    
     public String getStartTimeString() {
@@ -50,6 +70,12 @@ public class GetScheduleRequest {
         this.startTimeString = startTimeString;
         if(startTimeString != null){
             startTime = Instant.parse(startTimeString);
+            LocalDateTime topOfHour = LocalDateTime.now().withMinute(0).withSecond(0).withNano(0);
+            Instant topOfHourInstant = topOfHour.toInstant(ZoneOffset.systemDefault().getRules().getOffset(topOfHour));
+            if(startTime.equals(topOfHourInstant) || startTime.isBefore(topOfHourInstant)){
+                setStartAndEndTimeBasedOnCurrentType();
+            }
+            
         }
         
     }
@@ -62,7 +88,12 @@ public class GetScheduleRequest {
         this.endTimeString = endTime;
         if(endTimeString != null){
             DateTimeFormatter formatter = DateTimeFormatter.ofPattern(dateTimeFormatPattern).withZone( ZoneOffset.UTC );
-            startTime = Instant.parse(endTimeString);
+            this.endTime = Instant.parse(endTimeString);
+            LocalDateTime endOfNextHour = LocalDateTime.now().plusHours(2).withMinute(59).withSecond(59).withNano(0);
+            Instant endOfHourInstant = endOfNextHour.toInstant(ZoneOffset.systemDefault().getRules().getOffset(endOfNextHour));
+            if(this.endTime.equals(endOfHourInstant) || this.endTime.isBefore(endOfHourInstant)){
+                setStartAndEndTimeBasedOnCurrentType();
+            }
         }
     }
 

src/main/webapp/css/rcrdit.css

@@ -76,8 +76,9 @@ ul#channelGroups li ul li ul li.channel {
     border-bottom: 1px solid #dbdbdc;
     border-right: 1px solid #dbdbdc;
     border-top: 0;
-    height: 40px;
+    height: 60px;
     padding: 0;
+    padding-top: 20px;
     position: relative;
     text-align: center;
 }
@@ -87,7 +88,7 @@ ul#channelGroups li ul li ul li:first-child {
 }
 
 ul#channelGroups li ul>li {
-    height: 40px;
+    height: 60px;
     margin: 0;
     overflow: hidden;
     padding: 0;
@@ -98,10 +99,38 @@ ul#channelGroups li ul>li {
 
 ul#channelGroups li ul li ul li.programs>div {
     display: block;
-    height: 40px;
+    height: 60px;
     position: absolute;
 }
 
+.frame {
+    height: 36px;      /* equals max image height */
+    width: 50px;
+    white-space: nowrap;
+    
+    text-align: center; margin: 1em 0;
+}
+
+.helper {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+.frame img {
+    vertical-align: middle;
+    max-height: 36px;
+    max-width: 50px;
+}
+
+.datePickerTextBox{
+    border-radius: 4px;
+    height: 30px;
+    font-size: 16pt;
+}
+
+
+
 
 
 ul#channelGroups li ul li ul li.programs>div {

src/main/webapp/index.html

@@ -23,6 +23,8 @@
     <title>Rcrdit</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
     <script src="js/rcrdit.js"></script>
+    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <link rel="stylesheet" type="text/css" href="css/rcrdit.css">
 </head>
 <body>

src/main/webapp/js/rcrdit.js

@@ -47,9 +47,6 @@ function getSchedule2(requestObject){
             var channelList = data.schedule;
             var requestObject = data.requestObject;
             var requestStartTimeEpochSeconds = requestObject.startTime.epochSecond;
-            var requestEndTimeEpochSeconds = requestObject.endTime.epochSecond;
-            
-            
             $("#guideGoesHere").html("");
             $("#guideGoesHere").append(getProgramsHeader(requestObject));
             var channelUl = $("<ul></ul>").addClass("roundedBottom");
@@ -61,6 +58,7 @@ function getSchedule2(requestObject){
                 var channelProgramUl = $("<ul></ul>").attr("channelNum",channel.displayName);
                 individualChannelLi.append(channelProgramUl);
                 var channelNameLi = $("<li class='channel'></li>");
+                channelNameLi.data("channelObj",channel);
                 channelNameLi.append("<span></span>").addClass("channelNumLabel").append(channel.displayName);
                 channelProgramUl.append(channelNameLi);
                 
@@ -74,6 +72,7 @@ function getSchedule2(requestObject){
                 channelUl.append(individualChannelLi);
             }
             $("#guideGoesHere").append(channelGroupsUl);
+            $("#guideGoesHere").data("lastSearchObject",requestObject);
         },
         error:  function ( jqXHR, textStatus, errorThrown ){
             alert(errorThrown);
@@ -133,10 +132,54 @@ function formatTime(dateObj){
 function getProgramsHeader(requestObject){
     var d = new Date();
     
-    var heading = $("<h1></h1>").append("&nbsp;&nbsp;&nbsp;&nbsp;TV Schedule: ");
-    var dateDiv = $().append("THE DATE GOES HERE");
+    var heading = $("<div style='height: 60px'><div text-align:middle; style='position:fixed; width:300px; left: 35px;'><h1>TV Schedule:</h1></div></div>");
+    var datePickerTextBox = $("<input type='text' style='position: relative; z-index: 100000' class='datePickerTextBox'></input>").datepicker({
+        onSelect: function(){
+            var lastRequestObject = $("#guideGoesHere").data("lastSearchObject");
+            var startDate = new Date(lastRequestObject.startTime.epochSecond*1000);
+            var endDate = new Date(lastRequestObject.endTime.epochSecond*1000);
+            var selectedDate = $(this).datepicker( "getDate" )
+            startDate.setDate(selectedDate.getDate());
+            startDate.setMonth(selectedDate.getMonth());
+            startDate.setFullYear(selectedDate.getFullYear());
+            endDate.setDate(selectedDate.getDate());
+            endDate.setMonth(selectedDate.getMonth());
+            endDate.setFullYear(selectedDate.getFullYear());
+            if(endDate.getTime() < startDate.getTime()){
+                endDate.setDate(endDate.getDate()+1);
+            }
+            delete lastRequestObject.startTime;
+            delete lastRequestObject.endTime;
+            lastRequestObject.startTimeString = startDate.toISOString();
+            lastRequestObject.endTimeString = endDate.toISOString();
+            getSchedule2(lastRequestObject); 
+        }
+    }).datepicker("setDate",new Date(requestObject.startTime.epochSecond*1000));
+    
+    var dateDiv = $($("<div style='position: fixed; top: 25px; left: 250px;'></div>")).append(datePickerTextBox);
+    
+    heading.append(dateDiv);
+    
+    //heading.add(dateDiv);
+    
+    
+    
+    var leftArrowLink = $("<a href='javascript:void(0)' id='backArrow'><span class='helper'></span><img style='height:20px; width:20px' style=' vertical-align: middle; margin-top: auto; margin-bottom:auto' src='images/left.png'></img></a>");
+    var goLeftDiv = $("<div class='frame' style='position:absolute; left:0px; line-height: 36px;'></div>").append(leftArrowLink);
+    leftArrowLink.click(function(){
+       var lastRequestObject = $("#guideGoesHere").data("lastSearchObject");
+        var startDate = new Date(lastRequestObject.startTime.epochSecond*1000);
+        var endDate = new Date(lastRequestObject.endTime.epochSecond*1000);
+        startDate.setHours(startDate.getHours()-2);
+        endDate.setHours(endDate.getHours()-2);
+        delete lastRequestObject.startTime;
+        delete lastRequestObject.endTime;
+        lastRequestObject.startTimeString = startDate.toISOString();
+        lastRequestObject.endTimeString = endDate.toISOString();
+        getSchedule2(lastRequestObject); 
+    });
+    var emptrySpacerLi = $("<li></li>").addClass("navlspacer").append(goLeftDiv);
     
-    var emptrySpacerLi = $("<li></li>").addClass("navlspacer");
     var numHoursDisplayed = Math.ceil((requestObject.endTime.epochSecond-requestObject.startTime.epochSecond)/60/60);
     var hourBlockWidth = (100.0/numHoursDisplayed)+"%";
     
@@ -150,6 +193,25 @@ function getProgramsHeader(requestObject){
         listOfHoursDisplayed.append(hour);
         firstHourDate.setHours(firstHourDate.getHours()+1);
     }
+    
+    var rightArrowLink = $("<a href='javascript:void(0)' id='forwardArrow'><span class='helper'></span><img style='height:20px; width:20px' style=' vertical-align: middle; margin-top: auto; margin-bottom:auto' src='images/right.png'></img></a>");
+    var goRightDiv = $("<div class='frame' style='position:absolute; right:0px'></div>").append(rightArrowLink);
+    rightArrowLink.click(function(){
+        var lastRequestObject = $("#guideGoesHere").data("lastSearchObject");
+        var startDate = new Date(lastRequestObject.startTime.epochSecond*1000);
+        var endDate = new Date(lastRequestObject.endTime.epochSecond*1000);
+        startDate.setHours(startDate.getHours()+2);
+        endDate.setHours(endDate.getHours()+2);
+        delete lastRequestObject.startTime;
+        delete lastRequestObject.endTime;
+        lastRequestObject.startTimeString = startDate.toISOString();
+        lastRequestObject.endTimeString = endDate.toISOString();
+        getSchedule2(lastRequestObject);
+        
+    });
+    
+    listOfHoursDisplayed.append(goRightDiv);
+    
     var timeUl = $("<ul></ul>").addClass("hours").append(emptrySpacerLi).append(listOfHoursDisplayed);
     
     var innerLi = $("<li></li>").addClass("nav").addClass("first").append(timeUl);
@@ -157,8 +219,8 @@ function getProgramsHeader(requestObject){
     
     var timeDisplayDiv = $("<div></div>").attr("id","timeDisplayDiv").append(innerLi);
     
-    var guideHeader = $("<div></div>").addClass("guide-header").append(heading).append(dateDiv).append(timeDisplayDiv);
-    var guideHeaderContainer = $("<div class='guide-header-container'></div>").attr("style","height: 77px;").append(guideHeader);
+    var guideHeader = $("<div></div>").addClass("guide-header").append(heading).append(timeDisplayDiv);
+    var guideHeaderContainer = $("<div class='guide-header-container'></div>").attr("style","height: 96px;").append(guideHeader);
     return guideHeaderContainer;
 }
 
@@ -166,6 +228,7 @@ function getProgramDiv(program, requestObject, startAtPercent){
     var programDiv = $("<div></div>").addClass("channelProgram");
     var titleInfoDiv = $("<div></div>").addClass("titleInfo");
     var otherStuffDiv = $("<div></div>").addClass("otherProgramStuff");
+    programDiv.data("programObj",program);
     titleInfoDiv.append(program.title);
     if(!isNull(program.subTitle)){
         titleInfoDiv.append($("<p>"+program.subTitle+"</p>").addClass("programSubtitle"));