You are here

Home » API reference » Calendar 6.2

calendar.css in Calendar 6.2

Same filename and directory in other branches
  1. 5.2 calendar.css
  2. 5 calendar.css
  3. 7 calendar.css
  4. 7.2 calendar.css
/*  calendar calendar table styles  */
.calendar-calendar tr.odd, .calendar-calendar tr.even {
  background-color:#fff;
}
.calendar-calendar table {
  border-collapse: collapse;
  border-spacing: 0;
  margin:0 auto;
  padding:0;
  width: 100%; /* Setting at 100% causes problem in Internet Explorer. */
}
.calendar-calendar .month-view table {
  border:none;
  padding:0;
  margin:0;
  width:100%;
}

  /* IE needs a little help to get the side by side tables to the right size */
.calendar-calendar .year-view td {
  width:32%;
  padding:1px;
  border:none;
}

.calendar-calendar .year-view td table td {
  width:13%;
  padding:0;
}

.calendar-calendar tr {
  padding: 0;
  margin: 0;
  background-color: white;
}
.calendar-calendar th {
  color: #fff;
  background-color: #ccc;
  text-align: center;
  margin:0;
}
.calendar-calendar th a {
  font-weight: bold;
  color: #fff;
  background-color: #ccc;
}
.calendar-calendar td {
  width: 12%; /* 14% is about 1/7 of total table width */
  min-width: 12%;
  border: 1px solid #ccc;
  color: #777;
  text-align: right;
  vertical-align: top;
  margin: 0;
  padding:0;
}

/* simplify the mini calendar by removing borders */
.calendar-calendar .mini {
  border:none;
 }

/* format for the week number in the first cell */
.calendar-calendar td.week {
  width:1%;
  min-width:1%;
  }
.calendar-calendar .week {
  clear:both;
  font-style: normal;
  color: #555;
  font-size: 0.8em;
}
.calendar-calendar .week a {
  font-weight:normal;
}

/* IE6 does not support min-height, using Min-Height fast hack from http://www.dustindiaz.com/min-height-fast-hack */
.calendar-calendar .inner {
  min-height:5em;
  height:auto !important;
  height:5em;
  padding:0;
  margin:0;
}
.calendar-calendar .inner div {
  padding:0;
  margin:0;
}
/* Make sure paragraphs buried in calendar cells use padding, not margins, for separation so the background color doesn't come through. */
.calendar-calendar .inner p {
  padding:0 0 .8em 0;
  margin:0;
}
.calendar-calendar td a {
  font-weight: bold;
  text-decoration: none;
}
.calendar-calendar td a:hover {
  text-decoration: underline;
}
.calendar-calendar td.year, 
.calendar-calendar td.month {
  text-align: center;
}

/* format days of the week header cells */
.calendar-calendar th.days {
  color: #ccc;
  background-color: #224;
  text-align: center;
  padding:1px;
  margin:0;
 }

/*  floating day number div  */
.calendar-calendar div.day {
  float: right;
  text-align: center;
  padding: 0.125em 0.25em 0 0.25em;
  margin: 0;
  background-color: #f3f3f3;
  border: 1px solid gray;
  border-width: 0 0 1px 1px;
  clear:both;
  width:1.5em;
}

/*  individual node container  */
.calendar-calendar div.calendar {
  background-color: #fff;
  border: solid 1px #ddd;
  text-align: left;
  margin:0 .25em .25em 0;
  width: 96%;
  float:right; /* needed to keep IE from hiding the floating day number */
  clear:both;
}
/* No floating of day view content because there is no floating day number */
.calendar-calendar .day-view div.calendar {
  float:none;
  width:98%;
  margin:1% 1% 0 1%;
}

.calendar-calendar div.title {
  font-size:.8em;
  text-align:center;
}

.calendar-calendar div.title a {
  color: #000;
}
.calendar-calendar div.title a:hover {
  color: #c00;
}
.calendar-calendar .content {
  clear:both;
  padding: 3px;
  padding-left: 5px;
}
.calendar div.form-item {
  white-space: normal;
}

table td.mini, 
table th.mini, 
table.mini td.week {
  padding:0 1px 0 0;
  margin:0;
  }
