You are here

Home » API reference » Calendar 7

calendar.css in Calendar 7

Same filename and directory in other branches
  1. 5.2 calendar.css
  2. 5 calendar.css
  3. 6.2 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. */
  clear:both;
}
.calendar-calendar .month-view table {
  border:none;
  padding:0;
  margin:0;
  width:100%;
  clear: both;
}

  /* 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;
  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.   clear:both;

  12. }

  13. .calendar-calendar .month-view table {

  14.   border:none;

  15.   padding:0;

  16.   margin:0;

  17.   width:100%;

  18.   clear: both;

  19. }

  20. 

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

  22. .calendar-calendar .year-view td {

  23.   width:32%;

  24.   padding:1px;

  25.   border:none;

  26. }

  27. 

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

  29.   width:13%;

  30.   padding:0;

  31. }

  32. 

  33. .calendar-calendar tr {

  34.   padding: 0;

  35.   margin: 0;

  36.   background-color: white;

  37. }

  38. .calendar-calendar th {

  39.   color: #fff;

  40.   background-color: #ccc;

  41.   text-align: center;

  42.   margin:0;

  43. }

  44. .calendar-calendar th a {

  45.   font-weight: bold;

  46.   color: #fff;

  47.   background-color: #ccc;

  48. }

  49. .calendar-calendar td {

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

  51.   min-width: 12%;

  52.   border: 1px solid #ccc;

  53.   color: #777;

  54.   text-align: right;

  55.   vertical-align: top;

  56.   margin: 0;

  57.   padding:0;

  58. }

  59. 

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

  61. .calendar-calendar .mini {

  62.   border:none;

  63.  }

  64. 

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

  66. .calendar-calendar td.week {

  67.   width:1%;

  68.   min-width:1%;

  69.   }

  70. .calendar-calendar .week {

  71.   clear:both;

  72.   font-style: normal;

  73.   color: #555;

  74.   font-size: 0.8em;

  75. }

  76. .calendar-calendar .week a {

  77.   font-weight:normal;

  78. }

  79. 

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

  81. .calendar-calendar .inner {

  82.   min-height:5em;

  83.   height:auto !important;

  84.   height:5em;

  85.   padding:0;

  86.   margin:0;

  87. }

  88. .calendar-calendar .inner div {

  89.   padding:0;

  90.   margin:0;

  91. }

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

  93. .calendar-calendar .inner p {

  94.   padding:0 0 .8em 0;

  95.   margin:0;

  96. }

  97. .calendar-calendar td a {

  98.   font-weight: bold;

  99.   text-decoration: none;

  100. }

  101. .calendar-calendar td a:hover {

  102.   text-decoration: underline;

  103. }

  104. .calendar-calendar td.year, 

  105. .calendar-calendar td.month {

  106.   text-align: center;

  107. }

  108. 

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

  110. .calendar-calendar th.days {

  111.   color: #ccc;

  112.   background-color: #224;

  113.   text-align: center;

  114.   padding:1px;

  115.   margin:0;

  116.  }

  117. 

  118. /*  floating day number div  */

  119. .calendar-calendar div.day {

  120.   float: right;

  121.   text-align: center;

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

  123.   margin: 0;

  124.   background-color: #f3f3f3;

  125.   border: 1px solid gray;

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

  127.   clear:both;

  128.   width:1.5em;

  129. }

  130. 

  131. /*  individual node container  */

  132. .calendar-calendar div.calendar {

  133.   background-color: #fff;

  134.   border: solid 1px #ddd;

  135.   text-align: left;

  136.   margin:0 .25em .25em 0;

  137.   width: 96%;

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

  139.   clear:both;

  140. }

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

  142. .calendar-calendar .day-view div.calendar {

  143.   float:none;

  144.   width:98%;

  145.   margin:1% 1% 0 1%;

  146. }

  147. 

  148. .calendar-calendar div.title {

  149.   font-size:.8em;

  150.   text-align:center;

  151. }

  152. 

  153. .calendar-calendar div.title a {

  154.   color: #000;

  155. }

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

  157.   color: #c00;

  158. }

  159. .calendar-calendar .content {

  160.   clear:both;

  161.   padding: 3px;

  162.   padding-left: 5px;

  163. }

  164. .calendar div.form-item {

  165.   white-space: normal;

  166. }

  167. 

  168. table td.mini, 

  169. table th.mini, 

  170. table.mini td.week {

  171.   padding:0 1px 0 0;

  172.   margin:0;

  173.   }

  174. table td.mini a {

  175.   font-weight:normal;

  176.   }

  177. .calendar-calendar .mini-day-off {

  178.   padding:0px;

  179. }

  180. .calendar-calendar .mini-day-on {

  181.   padding:0px;

  182. }

  183. table .mini-day-on a {

  184.   text-decoration:underline;

  185.   }

  186. .calendar-calendar .mini .title {

  187.   font-size:.8em;

  188.   }

  189. .mini .calendar-calendar .week {

  190.   font-size:.7em;

  191.   }

  192. .mini-row {

  193.   width:100%;

  194.   border:none;

  195. }

  196. .mini{

  197.   width:32%;

  198.   vertical-align:top;

  199.   }

  200. 

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

  202. .calendar-calendar .stripe {

  203.   height: 5px;

  204.   width: auto;

  205.   font-size:1px !important;

  206.   line-height:1px !important;

  207. }

  208. .calendar-calendar .day-view .stripe {

  209.   width:100%;

  210. }

  211. table.calendar-legend {

  212.   background-color:#ccc;

  213.   width:100%;

  214.   margin:0;

  215.   padding:0;

  216. }

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

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

  219.   height:12px !important;

  220.   font-size:9px !important;

  221.   line-height:10px !important;

  222. }

  223. .calendar-legend td {

  224.   text-align:left;

  225. }

  226. 

  227. .calendar-empty {

  228.   font-size:1px;

  229.   line-height:1px;

  230. }

  231. 

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

  233. .calendar-calendar td.calendar-agenda-hour {

  234.   font-family:serif;

  235.   text-align:right;

  236.   border:none;

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

  238.   padding-top:.25em;

  239.   width:1%;

  240. }

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

  242.   min-width:1%;

  243. }

  244. .calendar-calendar td.calendar-agenda-hour .calendar-hour {

  245.   font-size:1.2em;

  246.   font-weight:bold;

  247. }

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

  249.   font-size:1em;

  250. }

  251. .calendar-calendar td.calendar-agenda-items {

  252.   border:1px #333 dotted;

  253.   text-align:left;

  254. }

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

  256.   width:auto;

  257.   padding:.25em;

  258.   margin:0;

  259. }

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

  261.   width:100%;

  262.   text-align:center;

  263.   vertical-align:middle;

  264.   padding:1em 0;

  265.   background-color:#fff;

  266. }

  267. 

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

  269. .calendar-date-select form {

  270.   text-align:right;

  271.   float:right;

  272.   width:25%;

  273. }

  274. .calendar-date-select div, 

  275. .calendar-date-select input, 

  276. .calendar-date-select label {

  277.   text-align:right;

  278.   padding:0;

  279.   margin:0;

  280.   float:right;

  281.   clear:both;

  282. }

  283. .calendar-date-select .description {

  284.   float:right;

  285. }

  286. .calendar-label {

  287.   font-weight:bold;

  288.   display:block;

  289.   clear:both;

  290. }

  291. 

  292. .calendar-calendar div.date-nav {

  293.   background-color:#ccc;

  294.   color:#777;

  295.   width:auto;

  296.   border:1px solid #ccc;

  297. }

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

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

  300.   color:#777;

  301. }

  302. .calendar-calendar th.days {

  303.   background-color:#eee;

  304.   color:#777;

  305.   font-weight:bold;

  306.   border:1px solid #ccc;

  307. }

  308. .calendar-calendar td.empty {

  309.   background:#ccc;

  310.   border-color:#ccc;

  311. }

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

  313.   background:#fff;

  314.   border-color:#fff;

  315. }

  316. .calendar-calendar td div.day {

  317.   border:1px solid #ccc;

  318.   border-top:none;

  319.   border-right:none;

  320.   margin-bottom:2px;

  321. }

  322. .calendar-calendar td .inner div,

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

  324.   background:#eee;

  325. }

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

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

  328. .calendar-calendar div.calendar {

  329.   border:none;

  330.   font-size:x-small;

  331. }

  332. .calendar-calendar td .inner div.calendar div,

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

  334.   border:none;

  335.   background:#ffc;

  336.   padding:0 2px;

  337. }

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

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

  340.   color:#444;

  341.   background:#fff;

  342.   text-align:right;

  343. }

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

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

  346.   color:#444;

  347.   font-weight:normal;

  348. }

  349. 

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

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

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

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

  354.   font-weight:bold;

  355. }

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

  357.   color:#4b85ac;

  358. }

  359. .calendar-calendar tr td.today,

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

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

  362.   background-color:#C3D6E4;

  363. }

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

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

  366. }

  367. 

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

  369. .calendar-calendar td.past {}

  370. .calendar-calendar td.future {}

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

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