Fix calendar mobile responsiveness with adaptive height and grid layout

cypress/e2e/ui/events/mobile.calendar.spec.js

@@ -0,0 +1,81 @@
+/// <reference types="cypress" />
+
+describe("Mobile Calendar", () => {
+    beforeEach(() => cy.setupStandardSession());
+
+    it("Should display calendar on mobile viewport", () => {
+        // Set mobile viewport (iPhone X dimensions)
+        cy.viewport(375, 812);
+        cy.visit("v2/calendar");
+        cy.url().should("include", "v2/calendar");
+
+        // Calendar should be visible
+        cy.get("#calendar").should("be.visible");
+
+        // Calendar container should adapt to mobile width
+        cy.get("#calendar").should("have.css", "width");
+
+        // Mobile toolbar should have simplified header
+        cy.get(".fc-toolbar-chunk").should("exist");
+        cy.get(".fc-prev-button").should("be.visible");
+        cy.get(".fc-next-button").should("be.visible");
+        cy.get(".fc-today-button").should("be.visible");
+
+        // Footer toolbar should exist on mobile with view buttons
+        cy.get(".fc-footer-toolbar").should("exist");
+        cy.get(".fc-dayGridMonth-button").should("be.visible");
+    });
+
+    it("Should stack sidebar below calendar on mobile", () => {
+        // Set mobile viewport
+        cy.viewport(375, 812);
+        cy.visit("v2/calendar");
+
+        // Check that the calendar and sidebar columns are full width on mobile
+        cy.get(".col-sm-12").should("have.length.at.least", 2);
+    });
+
+    it("Should display calendar on tablet viewport", () => {
+        // Set tablet viewport (iPad dimensions)
+        cy.viewport(768, 1024);
+        cy.visit("v2/calendar");
+        cy.url().should("include", "v2/calendar");
+
+        // Calendar should be visible
+        cy.get("#calendar").should("be.visible");
+
+        // Tablet should use medium grid layout (col-md-8 and col-md-4)
+        cy.get(".col-md-8").should("exist");
+        cy.get(".col-md-4").should("exist");
+    });
+
+    it("Should allow event creation on mobile", () => {
+        const title = "Mobile Event - " + Cypress._.random(0, 1e6);
+        cy.viewport(375, 812);
+        cy.visit("v2/calendar");
+
+        // Find and click on a calendar day
+        cy.get(".fc-daygrid-day").first().click();
+
+        // Modal should appear for creating new event
+        cy.get(".modal-header input").should("be.visible");
+        cy.get(".modal-header input").type(title);
+
+        // Modal should be properly sized for mobile
+        cy.get(".modal-dialog").should("be.visible");
+    });
+
+    it("Should handle orientation change", () => {
+        // Test portrait to landscape orientation change
+        cy.viewport(375, 812); // Portrait
+        cy.visit("v2/calendar");
+        cy.get("#calendar").should("be.visible");
+
+        // Change to landscape
+        cy.viewport(812, 375);
+        cy.get("#calendar").should("be.visible");
+
+        // Calendar should still be functional
+        cy.get(".fc-toolbar-chunk").should("exist");
+    });
+});

src/skin/js/Calendar.js

@@ -401,16 +401,33 @@ function initializeCalendar() {
         window.CRM.fullcalendar.destroy();
     }
 
+    // Detect mobile devices for simplified toolbar
+    var isMobile = window.innerWidth < 768;
+
     // initialize the calendar
     // -----------------------------------------------------------------
     window.CRM.fullcalendar = new FullCalendar.Calendar(document.getElementById("calendar"), {
         locale: window.CRM.lang || "en",
-        headerToolbar: {
-            start: "prev,next today",
-            center: "title",
-            end: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
-        },
-        height: 600,
+        headerToolbar: isMobile
+            ? {
+                  start: "prev,next",
+                  center: "title",
+                  end: "today",
+              }
+            : {
+                  start: "prev,next today",
+                  center: "title",
+                  end: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
+              },
+        footerToolbar: isMobile
+            ? {
+                  start: "",
+                  center: "",
+                  end: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
+              }
+            : false,
+        contentHeight: "auto",
+        windowResizeDelay: 200,
         selectable: true,
         editable: window.CRM.calendarJSArgs.isModifiable,
         eventDrop: window.moveEventModal.handleEventDrop,

src/v2/templates/calendar/calendar.php

@@ -7,7 +7,7 @@
 ?>
 
 <div class="row">
-    <div class="col-lg-9">
+    <div class="col-lg-9 col-md-8 col-sm-12">
         <div class="card card-info">
             <div class="card-body no-padding">
                 <!-- THE CALENDAR -->
@@ -17,7 +17,7 @@
         </div>
         <!-- /. box -->
     </div>
-    <div class="col-lg-3">
+    <div class="col-lg-3 col-md-4 col-sm-12">
         <div class="card card-primary card-outline card-outline-tabs">
             <div class="card-header p-0 border-bottom-0">
                 <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">