table td.mini a {
  font-weight:normal;
  }
.calendar-calendar .mini-day-off {
  padding:0px;
}
.calendar-calendar .mini-day-on {
  padding:0px;
}
table .mini-day-on a {
  text-decoration:underline;
  }
.calendar-calendar .mini .title {
  font-size:.8em;
  }
.mini .calendar-calendar .week {
  font-size:.7em;
  }
.mini-row {
  width:100%;
  border:none;
}
.mini{
  width:32%;
  vertical-align:top;
  }

/* formatting for the legend stripe and block */
.calendar-calendar .stripe {
  height: 5px;
  width: auto;
  font-size:1px !important;
  line-height:1px !important;
}
.calendar-calendar .day-view .stripe {
  width:100%;
}
table.calendar-legend {
  background-color:#ccc;
  width:100%;
  margin:0;
  padding:0;
}
table.calendar-legend tr.odd .stripe,
table.calendar-legend tr.even .stripe {
  height:12px !important;
  font-size:9px !important;
  line-height:10px !important;
}
.calendar-legend td {
  text-align:left;
}

.calendar-empty {
  font-size:1px;
  line-height:1px;
}

/* formatting for the full day view */  
.calendar-calendar td.calendar-agenda-hour {
  font-family:serif;
  text-align:right;
  border:none;
  border-top:1px #333 dotted;
  padding-top:.25em;
  width:1%;
}
.calendar-calendar td.calendar-agenda-no-hours {
  min-width:1%;
}
.calendar-calendar td.calendar-agenda-hour .calendar-hour {
  font-size:1.2em;
  font-weight:bold;
}
.calendar-calendar td.calendar-agenda-hour .calendar-ampm {
  font-size:1em;
}
.calendar-calendar td.calendar-agenda-items {
  border:1px #333 dotted;
  text-align:left;
}
.calendar-calendar td.calendar-agenda-items div.calendar {
  width:auto;
  padding:.25em;
  margin:0;
}
.calendar-calendar div.calendar div.inner .calendar-agenda-empty {
  width:100%;
  text-align:center;
  vertical-align:middle;
  padding:1em 0;
  background-color:#fff;
}

/* the popup date selector for jumping to a new date */
.calendar-date-select form {
  text-align:right;
  float:right;
  width:25%;
}
.calendar-date-select div, 
.calendar-date-select input, 
.calendar-date-select label {
  text-align:right;
  padding:0;
  margin:0;
  float:right;
  clear:both;
}
.calendar-date-select .description {
  float:right;
}
.calendar-label {
  font-weight:bold;
  display:block;
  clear:both;
}

.calendar-calendar div.date-nav {
  background-color:#ccc;
  color:#777;
  padding:0.2em;
  width:auto;
  border:1px solid #ccc;
}
.calendar-calendar div.date-nav a, 
.calendar-calendar div.date-nav h3 {
  color:#777;
}
.calendar-calendar th.days {
  background-color:#eee;
  color:#777;
  font-weight:bold;
  border:1px solid #ccc;
}
.calendar-calendar td.empty {
  background:#ccc;
  border-color:#ccc;
}
.calendar-calendar table.mini td.empty {
  background:#fff;
  border-color:#fff;
}
.calendar-calendar td div.day {
  border:1px solid #ccc;
  border-top:none;
  border-right:none;
  margin-bottom:2px;
}
.calendar-calendar td .inner div,
.calendar-calendar td .inner div a {
  background:#eee;
}
/* Set small font size for all items in calendar div, themes can override this. */
/* Use x-small instead of em to avoid multiplying effect in nested items. */
.calendar-calendar div.calendar {
  border:none;
  font-size:x-small;
}
.calendar-calendar td .inner div.calendar div,
.calendar-calendar td .inner div.calendar div a {
  border:none;
  background:#ffc;
  padding:0 2px;
}
.calendar-calendar td .inner div.calendar div.calendar-more,
.calendar-calendar td .inner div.calendar div.calendar-more a {
  color:#444;
  background:#fff;
  text-align:right;
}
.calendar-calendar td .inner .view-field,
.calendar-calendar td .inner .view-field a {
  color:#444;
  font-weight:normal;
}

