185 lines
3.0 KiB
CSS
185 lines
3.0 KiB
CSS
|
|
/* top area w/ month title and buttons */
|
|
|
|
.full-calendar-title {
|
|
text-align: left;
|
|
}
|
|
|
|
.full-calendar-buttons {
|
|
float: right;
|
|
margin: 0 0 1em;
|
|
}
|
|
|
|
.full-calendar-buttons button {
|
|
vertical-align: middle;
|
|
margin: 0 0 0 5px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.full-calendar-buttons button span {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/* To always display the "today" button:
|
|
*
|
|
* .full-calendar-buttons button.today {
|
|
* visibility: visible !important;
|
|
* }
|
|
*/
|
|
|
|
|
|
|
|
|
|
/* table layout & outer border */
|
|
|
|
.full-calendar-month-wrap {
|
|
clear: both;
|
|
border: 1px solid #ccc; /* outer border color & style */
|
|
}
|
|
|
|
.full-calendar-month {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.full-calendar-month table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* cell styling */
|
|
|
|
.full-calendar-month th,
|
|
.full-calendar-month td.day {
|
|
padding: 0;
|
|
vertical-align: top;
|
|
border-style: solid; /* inner border style */
|
|
border-color: #ccc; /* inner border color */
|
|
border-width: 1px 0 0 1px;
|
|
}
|
|
|
|
.full-calendar-month th {
|
|
border-top: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.full-calendar-month th.first,
|
|
.full-calendar-month td.first {
|
|
border-left: 0;
|
|
}
|
|
|
|
.full-calendar-month td.today {
|
|
background: #FFFFCC;
|
|
}
|
|
|
|
.full-calendar-month .day-number {
|
|
text-align: right;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.full-calendar-month .other-month .day-number {
|
|
color: #bbb;
|
|
}
|
|
|
|
.full-calendar-month .day-content {
|
|
padding: 2px 2px 0; /* distance between events and day edges */
|
|
}
|
|
|
|
/* FullCalendar automatically chooses a cell's height,
|
|
* but this can be overridden:
|
|
*
|
|
* .full-calendar-month td.day {
|
|
* height: 100px !important;
|
|
* }
|
|
*/
|
|
|
|
|
|
|
|
|
|
/* event styling */
|
|
|
|
.full-calendar-month .event {
|
|
margin-bottom: 2px;
|
|
font-size: .85em;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.full-calendar-month .ui-draggable-dragging td {
|
|
cursor: move;
|
|
}
|
|
|
|
.full-calendar-month .event td {
|
|
background: #C1D9EC;
|
|
padding: 0;
|
|
}
|
|
|
|
.full-calendar-month .event td.ne,
|
|
.full-calendar-month .event td.nw,
|
|
.full-calendar-month .event td.se,
|
|
.full-calendar-month .event td.sw {
|
|
background: none;
|
|
width: 1px; /* <-- remove if you dont want "rounded" corners */
|
|
height: 1px; /* <-- */
|
|
}
|
|
|
|
.full-calendar-month .nobg td {
|
|
background: none;
|
|
}
|
|
|
|
.full-calendar-month .event td.c {
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.full-calendar-month .event-time {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* To change the color of events on a per-class basis (such as with the
|
|
* "className" attribute of a CalEvent), do something like this:
|
|
*
|
|
* .full-calendar-month .myclass td {
|
|
* background: green;
|
|
* }
|
|
*/
|
|
|
|
|
|
|
|
|
|
/* the rectangle that covers a day when dragging an event */
|
|
|
|
.full-calendar-month .over-day {
|
|
background: #ADDBFF;
|
|
opacity: .2;
|
|
filter: alpha(opacity=20); /* for IE */
|
|
}
|
|
|
|
|
|
|
|
|
|
/* right-to-left support */
|
|
|
|
.r2l .full-calendar-title {
|
|
text-align: right;
|
|
}
|
|
|
|
.r2l .full-calendar-buttons {
|
|
float: left;
|
|
}
|
|
|
|
.r2l .full-calendar-buttons button {
|
|
margin: 0 5px 0 0;
|
|
}
|
|
|
|
.r2l .full-calendar-month .day-number {
|
|
text-align: left;
|
|
}
|
|
|
|
.r2l .full-calendar-month .event {
|
|
text-align: right;
|
|
}
|
|
|