Burnham

This is my solution to fixed date squares for the Calendar. I find the calendar looks odd when it adjusts it's size to fit data, as many squares are different dimensions. The code is at the bottom of this post. Note: The calendar will not appear square in the preview section, you will need to save the style and apply it to a datapage. To make size edits to the code: EXPLANATION: 1. For the *-width styles, using a percentage value (1/7 = 14.28...%) will always result in fixed-proportion yet responsive widths. 2. For the *-height columns, Having a value of 180px, as obtained from the browser inspector, gives the best compromise, achieving an almost perfect square cell appearance. If making edits, you will most likely want to make edits in the every section where you see the code: min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; Copy and Paste Code under Calendar Layout Source: .cbResultSetCalendar { /*Results Page Calendar Attributes*/ border-collapse: collapse; border-spacing: 0px; width: 100%; margin: 6px; border: 1px solid #e8e8e8; -webkit-box-shadow: 0px 0px 0px 6px #f9f9f9; -moz-box-shadow: 0px 0px 0px 6px #f9f9f9; box-shadow: 0px 0px 0px 6px #f9f9f9; margin: 6px; } .cbResultSetCalendarCellspacing { border-spacing:0px; } .cbResultSetCalendarCaptionTable { /*Results Page Calendar Caption Table Attributes*/ width: 100%; margin: 6px; } .cbResultSetCalendarCaptionTableCellspacing { border-spacing:0px; } .cbResultSetCalendarCaptionCell { /*Results Page Calendar Caption Cell Attributes*/ text-align: center; vertical-align: middle; padding: 7px 10px 7px 10px; white-space: nowrap; } .cbResultSetCalendarCaption { /*Results Page Calendar Caption Attributes*/ color: #222222; font-size: 14px; font-family: Arial, sans-serif; font-style: normal; font-weight: bold; } .cbResultSetCalendarHeader { /*Results Page Calendar Header Attributes*/ background-color: #313131; } .cbResultSetCalendarHeader_hover { /*Results Page Calendar Header Hover Attributes*/ background-color: #313131; } .cbResultSetCalendarHeaderCell { /*Results Page Calendar Header Cell Attributes*/ text-align: center; vertical-align: top; padding: 10px 10px 10px 10px; white-space: normal; background: #fafafa; color: #222222; border-color: #e8e8e8; border-style: solid; border-width: 1px 0px 1px 0px; } .cbResultSetCalendarTableRow { /*Results Page Calendar Odd Rows Attributes*/ } .cbResultSetCalendarOddCell { /*Results Page Calendar Odd Cell Attributes*/ text-align: left; vertical-align: top; min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; white-space: normal; background: #ffffff; border-color: #e8e8e8; border-style: solid; border-width: 1px; padding: 0px; } .cbResultSetCalendarEvenCell { /*Results Page Calendar Even Cell Attributes*/ text-align: left; vertical-align: top; min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; white-space: normal; background: #ffffff; border-color: #e8e8e8; border-style: solid; border-width: 1px; padding: 0px; } .cbResultSetCalendarOddCell_hover { /*Results Page Calendar Odd Cell Hover Attributes*/ text-align: left; vertical-align: top; min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; white-space: normal; background: #ffffff; border-color: #e8e8e8; border-style: solid; border-width: 1px; padding: 0px; } .cbResultSetCalendarEvenCell_hover { /*Results Page Calendar Even Cell Hover Attributes*/ text-align: left; vertical-align: top; min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; white-space: normal; background: #ffffff; border-color: #e8e8e8; border-style: solid; border-width: 1px; padding: 0px; } .cbResultSetCalendarTableNowCell { /*Results Page Calendar Today Cell Attributes*/ text-align: left; vertical-align: top; min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; white-space: normal; background: #F8F8F8; border-color: #e8e8e8; border-style: solid; border-width: 1px; padding: 3px; } .cbResultSetCalendarField { /*Results Page Calendar Data Attributes*/ text-align: right; padding: 0px; color: #000000; font-family: Arial; font-size: 12px; } .cbResultSetCalendarFieldInactiveDate { /*Results Page Calendar Inactive Data Attributes*/ text-align: right; padding: 0px; color: #AAAAAA; font-family: Arial; font-size: 12px; } .cbResultSetPanelBaseContainer{} .cbResultSetPanelDataContainer { padding: 10px 11px 10px; } .cbResultSetPanelCalendarRAContainer { /*Results Page Record Action Container Attributes*/ text-align: left; vertical-align: middle; white-space: nowrap; background-color: #fafafa; padding: 2px 3px; opacity: 0.8; filter:alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; overflow: hidden; } .cbResultSetPanelCalendarRAContainer_hover { /*Results Page Record Action Container Attributes*/ text-align: left; vertical-align: middle; white-space: nowrap; background-color: #fafafa; padding: 2px 3px; opacity: 1; filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; overflow: hidden; }