diff --git a/public-typescript/main.js b/public-typescript/main.js
index 7665b5f1..8c6c92bd 100644
--- a/public-typescript/main.js
+++ b/public-typescript/main.js
@@ -67,6 +67,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 dateElement.value = cal.value();
                 dateElement.dispatchEvent(new Event("change"));
             });
+            cal.on("show", () => {
+                document.querySelector("html").classList.add("is-clipped");
+            });
+            cal.on("hide", () => {
+                bulmaJS.toggleHtmlClipped();
+            });
             const datepickerElement = containerElement.querySelector("#" + cal._id);
             const datePickerNavButtonElements = datepickerElement.querySelectorAll(".datepicker-nav button.is-text");
             for (const datePickerNavButtonElement of datePickerNavButtonElements) {
@@ -106,6 +112,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 timeElement.value = cal.value();
                 timeElement.dispatchEvent(new Event("change"));
             });
+            cal.on("show", () => {
+                document.querySelector("html").classList.add("is-clipped");
+            });
+            cal.on("hide", () => {
+                bulmaJS.toggleHtmlClipped();
+            });
             const timePickerElement = containerElement.querySelector("#" + cal._id);
             const timePickerCancelButtonElement = timePickerElement.querySelector(".datetimepicker-footer-cancel");
             if (timePickerCancelButtonElement) {
diff --git a/public-typescript/main.ts b/public-typescript/main.ts
index 120d40fc..a8c41888 100644
--- a/public-typescript/main.ts
+++ b/public-typescript/main.ts
@@ -3,8 +3,10 @@
 import type * as globalTypes from "../types/globalTypes";
 import type { Options as BulmaCalendarOptions } from "bulma-calendar";
 import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types";
+import type { BulmaJS } from "@cityssm/bulma-js/types";
 
 declare const cityssm: cityssmGlobal;
+declare const bulmaJS: BulmaJS;
 
 (() => {
     const highlightMap = (
@@ -111,6 +113,16 @@ declare const cityssm: cityssmGlobal;
                 dateElement.dispatchEvent(new Event("change"));
             });
 
+            // Disable html scrolling when calendar is open
+            cal.on("show", () => {
+                document.querySelector("html").classList.add("is-clipped");
+            });
+
+            // Reenable scrolling, if a modal window is not open
+            cal.on("hide", () => {
+                bulmaJS.toggleHtmlClipped();
+            });
+
             // Get the datepicker container element
 
             const datepickerElement = containerElement.querySelector("#" + cal._id) as HTMLElement;
@@ -173,6 +185,16 @@ declare const cityssm: cityssmGlobal;
                 timeElement.dispatchEvent(new Event("change"));
             });
 
+            // Disable html scrolling when calendar is open
+            cal.on("show", () => {
+                document.querySelector("html").classList.add("is-clipped");
+            });
+
+            // Reenable scrolling, if a modal window is not open
+            cal.on("hide", () => {
+                bulmaJS.toggleHtmlClipped();
+            });
+
             // Get the datepicker container element
             const timePickerElement = containerElement.querySelector("#" + cal._id) as HTMLElement;
 
