2 * FullCalendar v2.3.1 Stylesheet
3 * Docs & License: http://fullcalendar.io/
17 body .fc { /* extra precedence to overcome jqui */
24 --------------------------------------------------------------------------------------------------*/
30 .fc-unthemed .fc-divider,
32 .fc-unthemed .fc-popover {
36 .fc-unthemed .fc-popover {
37 background-color: #fff;
40 .fc-unthemed .fc-divider,
41 .fc-unthemed .fc-popover .fc-header {
45 .fc-unthemed .fc-popover .fc-header .fc-close {
49 .fc-unthemed .fc-today {
53 .fc-highlight { /* when user is selecting cells */
56 filter: alpha(opacity=30); /* for IE */
59 .fc-bgevent { /* default look for background events */
60 background: rgb(143, 223, 130);
62 filter: alpha(opacity=30); /* for IE */
65 .fc-nonbusiness { /* default look for non-business-hours areas */
66 /* will inherit .fc-bgevent's styles */
71 /* Icons (inline elements with styled text that mock arrow icons)
72 --------------------------------------------------------------------------------------------------*/
75 display: inline-block;
82 font-family: "Courier New", Courier, monospace;
86 Acceptable font-family overrides for individual icons:
88 "Times New Roman", serif
90 NOTE: use percentage font sizes or else old IE chokes
95 margin: 0 -1em; /* ensures character will be centered, regardless of width */
98 .fc-icon-left-single-arrow:after {
106 .fc-icon-right-single-arrow:after {
114 .fc-icon-left-double-arrow:after {
120 .fc-icon-right-double-arrow:after {
126 .fc-icon-left-triangle:after {
133 .fc-icon-right-triangle:after {
140 .fc-icon-down-triangle:after {
153 /* Buttons (styled <button> tags, normalized to work cross-browser)
154 --------------------------------------------------------------------------------------------------*/
157 /* force height to include the border and padding */
158 -moz-box-sizing: border-box;
159 -webkit-box-sizing: border-box;
160 box-sizing: border-box;
168 font-size: 1em; /* normalize */
173 /* Firefox has an annoying inner border */
174 .fc button::-moz-focus-inner { margin: 0; padding: 0; }
176 .fc-state-default { /* non-theme */
180 .fc-state-default.fc-corner-left { /* non-theme */
181 border-top-left-radius: 4px;
182 border-bottom-left-radius: 4px;
185 .fc-state-default.fc-corner-right { /* non-theme */
186 border-top-right-radius: 4px;
187 border-bottom-right-radius: 4px;
190 /* icons in buttons */
192 .fc button .fc-icon { /* non-theme */
194 top: -0.05em; /* seems to be a good adjustment across browsers */
196 vertical-align: middle;
201 borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
205 background-color: #f5f5f5;
206 background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
207 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
208 background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
209 background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
210 background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
211 background-repeat: repeat-x;
212 border-color: #e6e6e6 #e6e6e6 #bfbfbf;
213 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
215 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
216 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
224 background-color: #e6e6e6;
229 text-decoration: none;
230 background-position: 0 -15px;
231 -webkit-transition: background-position 0.1s linear;
232 -moz-transition: background-position 0.1s linear;
233 -o-transition: background-position 0.1s linear;
234 transition: background-position 0.1s linear;
239 background-color: #cccccc;
240 background-image: none;
241 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
246 background-image: none;
248 filter: alpha(opacity=65);
254 --------------------------------------------------------------------------------------------------*/
257 display: inline-block;
261 every button that is not first in a button group should scootch over one pixel and cover the
262 previous button's border...
265 .fc .fc-button-group > * { /* extra precedence b/c buttons have margin set to zero */
270 .fc .fc-button-group > :first-child { /* same */
276 --------------------------------------------------------------------------------------------------*/
280 box-shadow: 0 2px 6px rgba(0,0,0,.15);
283 .fc-popover .fc-header { /* TODO: be more consistent with fc-head/fc-body */
287 .fc-popover .fc-header .fc-title {
291 .fc-popover .fc-header .fc-close {
295 .fc-ltr .fc-popover .fc-header .fc-title,
296 .fc-rtl .fc-popover .fc-header .fc-close {
300 .fc-rtl .fc-popover .fc-header .fc-title,
301 .fc-ltr .fc-popover .fc-header .fc-close {
307 .fc-unthemed .fc-popover {
312 .fc-unthemed .fc-popover .fc-header .fc-close {
319 .fc-popover > .ui-widget-header + .ui-widget-content {
320 border-top: 0; /* where they meet, let the header have the border */
324 /* Misc Reusable Components
325 --------------------------------------------------------------------------------------------------*/
335 padding: 0 0 2px; /* height is unreliable across browsers, so use padding */
344 .fc-bgevent-skeleton,
345 .fc-highlight-skeleton,
346 .fc-helper-skeleton {
347 /* these element should always cling to top-left/right corners */
355 bottom: 0; /* strech bg to bottom edge */
359 height: 100%; /* strech bg to bottom edge */
364 --------------------------------------------------------------------------------------------------*/
369 border-collapse: collapse;
371 font-size: 1em; /* normalize cross-browser */
387 border-style: double; /* overcome neighboring borders */
392 --------------------------------------------------------------------------------------------------*/
394 .fc .fc-row { /* extra precedence to overcome themes w/ .ui-widget-content forcing a 1px border */
395 /* no visible border by default. but make available if need be (scrollbar width compensation) */
401 /* don't put left/right border on anything within a fake row.
402 the outer tbody will worry about this */
403 border-left: 0 hidden transparent;
404 border-right: 0 hidden transparent;
406 /* no bottom borders on rows */
407 border-bottom: 0 hidden transparent;
410 .fc-row:first-child table {
411 border-top: 0 hidden transparent; /* no top border on first row */
415 /* Day Row (used within the header and the DayGrid)
416 --------------------------------------------------------------------------------------------------*/
426 /* highlighting cells & background event skeleton */
428 .fc-row .fc-bgevent-skeleton,
429 .fc-row .fc-highlight-skeleton {
430 bottom: 0; /* stretch skeleton to bottom of row */
433 .fc-row .fc-bgevent-skeleton table,
434 .fc-row .fc-highlight-skeleton table {
435 height: 100%; /* stretch skeleton to bottom of row */
438 .fc-row .fc-highlight-skeleton td,
439 .fc-row .fc-bgevent-skeleton td {
440 border-color: transparent;
443 .fc-row .fc-bgevent-skeleton {
448 .fc-row .fc-highlight-skeleton {
453 row content (which contains day/week numbers and events) as well as "helper" (which contains
454 temporary rendered events).
457 .fc-row .fc-content-skeleton {
460 padding-bottom: 2px; /* matches the space above the events */
463 .fc-row .fc-helper-skeleton {
467 .fc-row .fc-content-skeleton td,
468 .fc-row .fc-helper-skeleton td {
469 /* see-through to the background below */
470 background: none; /* in case <td>s are globally styled */
471 border-color: transparent;
473 /* don't put a border between events and/or the day number */
477 .fc-row .fc-content-skeleton tbody td, /* cells with events inside (so NOT the day number cell) */
478 .fc-row .fc-helper-skeleton tbody td {
479 /* don't put a border between event cells */
484 /* Scrolling Container
485 --------------------------------------------------------------------------------------------------*/
487 .fc-scroller { /* this class goes on elements for guaranteed vertical scrollbars */
492 .fc-scroller > * { /* we expect an immediate inner element */
493 position: relative; /* re-scope all positions */
494 width: 100%; /* hack to force re-sizing this inner element when scrollbars appear/disappear */
495 overflow: hidden; /* don't let negative margins or absolute positioning create further scroll */
499 /* Global Event Styles
500 --------------------------------------------------------------------------------------------------*/
503 position: relative; /* for resize handle and other inner positioning */
504 display: block; /* make the <a> tag block */
508 border: 1px solid #3a87ad; /* default BORDER color */
509 background-color: #3a87ad; /* default BACKGROUND color */
510 font-weight: normal; /* undo jqui's ui-widget-header bold */
513 /* overpower some of bootstrap's and jqui's styles on <a> tags */
516 .ui-widget .fc-event {
517 color: #fff; /* default TEXT color */
518 text-decoration: none; /* if <a> has an href */
522 .fc-event.fc-draggable {
523 cursor: pointer; /* give events with links and draggable events a hand mouse pointer */
526 .fc-not-allowed, /* causes a "warning" cursor. applied on body */
527 .fc-not-allowed .fc-event { /* to override an event's custom cursor */
531 .fc-event .fc-bg { /* the generic .fc-bg already does position */
535 filter: alpha(opacity=25); /* for IE */
538 .fc-event .fc-content {
543 .fc-event .fc-resizer {
550 --------------------------------------------------------------------------------------------------*/
552 /* events that are continuing to/from another week. kill rounded corners and butt up against edge */
554 .fc-ltr .fc-h-event.fc-not-start,
555 .fc-rtl .fc-h-event.fc-not-end {
557 border-left-width: 0;
558 padding-left: 1px; /* replace the border with padding */
559 border-top-left-radius: 0;
560 border-bottom-left-radius: 0;
563 .fc-ltr .fc-h-event.fc-not-end,
564 .fc-rtl .fc-h-event.fc-not-start {
566 border-right-width: 0;
567 padding-right: 1px; /* replace the border with padding */
568 border-top-right-radius: 0;
569 border-bottom-right-radius: 0;
574 .fc-h-event .fc-resizer { /* positioned it to overcome the event's borders */
583 .fc-ltr .fc-h-event .fc-start-resizer,
584 .fc-ltr .fc-h-event .fc-start-resizer:before,
585 .fc-ltr .fc-h-event .fc-start-resizer:after,
586 .fc-rtl .fc-h-event .fc-end-resizer,
587 .fc-rtl .fc-h-event .fc-end-resizer:before,
588 .fc-rtl .fc-h-event .fc-end-resizer:after {
589 right: auto; /* ignore the right and only use the left */
594 .fc-ltr .fc-h-event .fc-end-resizer,
595 .fc-ltr .fc-h-event .fc-end-resizer:before,
596 .fc-ltr .fc-h-event .fc-end-resizer:after,
597 .fc-rtl .fc-h-event .fc-start-resizer,
598 .fc-rtl .fc-h-event .fc-start-resizer:before,
599 .fc-rtl .fc-h-event .fc-start-resizer:after {
600 left: auto; /* ignore the left and only use the right */
606 ----------------------------------------------------------------------------------------------------
607 We use the full "fc-day-grid-event" class instead of using descendants because the event won't
608 be a descendant of the grid when it is being dragged.
612 margin: 1px 2px 0; /* spacing between events and edges */
617 .fc-day-grid-event .fc-content { /* force events to be one-line tall */
622 .fc-day-grid-event .fc-time {
626 .fc-day-grid-event .fc-resizer { /* enlarge the default hit area */
634 --------------------------------------------------------------------------------------------------*/
636 /* "more" link that represents hidden events */
642 text-decoration: none;
646 text-decoration: underline;
649 .fc-limited { /* rows and cells that are hidden because of a "more" link */
653 /* popover that appears when "more" link is clicked */
655 .fc-day-grid .fc-row {
656 z-index: 1; /* make the "more" popover one higher than this */
664 .fc-more-popover .fc-event-container {
669 --------------------------------------------------------------------------------------------------*/
676 .fc-toolbar .fc-left {
680 .fc-toolbar .fc-right {
684 .fc-toolbar .fc-center {
685 display: inline-block;
688 /* the things within each left/right/center section */
689 .fc .fc-toolbar > * > * { /* extra precedence to override button border margins */
694 /* the first thing within each left/center/right section */
695 .fc .fc-toolbar > * > :first-child { /* extra precedence to override button border margins */
705 /* button layering (for border precedence) */
711 .fc-toolbar .fc-state-hover,
712 .fc-toolbar .ui-state-hover {
716 .fc-toolbar .fc-state-down {
720 .fc-toolbar .fc-state-active,
721 .fc-toolbar .ui-state-active {
725 .fc-toolbar button:focus {
731 --------------------------------------------------------------------------------------------------*/
733 /* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
734 /* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
735 .fc-view-container *,
736 .fc-view-container *:before,
737 .fc-view-container *:after {
738 -webkit-box-sizing: content-box;
739 -moz-box-sizing: content-box;
740 box-sizing: content-box;
743 .fc-view, /* scope positioning and z-index's for everything within the view */
744 .fc-view > table { /* so dragged elements can be above the view's main element */
750 --------------------------------------------------------------------------------------------------*/
752 /* day row structure */
754 .fc-basicWeek-view .fc-content-skeleton,
755 .fc-basicDay-view .fc-content-skeleton {
756 /* we are sure there are no day numbers in these views, so... */
757 padding-top: 1px; /* add a pixel to make sure there are 2px padding above events */
758 padding-bottom: 1em; /* ensure a space at bottom of cell for user selecting/clicking */
761 .fc-basic-view .fc-body .fc-row {
762 min-height: 4em; /* ensure that all rows are at least this tall */
765 /* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
771 .fc-row.fc-rigid .fc-content-skeleton {
778 /* week and day number styling */
780 .fc-basic-view .fc-week-number,
781 .fc-basic-view .fc-day-number {
785 .fc-basic-view td.fc-week-number span,
786 .fc-basic-view td.fc-day-number {
791 .fc-basic-view .fc-week-number {
795 .fc-basic-view .fc-week-number span {
796 /* work around the way we do column resizing and ensure a minimum width */
797 display: inline-block;
801 .fc-ltr .fc-basic-view .fc-day-number {
805 .fc-rtl .fc-basic-view .fc-day-number {
809 .fc-day-number.fc-other-month {
811 filter: alpha(opacity=30); /* for IE */
812 /* opacity with small font can sometimes look too faded
813 might want to set the 'color' property instead
814 making day-numbers bold also fixes the problem */
817 /* AgendaView all-day area
818 --------------------------------------------------------------------------------------------------*/
820 .fc-agenda-view .fc-day-grid {
822 z-index: 2; /* so the "more.." popover will be over the time grid */
825 .fc-agenda-view .fc-day-grid .fc-row {
826 min-height: 3em; /* all-day section will never get shorter than this */
829 .fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton {
830 padding-top: 1px; /* add a pixel to make sure there are 2px padding above events */
831 padding-bottom: 1em; /* give space underneath events for clicking/selecting days */
835 /* TimeGrid axis running down the side (for both the all-day area and the slot area)
836 --------------------------------------------------------------------------------------------------*/
838 .fc .fc-axis { /* .fc to overcome default cell styles */
839 vertical-align: middle;
852 .ui-widget td.fc-axis {
853 font-weight: normal; /* overcome jqui theme making it bold */
857 /* TimeGrid Structure
858 --------------------------------------------------------------------------------------------------*/
860 .fc-time-grid-container, /* so scroll container's z-index is below all-day */
861 .fc-time-grid { /* so slats/bg/content/etc positions get scoped within here */
867 min-height: 100%; /* so if height setting is 'auto', .fc-bg stretches to fill height */
870 .fc-time-grid table { /* don't put outer borders on slats/bg/content/etc */
871 border: 0 hidden transparent;
874 .fc-time-grid > .fc-bg {
878 .fc-time-grid .fc-slats,
879 .fc-time-grid > hr { /* the <hr> AgendaView injects when grid is shorter than scroller */
884 .fc-time-grid .fc-bgevent-skeleton,
885 .fc-time-grid .fc-content-skeleton {
892 .fc-time-grid .fc-bgevent-skeleton {
896 .fc-time-grid .fc-highlight-skeleton {
900 .fc-time-grid .fc-content-skeleton {
904 .fc-time-grid .fc-helper-skeleton {
909 /* TimeGrid Slats (lines that run horizontally)
910 --------------------------------------------------------------------------------------------------*/
912 .fc-time-grid .fc-slats td {
914 border-bottom: 0; /* each cell is responsible for its top border */
917 .fc-time-grid .fc-slats .fc-minor td {
918 border-top-style: dotted;
921 .fc-time-grid .fc-slats .ui-widget-content { /* for jqui theme */
922 background: none; /* see through to fc-bg */
926 /* TimeGrid Highlighting Slots
927 --------------------------------------------------------------------------------------------------*/
929 .fc-time-grid .fc-highlight-container { /* a div within a cell within the fc-highlight-skeleton */
930 position: relative; /* scopes the left/right of the fc-highlight to be in the column */
933 .fc-time-grid .fc-highlight {
937 /* top and bottom will be in by JS */
941 /* TimeGrid Event Containment
942 --------------------------------------------------------------------------------------------------*/
944 .fc-time-grid .fc-event-container, /* a div within a cell within the fc-content-skeleton */
945 .fc-time-grid .fc-bgevent-container { /* a div within a cell within the fc-bgevent-skeleton */
949 .fc-ltr .fc-time-grid .fc-event-container { /* space on the sides of events for LTR (default) */
950 margin: 0 2.5% 0 2px;
953 .fc-rtl .fc-time-grid .fc-event-container { /* space on the sides of events for RTL */
954 margin: 0 2px 0 2.5%;
957 .fc-time-grid .fc-event,
958 .fc-time-grid .fc-bgevent {
960 z-index: 1; /* scope inner z-index's */
963 .fc-time-grid .fc-bgevent {
964 /* background events always span full width */
970 /* Generic Vertical Event
971 --------------------------------------------------------------------------------------------------*/
973 .fc-v-event.fc-not-start { /* events that are continuing from another day */
974 /* replace space made by the top border with padding */
978 /* remove top rounded corners */
979 border-top-left-radius: 0;
980 border-top-right-radius: 0;
983 .fc-v-event.fc-not-end {
984 /* replace space made by the top border with padding */
985 border-bottom-width: 0;
988 /* remove bottom rounded corners */
989 border-bottom-left-radius: 0;
990 border-bottom-right-radius: 0;
994 /* TimeGrid Event Styling
995 ----------------------------------------------------------------------------------------------------
996 We use the full "fc-time-grid-event" class instead of using descendants because the event won't
997 be a descendant of the grid when it is being dragged.
1000 .fc-time-grid-event {
1001 overflow: hidden; /* don't let the bg flow over rounded corners */
1004 .fc-time-grid-event .fc-time,
1005 .fc-time-grid-event .fc-title {
1009 .fc-time-grid-event .fc-time {
1011 white-space: nowrap;
1014 /* short mode, where time and title are on the same line */
1016 .fc-time-grid-event.fc-short .fc-content {
1017 /* don't wrap to second line (now that contents will be inline) */
1018 white-space: nowrap;
1021 .fc-time-grid-event.fc-short .fc-time,
1022 .fc-time-grid-event.fc-short .fc-title {
1023 /* put the time and title on the same line */
1024 display: inline-block;
1025 vertical-align: top;
1028 .fc-time-grid-event.fc-short .fc-time span {
1029 display: none; /* don't display the full time text... */
1032 .fc-time-grid-event.fc-short .fc-time:before {
1033 content: attr(data-start); /* ...instead, display only the start time */
1036 .fc-time-grid-event.fc-short .fc-time:after {
1037 content: "\000A0-\000A0"; /* seperate with a dash, wrapped in nbsp's */
1040 .fc-time-grid-event.fc-short .fc-title {
1041 font-size: .85em; /* make the title text the same size as the time */
1042 padding: 0; /* undo padding from above */
1047 .fc-time-grid-event .fc-resizer {
1055 font-family: monospace;
1060 .fc-time-grid-event .fc-resizer:after {