Jump to content
  • 0

Fixed Date Square Sizes or Calendar - Solution


Burnham

Question

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;

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...