Calendar CSS formatter
@*------------------ Wrap the calendar in a class---------------
<div class="brcalendar">
@BRT.Calendar(DetailPage:"event")
</div>
*@
@*------------------ then put in this CSS ----------------------*@
@media (max-width: whateversize) {
/* Force table to not be like tables anymore */
.brcalendar table, .brcalendar thead, .brcalendar tbody, .brcalendar th, .brcalendar td, .brcalendar tr {
display: block;
}
/* Hide table headers (but not display: none;
, for accessibility) */
.brcalendar thead tr {
position: absolute;
top: -9999px;
left: -9999px;
display:none;
}
/*tr {
border: 1px solid #ccc;
}
*/
.brcalendar td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #ccc;
position: relative;
/*padding-left: 50%;
*/
height:auto;
}
.brcalendar td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
.cal-header, table.cal > tr, .cal-day-unused {
display:none !important;
}
.cal td {
overflow:visible !important;
}
td.cal-day, td.cal-day-weekend {
height:auto !important;
font-size:1rem !important;
}
}