diff --git a/public/javascripts/main.min.js b/public/javascripts/main.min.js
index c874aade..c5920856 100644
--- a/public/javascripts/main.min.js
+++ b/public/javascripts/main.min.js
@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=e=>{const t=e.currentTarget.closest(".field").querySelector("input, select");if(t.classList.remove("is-readonly"),"INPUT"===t.tagName)t.readOnly=!1,t.disabled=!1;else{const e=t.querySelectorAll("option");for(const t of e)t.disabled=!1}t.focus()},t={type:"date",dateFormat:"yyyy-MM-dd",showFooter:!1,color:"info",displayMode:"dialog"},o={type:"time",timeFormat:"hh:mm",color:"info",displayMode:"dialog",validateLabel:"Set Time",minuteSteps:1},a=["red","green","orange","blue","pink","yellow","purple"],s=["bright","light","dark"],l={highlightMap:(e,t,o)=>{let a,s=t;for(;!(a=e.querySelector("#"+s))&&s.includes("-");)s=s.slice(0,Math.max(0,s.lastIndexOf("-")));if(a){a.style.fill=null,a.classList.add("highlight","is-"+o);const e=a.querySelectorAll("path");for(const t of e)t.style.fill=null}},initializeUnlockFieldButtons:t=>{const o=t.querySelectorAll(".is-unlock-field-button");for(const t of o)t.addEventListener("click",e)},initializeDatePickers:e=>{const o=e.querySelectorAll("input[type='date']");for(const a of o){const o=Object.assign({},t);a.required&&(o.showClearButton=!1),a.min&&(o.minDate=cityssm.dateStringToDate(a.min)),a.max&&(o.maxDate=cityssm.dateStringToDate(a.max));const s=exports.bulmaCalendar.attach(a,o)[0];s.on("save",()=>{a.value=s.value(),a.dispatchEvent(new Event("change"))});const l=e.querySelector("#"+s._id),r=l.querySelectorAll(".datepicker-nav button.is-text");for(const e of r)e.classList.add("is-"+t.color),e.classList.remove("is-text");const n=l.querySelector(".datetimepicker-clear-button");n&&(a.required?n.remove():(n.dataset.tooltip="Clear",n.innerHTML='<span class="has-text-weight-bold" aria-hidden="true">&times;</span>'))}},initializeTimePickers:e=>{const t=e.querySelectorAll("input[type='time']");for(const a of t){const t=Object.assign({},o);a.required&&(t.showClearButton=!1);const s=exports.bulmaCalendar.attach(a,t)[0];s.on("save",()=>{a.value=s.value(),a.dispatchEvent(new Event("change"))});const l=e.querySelector("#"+s._id),r=l.querySelector(".datetimepicker-footer-cancel");r&&r.remove();const n=l.querySelector(".datetimepicker-clear-button");n&&(a.required?n.remove():(n.dataset.tooltip="Clear",n.innerHTML='<span class="has-text-weight-bold" aria-hidden="true">&times;</span>'))}},populateAliases:e=>{const t=e.querySelectorAll(".alias");for(const e of t)switch(e.dataset.alias){case"Map":e.textContent=exports.aliases.map;break;case"Lot":e.textContent=exports.aliases.lot;break;case"lot":e.textContent=exports.aliases.lot.toLowerCase();break;case"Occupancy":e.textContent=exports.aliases.occupancy;break;case"occupancy":e.textContent=exports.aliases.occupancy.toLowerCase();break;case"Occupant":e.textContent=exports.aliases.occupant;break;case"occupant":e.textContent=exports.aliases.occupant.toLowerCase();break;case"ExternalReceiptNumber":e.textContent=exports.aliases.externalReceiptNumber}},getRandomColor:e=>{let t=e;return t.length<2&&(t+="a1"),exports.randomColor({seed:t+t,hue:a[t.codePointAt(t.length-1)%a.length],luminosity:s[t.codePointAt(t.length-2)%s.length]})}};exports.los=l})();
\ No newline at end of file
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=e=>{const t=e.currentTarget.closest(".field").querySelector("input, select");if(t.classList.remove("is-readonly"),"INPUT"===t.tagName)t.readOnly=!1,t.disabled=!1;else{const e=t.querySelectorAll("option");for(const t of e)t.disabled=!1}t.focus()},t={type:"date",dateFormat:"yyyy-MM-dd",showFooter:!1,color:"info",displayMode:"dialog"},o={type:"time",timeFormat:"hh:mm",color:"info",displayMode:"dialog",validateLabel:"Set Time",minuteSteps:1},a=["red","green","orange","blue","pink","yellow","purple"],s=["bright","light","dark"],l={highlightMap:(e,t,o)=>{let a,s=t;for(;!(a=e.querySelector("#"+s))&&s.includes("-");)s=s.slice(0,Math.max(0,s.lastIndexOf("-")));if(a){a.style.fill=null,a.classList.add("highlight","is-"+o);const e=a.querySelectorAll("path");for(const t of e)t.style.fill=null}},initializeUnlockFieldButtons:t=>{const o=t.querySelectorAll(".is-unlock-field-button");for(const t of o)t.addEventListener("click",e)},initializeDatePickers:e=>{const o=e.querySelectorAll("input[type='date']");for(const a of o){const o=Object.assign({},t);a.required&&(o.showClearButton=!1),a.min&&(o.minDate=cityssm.dateStringToDate(a.min)),a.max&&(o.maxDate=cityssm.dateStringToDate(a.max));const s=exports.bulmaCalendar.attach(a,o)[0];s.on("save",()=>{a.value=s.value(),a.dispatchEvent(new Event("change"))}),s.on("show",()=>{document.querySelector("html").classList.add("is-clipped")}),s.on("hide",()=>{bulmaJS.toggleHtmlClipped()});const l=e.querySelector("#"+s._id),n=l.querySelectorAll(".datepicker-nav button.is-text");for(const e of n)e.classList.add("is-"+t.color),e.classList.remove("is-text");const r=l.querySelector(".datetimepicker-clear-button");r&&(a.required?r.remove():(r.dataset.tooltip="Clear",r.innerHTML='<span class="has-text-weight-bold" aria-hidden="true">&times;</span>'))}},initializeTimePickers:e=>{const t=e.querySelectorAll("input[type='time']");for(const a of t){const t=Object.assign({},o);a.required&&(t.showClearButton=!1);const s=exports.bulmaCalendar.attach(a,t)[0];s.on("save",()=>{a.value=s.value(),a.dispatchEvent(new Event("change"))}),s.on("show",()=>{document.querySelector("html").classList.add("is-clipped")}),s.on("hide",()=>{bulmaJS.toggleHtmlClipped()});const l=e.querySelector("#"+s._id),n=l.querySelector(".datetimepicker-footer-cancel");n&&n.remove();const r=l.querySelector(".datetimepicker-clear-button");r&&(a.required?r.remove():(r.dataset.tooltip="Clear",r.innerHTML='<span class="has-text-weight-bold" aria-hidden="true">&times;</span>'))}},populateAliases:e=>{const t=e.querySelectorAll(".alias");for(const e of t)switch(e.dataset.alias){case"Map":e.textContent=exports.aliases.map;break;case"Lot":e.textContent=exports.aliases.lot;break;case"lot":e.textContent=exports.aliases.lot.toLowerCase();break;case"Occupancy":e.textContent=exports.aliases.occupancy;break;case"occupancy":e.textContent=exports.aliases.occupancy.toLowerCase();break;case"Occupant":e.textContent=exports.aliases.occupant;break;case"occupant":e.textContent=exports.aliases.occupant.toLowerCase();break;case"ExternalReceiptNumber":e.textContent=exports.aliases.externalReceiptNumber}},getRandomColor:e=>{let t=e;return t.length<2&&(t+="a1"),exports.randomColor({seed:t+t,hue:a[t.codePointAt(t.length-1)%a.length],luminosity:s[t.codePointAt(t.length-2)%s.length]})}};exports.los=l})();
\ No newline at end of file