diff --git a/definitions/en_CA.js b/definitions/en_CA.js
index 5f50bc84..0bc7c823 100644
--- a/definitions/en_CA.js
+++ b/definitions/en_CA.js
@@ -6200,7 +6200,7 @@ module.exports = function(s,config,lang){
                     {
                         "field": lang["Monitor"],
                         "fieldType": "select",
-                        "class": "dark monitors_list",
+                        "class": "monitors_list",
                         "possible": []
                     },
                     {
@@ -7917,5 +7917,38 @@ module.exports = function(s,config,lang){
           }
          }
       },
+      "Calendar": {
+          "section": "Calendar",
+          "blocks": {
+              "Search Settings": {
+                 "name": lang["Search Settings"],
+                 "color": "green",
+                 "section-pre-class": "col-md-4",
+                 "info": [
+                     {
+                         "field": lang["Monitor"],
+                         "fieldType": "select",
+                         "class": "monitors_list",
+                         "possible": []
+                     },
+                     {
+                         "class": "date_selector",
+                         "field": lang.Date,
+                     }
+                ]
+            },
+            "Calendar": {
+                noHeader: true,
+               "section-pre-class": "col-md-8",
+               "info": [
+                   {
+                       "fieldType": "div",
+                       "id": "calendar_draw_area",
+                       "divContent": ""
+                   }
+               ]
+           },
+         }
+      },
   })
 }
diff --git a/web/assets/js/bs5.calendar.js b/web/assets/js/bs5.calendar.js
new file mode 100644
index 00000000..6154c03d
--- /dev/null
+++ b/web/assets/js/bs5.calendar.js
@@ -0,0 +1,104 @@
+$(document).ready(function(e){
+    //Timelapse JPEG Window
+    var theEnclosure = $('#tab-calendarView')
+    var monitorsList = theEnclosure.find('.monitors_list')
+    var dateSelector = theEnclosure.find('.date_selector')
+    var calendarDrawArea = $('#calendar_draw_area')
+    var loadedVideosInMemory = {};
+    var openCalendarView = function(monitorId,startDate,endDate){
+        drawCalendarViewElements(monitorId,startDate,endDate)
+    }
+    var getSelectedTime = function(asUtc){
+        var dateRange = dateSelector.data('daterangepicker')
+        var startDate = dateRange.startDate.clone()
+        var endDate = dateRange.endDate.clone()
+        if(asUtc){
+            startDate = startDate.utc()
+            endDate = endDate.utc()
+        }
+        startDate = startDate.format('YYYY-MM-DDTHH:mm:ss')
+        endDate = endDate.format('YYYY-MM-DDTHH:mm:ss')
+        return {
+            startDate: startDate,
+            endDate: endDate
+        }
+    }
+
+    dateSelector.daterangepicker({
+        startDate: moment().utc().subtract(2, 'days'),
+        endDate: moment().utc(),
+        timePicker: true,
+        locale: {
+            format: 'YYYY/MM/DD hh:mm:ss A'
+        }
+    }, function(start, end, label) {
+        drawCalendarViewElements()
+    })
+    monitorsList.change(function(){
+        drawCalendarViewElements()
+    })
+    var drawCalendarViewElements = function(selectedMonitor,startDate,endDate){
+        var dateRange = getSelectedTime(false)
+        if(!startDate)startDate = dateRange.startDate
+        if(!endDate)endDate = dateRange.endDate
+        if(!selectedMonitor)selectedMonitor = monitorsList.val()
+        var queryString = ['start=' + startDate,'end=' + endDate,'limit=0']
+        var frameIconsHtml = ''
+        var apiURL = getApiPrefix('videos') + '/' + selectedMonitor;
+        var calendarData = []
+        loadedVideosInMemory = {}
+        $.getJSON(apiURL + '?' + queryString.join('&'),function(data){
+            $.each(data.videos,function(n,v){
+                if(v.status !== 0){
+                    loadedVideosInMemory[v.filename] = Object.assign({},v)
+                    var loadedMonitor = loadedMonitors[v.mid]
+                    if(loadedMonitor){
+                        v.title = loadedMonitor.name+' - '+(parseInt(v.size)/1048576).toFixed(2)+'mb';
+                    }
+                    v.start = moment.utc(v.time).local()
+                    v.end = moment.utc(v.end).local()
+                    calendarData.push(v)
+                }
+            })
+            try{
+                calendarDrawArea.fullCalendar('destroy')
+            }catch(er){
+
+            }
+            calendarDrawArea.fullCalendar({
+                header: {
+                    left: 'prev,next today',
+                    center: 'title',
+                    right: 'month,agendaWeek,agendaDay,listWeek'
+                },
+                defaultDate: moment(startDate).format('YYYY-MM-DD'),
+                locale: $user.details.lang.substring(0, 2),
+                navLinks: true,
+                eventLimit: true,
+                events: calendarData,
+                eventClick: function(v){
+                    var video = loadedVideosInMemory[v.filename]
+                    createVideoPlayerTab(video)
+                    $(this).css('border-color', 'red');
+                }
+            });
+
+        })
+    }
+
+    $('body').on('click','.open-timelapse-viewer',function(){
+        var el = $(this).parents('[data-mid]')
+        var monitorId = el.attr('data-mid')
+        openTab(`calendarView`,{},null)
+        monitorsList.val(monitorId).change()
+    })
+    addOnTabOpen('calendarView', function () {
+        drawMonitorListToSelector(monitorsList)
+        drawCalendarViewElements()
+    })
+    addOnTabReopen('calendarView', function () {
+        var theSelected = `${monitorsList.val()}`
+        drawMonitorListToSelector(monitorsList)
+        monitorsList.val(theSelected)
+    })
+})
diff --git a/web/pages/blocks/footer.ejs b/web/pages/blocks/footer.ejs
index d6fe221a..3dbb3539 100644
--- a/web/pages/blocks/footer.ejs
+++ b/web/pages/blocks/footer.ejs
@@ -3,7 +3,6 @@
 <script src="<%-window.libURL%>libs/js/pnotify.custom.min.js"></script>
 <script src="<%-window.libURL%>libs/js/socket.io.js"></script>
 <script src="<%-window.libURL%>libs/js/jquery.serialize.js"></script>
