Bookings > Grid without horizontal scrolling: HOW TO

[damien-ad]

We run a small 25 units apartments hotel, and one of the shortcomings of the Bookings > Grid was that you have to scroll horizontally to see all days of the month. This used to be different on our previous PMS, and was missed by some staff members. We asked support if there was a way to customize the Grid, the answer was no.

It turns out that if you want whole month view without horizontal scrolling, there is actually two options: number one, buy a bigger screen ...
OR resize the Grid yourself, using Stylus (Firefox add-on; if you don't use Firefox, you should: excellent browser made by people who actually care about your freedom).

We went with the Stylus approach, here is how it works:
1) install the Stylus add-on
2) create a new style with the script hereunder, and select URL as the "Applies to" control, with "https://beds24.com/control3.php?pagetype=bookingsgrid"
3) adjust the script according to your needs: this version will hide property names, room types and room status columns (all useless to us). The easiest is to play around with the script, deleting/modifying parts and watch the outcome.

Code: Select all

/* This part hides property names, room types and room status columns */
.bookgrid_rowpropname, .bookgrid_rowroomname, .bookgrid_rowunitstatus {
    display: none;
}

.table-responsive, .b24table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important; /* Hide overflow to prevent horizontal scrolling */
}

#innercaltable {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed; /* Fixes column widths to ensure table fits within container */
}

/* Style for the date header: day of week */
#innercaltable .caldate .smalldatetext {
        display: block; /* Display on new line */
        font-size: 13px !important; /* Smaller font size for the day */
        font-weight: bold !important;
        text-align: center; /* Center the day within the cell */
}

/* Style for the date header: day number */
#innercaltable .caldate {
        font-size: 16px !important; /* Larger font size for the date */
        line-height: 1.4; /* Adjust line height for better visual spacing */
}

/* Style for the date header: month name and year */
#innercaltable .caldate div {
    display: block; /* Make the div a block element to occupy its own line */
    font-size: 12px !important; /* Maintain the smaller font size */
    line-height: 1.2; /* Adjust line height for better visibility of the break */
    white-space: pre-wrap; /* Allows content to wrap to the next line within the div */
}

/* Use a CSS hack to force content to wrap by injecting a wide no-break space */
#innercaltable .caldate div::before {
    content: "\2003"; /* Unicode for an em-space, which may encourage wrapping */
    font-size: 0; /* Hide the actual space */
}

/* Style for the unit name column (left side) */
#innercaltable td.bookgrid_rowunitname {
    min-width: 50px !important;
    width: 50px !important;
}

/* Style for the unit name column (right side) */
#innercaltable td.bookgrid_rowunitname:last-child {
    text-align: right; /* Aligns text to the right side of the cell */
    min-width: 70px !important;
    width: 70px !important;
}