mirror of
https://github.com/wassname/fullcalendar.git
synced 2026-09-11 12:10:23 +08:00
rejiggered event html/css, added print stylesheet, much more printer friendly
This commit is contained in:
Adam Shaw
+222
-83
@@ -1,69 +1,156 @@
|
||||
|
||||
/* Cell Styles
|
||||
------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
table.fc-border-separate {
|
||||
border-collapse: separate;
|
||||
.fc-widget-header, /* <th>, usually */
|
||||
.fc-widget-content { /* <td>, usually */
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.fc-border-separate th,
|
||||
.fc-border-separate td {
|
||||
border-width: 1px 0 0 1px;
|
||||
.fc-state-highlight { /* <td> today cell */ /* TODO: add .fc-today to <th> */
|
||||
background: #ffc;
|
||||
}
|
||||
|
||||
.fc-border-separate th.fc-last,
|
||||
.fc-border-separate td.fc-last {
|
||||
border-right-width: 1px;
|
||||
.fc-cell-overlay { /* semi-transparent rectangle while dragging */
|
||||
background: #9cf;
|
||||
opacity: .2;
|
||||
filter: alpha(opacity=20); /* for IE */
|
||||
}
|
||||
|
||||
.fc-border-separate tr.fc-last th,
|
||||
.fc-border-separate tr.fc-last td {
|
||||
border-bottom-width: 1px;
|
||||
|
||||
|
||||
/* Buttons
|
||||
------------------------------------------------------------------------*/
|
||||
|
||||
.fc-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-style: solid;
|
||||
border-width: 1px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fc-border-separate tbody tr.fc-first td,
|
||||
.fc-border-separate tbody tr.fc-first th {
|
||||
border-top-width: 0;
|
||||
.fc-button-inner {
|
||||
position: relative;
|
||||
float: left;
|
||||
border-style: solid;
|
||||
border-width: 0 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.fc-button-content {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 1.9em;
|
||||
line-height: 1.9em;
|
||||
padding: 0 .6em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* icon (for jquery ui) */
|
||||
|
||||
.fc-button-content .fc-icon-wrap {
|
||||
position: relative;
|
||||
float: left;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.fc-button-content .ui-icon {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-top: -50%;
|
||||
*margin-top: 0;
|
||||
*top: -50%;
|
||||
}
|
||||
|
||||
/* gloss effect */
|
||||
|
||||
.fc-state-default .fc-button-effect {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fc-state-default .fc-button-effect span {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 0;
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
border-width: 100px 0 0 1px;
|
||||
border-style: solid;
|
||||
border-color: #fff;
|
||||
background: #444;
|
||||
opacity: .09;
|
||||
filter: alpha(opacity=9);
|
||||
}
|
||||
|
||||
/* button states (determines colors) */
|
||||
|
||||
.fc-state-default,
|
||||
.fc-state-default .fc-button-inner {
|
||||
border-style: solid;
|
||||
border-color: #ccc #bbb #aaa;
|
||||
background: #F3F3F3;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.fc-state-hover,
|
||||
.fc-state-hover .fc-button-inner {
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.fc-state-down,
|
||||
.fc-state-down .fc-button-inner {
|
||||
border-color: #555;
|
||||
background: #777;
|
||||
}
|
||||
|
||||
.fc-state-active,
|
||||
.fc-state-active .fc-button-inner {
|
||||
border-color: #555;
|
||||
background: #777;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fc-state-disabled,
|
||||
.fc-state-disabled .fc-button-inner {
|
||||
color: #999;
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.fc-state-disabled .fc-button-effect {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Global Event Styles
|
||||
------------------------------------------------------------------------*/
|
||||
|
||||
.fc-event,
|
||||
.fc-agenda .fc-event-time,
|
||||
.fc-event a {
|
||||
border-style: solid;
|
||||
border-color: #36c; /* default BORDER color (probably the same as background-color) */
|
||||
.fc-event, /* TODO: change this to a fc-event-skin class (and change print.css) */
|
||||
.fc-event-inner,
|
||||
.fc-event-head {
|
||||
border-color: #36c; /* default BORDER color */
|
||||
background-color: #36c; /* default BACKGROUND color */
|
||||
color: #fff; /* default TEXT color */
|
||||
}
|
||||
|
||||
/* Use the 'className' CalEvent property and the following
|
||||
* example CSS to change event color on a per-event basis:
|
||||
*
|
||||
* .myclass,
|
||||
* .fc-agenda .myclass .fc-event-time,
|
||||
* .myclass a {
|
||||
* background-color: black;
|
||||
* border-color: black;
|
||||
* color: red;
|
||||
* }
|
||||
*/
|
||||
|
||||
.fc-event {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fc-event a {
|
||||
overflow: hidden;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
font-size: .85em;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fc-event-editable {
|
||||
.fc-rtl .fc-event {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.fc-event-inner {
|
||||
position: relative;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -72,24 +159,7 @@ table.fc-border-separate {
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
/* for fake rounded corners */
|
||||
|
||||
.fc-event a {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* right-to-left */
|
||||
|
||||
.fc-rtl .fc-event a {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* resizable */
|
||||
|
||||
.fc .ui-resizable-handle { /*** TODO: don't use ui-resizable anoymore, change class ***/
|
||||
.fc .ui-resizable-handle { /*** TODO: don't use ui-resizable anymore, change class ***/
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
@@ -107,28 +177,9 @@ table.fc-border-separate {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.fc-event-hori a {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* for fake rounded corners */
|
||||
|
||||
.fc-content .fc-corner-left {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.fc-content .fc-corner-left a {
|
||||
margin-left: -1px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.fc-content .fc-corner-right {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.fc-content .fc-corner-right a {
|
||||
margin-right: -1px;
|
||||
border-right-width: 1px;
|
||||
.fc-event-hori .fc-event-inner {
|
||||
display: block; /* might be an <a> tag */
|
||||
width: 100%; /* needed for fake rounded corners in IE6/7 */
|
||||
}
|
||||
|
||||
/* resizable */
|
||||
@@ -155,3 +206,91 @@ table.fc-border-separate {
|
||||
|
||||
|
||||
|
||||
/* Fake Rounded Corners (for buttons and events)
|
||||
------------------------------------------------------------*/
|
||||
|
||||
.fc-corner-left {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.fc-corner-left .fc-button-inner,
|
||||
.fc-corner-left .fc-event-inner {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.fc-corner-right {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.fc-corner-right .fc-button-inner,
|
||||
.fc-corner-right .fc-event-inner {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.fc-corner-top {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.fc-corner-top .fc-event-inner {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.fc-corner-bottom {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.fc-corner-bottom .fc-event-inner {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Fake Rounded Corners SPECIFICALLY FOR EVENTS
|
||||
-----------------------------------------------------------------*/
|
||||
|
||||
.fc-corner-left .fc-event-inner {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.fc-corner-right .fc-event-inner {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.fc-corner-top .fc-event-inner {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.fc-corner-bottom .fc-event-inner {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Reusable Separate-border Table
|
||||
------------------------------------------------------------*/
|
||||
|
||||
table.fc-border-separate {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.fc-border-separate th,
|
||||
.fc-border-separate td {
|
||||
border-width: 1px 0 0 1px;
|
||||
}
|
||||
|
||||
.fc-border-separate th.fc-last,
|
||||
.fc-border-separate td.fc-last {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.fc-border-separate tr.fc-last th,
|
||||
.fc-border-separate tr.fc-last td {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.fc-border-separate tbody tr.fc-first td,
|
||||
.fc-border-separate tbody tr.fc-first th {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user