-<script src="<%-window.libURL%>assets/vendor/moment-with-locales.js"></script>
 <script src="<%-window.libURL%>libs/js/livestamp.min.js"></script>
 <script src="<%-window.libURL%>libs/js/poseidon.js"></script>
 <script src="<%-window.libURL%>assets/vendor/bootstrap5/js/bootstrap.bundle.min.js"></script>
diff --git a/web/pages/blocks/header.ejs b/web/pages/blocks/header.ejs
index aafe583b..8ac77bcf 100644
--- a/web/pages/blocks/header.ejs
+++ b/web/pages/blocks/header.ejs
@@ -78,6 +78,7 @@
         <%= details.css %>
     </style>
     <script src="<%-window.libURL%>libs/js/jquery.min.js"></script>
+    <script src="<%-window.libURL%>assets/vendor/moment-with-locales.js"></script>
 </head>
 <script>applicationName = `<%- lang.Shinobi %>`</script>
 <script>$user = <%- JSON.stringify($user) %></script>
diff --git a/web/pages/blocks/home.ejs b/web/pages/blocks/home.ejs
index 15c4cbdf..86b8cf2d 100644
--- a/web/pages/blocks/home.ejs
+++ b/web/pages/blocks/home.ejs
@@ -23,6 +23,7 @@
                     'home/onvifScanner',
                     'home/configFinder',
                     'home/logViewer',
+                    'home/calendar',
                     'home/eventListWithPics',
                     'confirm',
                     'help',
diff --git a/web/pages/blocks/home/calendar.ejs b/web/pages/blocks/home/calendar.ejs
new file mode 100644
index 00000000..cdc04292
--- /dev/null
+++ b/web/pages/blocks/home/calendar.ejs
@@ -0,0 +1,18 @@
+<main class="page-tab pt-3" id="tab-calendarView">
+    <div class="row <%- define.Theme.isDark ? `dark` : '' %>">
+        <%
+          var drawBlock
+          var buildOptions
+        %>
+        <%
+            include fieldBuilders.ejs
+        %>
+        <% Object.keys(define['Calendar'].blocks).forEach(function(blockKey){
+              var theBlock = define['Calendar'].blocks[blockKey]
+              drawBlock(theBlock)
+          }) %>
+    </div>
+    <link rel="stylesheet" href="<%-window.libURL%>libs/css/fullcalendar.min.css">
+    <script src="<%-window.libURL%>libs/js/fullcalendar.min.js"></script>
+    <script src="<%-window.libURL%>assets/js/bs5.calendar.js"></script>
+</main>