.calendar-calendar td span.date-display-single,
.calendar-calendar td span.date-display-start,
.calendar-calendar td span.date-display-end,
.calendar-calendar td span.date-display-separator {
  font-weight:bold;
}
.calendar-calendar td .inner div.day a {
  color:#4b85ac;
}
.calendar-calendar tr td.today,
.calendar-calendar tr.odd td.today,
.calendar-calendar tr.even td.today {
  background-color:#C3D6E4;
}
.calendar-calendar td .inner div.calendar div div.view-data-node-data-field-date-field-date-value {
  border-bottom:1px solid #ccc;
}

/* The following are not used by default but are available for themes */
.calendar-calendar td.past {}
.calendar-calendar td.future {}
.calendar-calendar td.has-events {}
.calendar-calendar td.has-no-events {}

File

calendar.css
View source 
  1. /*  calendar calendar table styles  */

  2. .calendar-calendar tr.odd, .calendar-calendar tr.even {

  3.   background-color:#fff;

  4. }

  5. .calendar-calendar table {

  6.   border-collapse: collapse;

  7.   border-spacing: 0;

  8.   margin:0 auto;

  9.   padding:0;

  10.   width: 100%; /* Setting at 100% causes problem in Internet Explorer. */

  11. }

  12. .calendar-calendar .month-view table {

  13.   border:none;

  14.   padding:0;

  15.   margin:0;

  16.   width:100%;

  17. }

  18. 

  19.   /* IE needs a little help to get the side by side tables to the right size */

  20. .calendar-calendar .year-view td {

  21.   width:32%;

  22.   padding:1px;

  23.   border:none;

  24. }

  25. 

  26. .calendar-calendar .year-view td table td {

  27.   width:13%;

  28.   padding:0;

  29. }

  30. 

  31. .calendar-calendar tr {

  32.   padding: 0;

  33.   margin: 0;

  34.   background-color: white;

  35. }

  36. .calendar-calendar th {

  37.   color: #fff;

  38.   background-color: #ccc;

  39.   text-align: center;

  40.   margin:0;

  41. }

  42. .calendar-calendar th a {

  43.   font-weight: bold;

  44.   color: #fff;

  45.   background-color: #ccc;

  46. }

  47. .calendar-calendar td {

  48.   width: 12%; /* 14% is about 1/7 of total table width */

  49.   min-width: 12%;

  50.   border: 1px solid #ccc;

  51.   color: #777;

  52.   text-align: right;

  53.   vertical-align: top;

  54.   margin: 0;

  55.   padding:0;

  56. }

  57. 

  58. /* simplify the mini calendar by removing borders */

  59. .calendar-calendar .mini {

  60.   border:none;

  61.  }

  62. 

  63. /* format for the week number in the first cell */

  64. .calendar-calendar td.week {

  65.   width:1%;

  66.   min-width:1%;

  67.   }

  68. .calendar-calendar .week {

  69.   clear:both;

  70.   font-style: normal;

  71.   color: #555;

  72.   font-size: 0.8em;

  73. }

  74. .calendar-calendar .week a {

  75.   font-weight:normal;

  76. }

  77. 

  78. /* IE6 does not support min-height, using Min-Height fast hack from http://www.dustindiaz.com/min-height-fast-hack */

  79. .calendar-calendar .inner {

  80.   min-height:5em;

  81.   height:auto !important;

  82.   height:5em;

  83.   padding:0;

  84.   margin:0;

  85. }

  86. .calendar-calendar .inner div {

  87.   padding:0;

  88.   margin:0;

  89. }

  90. /* Make sure paragraphs buried in calendar cells use padding, not margins, for separation so the background color doesn't come through. */

  91. .calendar-calendar .inner p {

  92.   padding:0 0 .8em 0;

  93.   margin:0;

  94. }

  95. .calendar-calendar td a {

  96.   font-weight: bold;

  97.   text-decoration: none;

  98. }

  99. .calendar-calendar td a:hover {

  100.   text-decoration: underline;

  101. }

  102. .calendar-calendar td.year, 

  103. .calendar-calendar td.month {

  104.   text-align: center;

  105. }

  106. 

  107. /* format days of the week header cells */

  108. .calendar-calendar th.days {

  109.   color: #ccc;

  110.   background-color: #224;

  111.   text-align: center;

  112.   padding:1px;

  113.   margin:0;

  114.  }

  115. 

  116. /*  floating day number div  */

  117. .calendar-calendar div.day {

  118.   float: right;

  119.   text-align: center;

  120.   padding: 0.125em 0.25em 0 0.25em;

  121.   margin: 0;

  122.   background-color: #f3f3f3;

  123.   border: 1px solid gray;

  124.   border-width: 0 0 1px 1px;

  125.   clear:both;

  126.   width:1.5em;

  127. }

  128. 

  129. /*  individual node container  */

  130. .calendar-calendar div.calendar {

  131.   background-color: #fff;

  132.   border: solid 1px #ddd;

  133.   text-align: left;

  134.   margin:0 .25em .25em 0;

  135.   width: 96%;

  136.   float:right; /* needed to keep IE from hiding the floating day number */

  137.   clear:both;

  138. }

  139. /* No floating of day view content because there is no floating day number */

  140. .calendar-calendar .day-view div.calendar {

  141.   float:none;

  142.   width:98%;

  143.   margin:1% 1% 0 1%;

  144. }

  145. 

  146. .calendar-calendar div.title {

  147.   font-size:.8em;

  148.   text-align:center;

  149. }

  150. 

  151. .calendar-calendar div.title a {

  152.   color: #000;

  153. }

  154. .calendar-calendar div.title a:hover {

  155.   color: #c00;

  156. }

  157. .calendar-calendar .content {

  158.   clear:both;

  159.   padding: 3px;

  160.   padding-left: 5px;

  161. }

  162. .calendar div.form-item {

  163.   white-space: normal;

  164. }

  165. 

  166. table td.mini, 

  167. table th.mini, 

  168. table.mini td.week {

  169.   padding:0 1px 0 0;

  170.   margin:0;

  171.   }

  172. table td.mini a {

  173.   font-weight:normal;

  174.   }

  175. .calendar-calendar .mini-day-off {

  176.   padding:0px;

  177. }

  178. .calendar-calendar .mini-day-on {

  179.   padding:0px;

  180. }

  181. table .mini-day-on a {

  182.   text-decoration:underline;

  183.   }

  184. .calendar-calendar .mini .title {

  185.   font-size:.8em;

  186.   }

  187. .mini .calendar-calendar .week {

  188.   font-size:.7em;

  189.   }

  190. .mini-row {

  191.   width:100%;

  192.   border:none;

  193. }

  194. .mini{

  195.   width:32%;

  196.   vertical-align:top;

  197.   }

  198. 

  199. /* formatting for the legend stripe and block */

  200. .calendar-calendar .stripe {

  201.   height: 5px;

  202.   width: auto;

  203.   font-size:1px !important;

  204.   line-height:1px !important;

  205. }

  206. .calendar-calendar .day-view .stripe {

  207.   width:100%;

  208. }

  209. table.calendar-legend {

  210.   background-color:#ccc;

  211.   width:100%;

  212.   margin:0;

  213.   padding:0;

  214. }

  215. table.calendar-legend tr.odd .stripe,

  216. table.calendar-legend tr.even .stripe {

  217.   height:12px !important;

  218.   font-size:9px !important;

  219.   line-height:10px !important;

  220. }

  221. .calendar-legend td {

  222.   text-align:left;

  223. }

  224. 

  225. .calendar-empty {

  226.   font-size:1px;

  227.   line-height:1px;

  228. }

  229. 

  230. /* formatting for the full day view */  

  231. .calendar-calendar td.calendar-agenda-hour {

  232.   font-family:serif;

  233.   text-align:right;

  234.   border:none;

  235.   border-top:1px #333 dotted;

  236.   padding-top:.25em;

  237.   width:1%;

  238. }

  239. .calendar-calendar td.calendar-agenda-no-hours {

  240.   min-width:1%;

  241. }

  242. .calendar-calendar td.calendar-agenda-hour .calendar-hour {

  243.   font-size:1.2em;

  244.   font-weight:bold;

  245. }

  246. .calendar-calendar td.calendar-agenda-hour .calendar-ampm {

  247.   font-size:1em;

  248. }

  249. .calendar-calendar td.calendar-agenda-items {

  250.   border:1px #333 dotted;

  251.   text-align:left;

  252. }

  253. .calendar-calendar td.calendar-agenda-items div.calendar {

  254.   width:auto;

  255.   padding:.25em;

  256.   margin:0;

  257. }

  258. .calendar-calendar div.calendar div.inner .calendar-agenda-empty {

  259.   width:100%;

  260.   text-align:center;

  261.   vertical-align:middle;

  262.   padding:1em 0;

  263.   background-color:#fff;

  264. }

  265. 

  266. /* the popup date selector for jumping to a new date */

  267. .calendar-date-select form {

  268.   text-align:right;

  269.   float:right;

  270.   width:25%;

  271. }

  272. .calendar-date-select div, 

  273. .calendar-date-select input, 

  274. .calendar-date-select label {

  275.   text-align:right;

  276.   padding:0;

  277.   margin:0;

  278.   float:right;

  279.   clear:both;

  280. }

  281. .calendar-date-select .description {

  282.   float:right;

  283. }

  284. .calendar-label {

  285.   font-weight:bold;

  286.   display:block;

  287.   clear:both;

  288. }

  289. 

  290. .calendar-calendar div.date-nav {

  291.   background-color:#ccc;

  292.   color:#777;

  293.   padding:0.2em;

  294.   width:auto;

  295.   border:1px solid #ccc;

  296. }

  297. .calendar-calendar div.date-nav a, 

  298. .calendar-calendar div.date-nav h3 {

  299.   color:#777;

  300. }

  301. .calendar-calendar th.days {

  302.   background-color:#eee;

  303.   color:#777;

  304.   font-weight:bold;

  305.   border:1px solid #ccc;

  306. }

  307. .calendar-calendar td.empty {

  308.   background:#ccc;

  309.   border-color:#ccc;

  310. }

  311. .calendar-calendar table.mini td.empty {

  312.   background:#fff;

  313.   border-color:#fff;

  314. }

  315. .calendar-calendar td div.day {

  316.   border:1px solid #ccc;

  317.   border-top:none;

  318.   border-right:none;

  319.   margin-bottom:2px;

  320. }

  321. .calendar-calendar td .inner div,

  322. .calendar-calendar td .inner div a {

  323.   background:#eee;

  324. }

  325. /* Set small font size for all items in calendar div, themes can override this. */

  326. /* Use x-small instead of em to avoid multiplying effect in nested items. */

  327. .calendar-calendar div.calendar {

  328.   border:none;

  329.   font-size:x-small;

  330. }

  331. .calendar-calendar td .inner div.calendar div,

  332. .calendar-calendar td .inner div.calendar div a {

  333.   border:none;

  334.   background:#ffc;

  335.   padding:0 2px;

  336. }

  337. .calendar-calendar td .inner div.calendar div.calendar-more,

  338. .calendar-calendar td .inner div.calendar div.calendar-more a {

  339.   color:#444;

  340.   background:#fff;

  341.   text-align:right;

  342. }

  343. .calendar-calendar td .inner .view-field,

  344. .calendar-calendar td .inner .view-field a {

  345.   color:#444;

  346.   font-weight:normal;

  347. }

  348. 

  349. .calendar-calendar td span.date-display-single,

  350. .calendar-calendar td span.date-display-start,

  351. .calendar-calendar td span.date-display-end,

  352. .calendar-calendar td span.date-display-separator {

  353.   font-weight:bold;

  354. }

  355. .calendar-calendar td .inner div.day a {

  356.   color:#4b85ac;

  357. }

  358. .calendar-calendar tr td.today,

  359. .calendar-calendar tr.odd td.today,

  360. .calendar-calendar tr.even td.today {

  361.   background-color:#C3D6E4;

  362. }

  363. .calendar-calendar td .inner div.calendar div div.view-data-node-data-field-date-field-date-value {

  364.   border-bottom:1px solid #ccc;

  365. }

  366. 

  367. /* The following are not used by default but are available for themes */

  368. .calendar-calendar td.past {}

  369. .calendar-calendar td.future {}

  370. .calendar-calendar td.has-events {}

  371. .calendar-calendar td.has-no-events {}