highlighted visit period. Issue #247

smash/web/templates/appointments/add.html

@@ -33,6 +33,13 @@
             background-color: #fafafa;
             border: solid 1px #ccc;
         }
+        .visit-period {
+            background: repeating-linear-gradient( -45deg, white, white  5px, #F5F5F5 5px, #F5F5F5 7px );
+        }
+        .fc-today > .fc-day-number{
+            font-weight: 600;
+            text-decoration: underline;
+        }
     </style>
 {% endblock styles %}
 
@@ -127,6 +134,7 @@ New appointment for visit from {{visit_start}} to {{visit_end}}
 
     <script src="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.js' %}"></script>
     <script src="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
+    <script src="{% static 'AdminLTE/plugins/moment.js/moment-range.min.js' %}"></script>
     <script src="{% static 'AdminLTE/plugins/moment.js/moment.min.js' %}"></script>
     <script src="{% static 'js/appointment.js' %}"></script>
     <script src="{% static 'fullcalendar-scheduler/lib/fullcalendar.min.js' %}"></script>
@@ -151,6 +159,23 @@ New appointment for visit from {{visit_start}} to {{visit_end}}
                     center: 'title',
                     right: 'month,agendaWeek'
                 },
+                {% if isGeneral %}
+                {% else %}
+                dayRender: function(daysOfWeek, cell) {
+                    
+                    
+                    var visit_start = moment('{{visit_start}}');
+                    var visit_end   = moment('{{visit_end}}');
+                    if(visit_start <= daysOfWeek && daysOfWeek <= visit_end){
+                        $(cell).addClass('visit-period');
+                        if($(cell).hasClass('fc-today')){
+                            $(cell).css('background', 'repeating-linear-gradient( -45deg, #fcf8e3, #fcf8e3  5px, #e8e2c2 5px, #e8e2c2 7px )');
+                        }
+                    }else{
+                        $(cell).removeClass('visit-period');
+                    }                    
+                },
+                {% endif %}
                 dayClick: function (date, jsEvent, view) {
                     var dateString = date.format();
                     if (dateString.indexOf("T") >= 0) {