that wraps the table */ position:relative; z-index:1; /* container inner z-index's because s can't do it */ } .fc .fc-daygrid-day.fc-day-today{background-color:rgba(255,220,40,0.15); background-color:var(--fc-today-bg-color,rgba(255,220,40,0.15)); } .fc .fc-daygrid-day-frame{position:relative; min-height:100%; /* seems to work better than `height` because sets height after rows/cells naturally do it */ } .fc{ /* cell top */ } .fc .fc-daygrid-day-top{display:flex; flex-direction:row-reverse; } .fc .fc-day-other .fc-daygrid-day-top{opacity:0.3; } .fc{ /* day number (within cell top) */ } .fc .fc-daygrid-day-number{position:relative; z-index:4; padding:4px; } .fc{ /* event container */ } .fc .fc-daygrid-day-events{margin-top:1px; /* needs to be margin,not padding,so that available cell height can be computed */ } .fc{ /* positioning for balanced vs natural */ } .fc .fc-daygrid-body-balanced .fc-daygrid-day-events{position:absolute; left:0; right:0; } .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{position:relative; /* for containing abs positioned event harnesses */ min-height:2em; /* in addition to being a min-height during natural height,equalizes the heights a little bit */ } .fc .fc-daygrid-body-natural{ /* can coexist with -unbalanced */ } .fc .fc-daygrid-body-natural .fc-daygrid-day-events{margin-bottom:1em; } .fc{ /* event harness */ } .fc .fc-daygrid-event-harness{position:relative; } .fc .fc-daygrid-event-harness-abs{position:absolute; top:0; /* fallback coords for when cannot yet be computed */ left:0; /* */ right:0; /* */ } .fc .fc-daygrid-bg-harness{position:absolute; top:0; bottom:0; } .fc{ /* bg content */ } .fc .fc-daygrid-day-bg .fc-non-business{z-index:1 } .fc .fc-daygrid-day-bg .fc-bg-event{z-index:2 } .fc .fc-daygrid-day-bg .fc-highlight{z-index:3 } .fc{ /* events */ } .fc .fc-daygrid-event{z-index:6; margin-top:1px; } .fc .fc-daygrid-event.fc-event-mirror{z-index:7; } .fc{ /* cell bottom (within day-events) */ } .fc .fc-daygrid-day-bottom{font-size:.85em; margin:2px 3px 0; } .fc .fc-daygrid-more-link{position:relative; z-index:4; cursor:pointer; } .fc{ /* week number (within frame) */ } .fc .fc-daygrid-week-number{position:absolute; z-index:5; top:0; padding:2px; min-width:1.5em; text-align:center; background-color:rgba(208,208,208,0.3); background-color:var(--fc-neutral-bg-color,rgba(208,208,208,0.3)); color:#808080; color:var(--fc-neutral-text-color,#808080); } .fc{ /* popover */ } .fc .fc-more-popover{z-index:8; } .fc .fc-more-popover .fc-popover-body{min-width:220px; padding:10px; } .fc-direction-ltr .fc-daygrid-event.fc-event-start, .fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px;} .fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px;} .fc-direction-ltr .fc-daygrid-week-number{left:0; border-radius:0 0 3px 0; } .fc-direction-rtl .fc-daygrid-week-number{right:0; border-radius:0 0 0 3px; } .fc-liquid-hack .fc-daygrid-day-frame{position:static; /* will cause inner absolute stuff to expand to */ } .fc-daygrid-event{ /* make root-level,because will be dragged-and-dropped outside of a component root */ position:relative; /* for z-indexes assigned later */ white-space:nowrap; border-radius:3px; /* dot event needs this to when selected */ font-size:.85em; font-size:var(--fc-small-font-size,.85em);} /* --- the rectangle ("block") style of event --- */ .fc-daygrid-block-event .fc-event-time{font-weight:bold; } .fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px; } /* --- the dot style of event --- */ .fc-daygrid-dot-event{display:flex; align-items:center; padding:2px 0} .fc-daygrid-dot-event .fc-event-title{flex-grow:1; flex-shrink:1; min-width:0; /* important for allowing to shrink all the way */ overflow:hidden; font-weight:bold; } .fc-daygrid-dot-event:hover,.fc-daygrid-dot-event.fc-event-mirror{background:rgba(0,0,0,0.1); } .fc-daygrid-dot-event.fc-event-selected:before{ /* expand hit area */ top:-10px; bottom:-10px; } .fc-daygrid-event-dot{ /* the actual dot */ margin:0 4px; box-sizing:content-box; width:0; height:0; border:4px solid #3788d8; border:calc(var(--fc-daygrid-event-dot-width,8px) / 2) solid var(--fc-event-border-color,#3788d8); border-radius:4px; border-radius:calc(var(--fc-daygrid-event-dot-width,8px) / 2);} /* --- spacing between time and title --- */ .fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px; } .fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px; } /*A VERTICAL event*/ .fc-v-event{ /* allowed to be top-level */ display:block; border:1px solid #3788d8; border:1px solid var(--fc-event-border-color,#3788d8); background-color:#3788d8; background-color:var(--fc-event-bg-color,#3788d8)} .fc-v-event .fc-event-main{color:#fff; color:var(--fc-event-text-color,#fff); height:100%; } .fc-v-event .fc-event-main-frame{height:100%; display:flex; flex-direction:column; } .fc-v-event .fc-event-time{flex-grow:0; flex-shrink:0; max-height:100%; overflow:hidden; } .fc-v-event .fc-event-title-container{ /* a container for the sticky cushion */ flex-grow:1; flex-shrink:1; min-height:0; /* important for allowing to shrink all the way */ } .fc-v-event .fc-event-title{ /* will have fc-sticky on it */ top:0; bottom:0; max-height:100%; /* clip overflow */ overflow:hidden; } .fc-v-event:not(.fc-event-start){border-top-width:0; border-top-left-radius:0; border-top-right-radius:0; } .fc-v-event:not(.fc-event-end){border-bottom-width:0; border-bottom-left-radius:0; border-bottom-right-radius:0; } .fc-v-event.fc-event-selected:before{ /* expand hit area */ left:-10px; right:-10px; } .fc-v-event{ /* resizer (mouse AND touch) */ } .fc-v-event .fc-event-resizer-start{cursor:n-resize; } .fc-v-event .fc-event-resizer-end{cursor:s-resize; } .fc-v-event{ /* resizer for MOUSE */ } .fc-v-event:not(.fc-event-selected) .fc-event-resizer{height:8px; height:var(--fc-event-resizer-thickness,8px); left:0; right:0; } .fc-v-event:not(.fc-event-selected) .fc-event-resizer-start{top:-4px; top:calc(var(--fc-event-resizer-thickness,8px) / -2); } .fc-v-event:not(.fc-event-selected) .fc-event-resizer-end{bottom:-4px; bottom:calc(var(--fc-event-resizer-thickness,8px) / -2); } .fc-v-event{ /* resizer for TOUCH (when event is "selected") */ } .fc-v-event.fc-event-selected .fc-event-resizer{left:50%; margin-left:-4px; margin-left:calc(var(--fc-event-resizer-dot-total-width,8px) / -2); } .fc-v-event.fc-event-selected .fc-event-resizer-start{top:-4px; top:calc(var(--fc-event-resizer-dot-total-width,8px) / -2); } .fc-v-event.fc-event-selected .fc-event-resizer-end{bottom:-4px; bottom:calc(var(--fc-event-resizer-dot-total-width,8px) / -2); } .fc .fc-timegrid .fc-daygrid-body{ /* the all-day daygrid within the timegrid view */ z-index:2; /* put above the timegrid-body so that more-popover is above everything. TODO:better solution */ } .fc .fc-timegrid-divider{padding:0 0 2px; /* browsers get confused when you set height. use padding instead */ } .fc .fc-timegrid-body{position:relative; z-index:1; /* scope the z-indexes of slots and cols */ min-height:100%; /* fill height always,even when slat table doesn't grow */ } .fc .fc-timegrid-axis-chunk{ /* for advanced ScrollGrid */ position:relative /* offset parent for now-indicator-container */ } .fc .fc-timegrid-axis-chunk > table{position:relative; z-index:1; /* above the now-indicator-container */ } .fc .fc-timegrid-slots{position:relative; z-index:1; } .fc .fc-timegrid-slot{ /* a */ height:1.5em; border-bottom:0 /* each cell owns its top border */ } .fc .fc-timegrid-slot:empty:before{content:'\00a0'; /* make sure there's at least an empty space to create height for height syncing */ } .fc .fc-timegrid-slot-minor{border-top-style:dotted; } .fc .fc-timegrid-slot-label-cushion{display:inline-block; white-space:nowrap; } .fc .fc-timegrid-slot-label{vertical-align:middle; /* vertical align the slots */ } .fc{ /* slots AND axis cells (top-left corner of view including the "all-day" text) */ } .fc .fc-timegrid-axis-cushion,.fc .fc-timegrid-slot-label-cushion{padding:0 4px; } .fc{ /* axis cells (top-left corner of view including the "all-day" text) */ /* vertical align is more complicated,uses flexbox */ } .fc .fc-timegrid-axis-frame-liquid{height:100%; /* will need liquid-hack in FF */ } .fc .fc-timegrid-axis-frame{overflow:hidden; display:flex; align-items:center; /* vertical align */ justify-content:flex-end; /* horizontal align. matches text-align below */ } .fc .fc-timegrid-axis-cushion{max-width:60px; /* limits the width of the "all-day" text */ flex-shrink:0; /* allows text to expand how it normally would,regardless of constrained width */ } .fc-direction-ltr .fc-timegrid-slot-label-frame{text-align:right; } .fc-direction-rtl .fc-timegrid-slot-label-frame{text-align:left; } .fc-liquid-hack .fc-timegrid-axis-frame-liquid{height:auto; position:absolute; top:0; right:0; bottom:0; left:0; } .fc .fc-timegrid-col.fc-day-today{background-color:rgba(255,220,40,0.15); background-color:var(--fc-today-bg-color,rgba(255,220,40,0.15)); } .fc .fc-timegrid-col-frame{min-height:100%; /* liquid-hack is below */ position:relative; } .fc-liquid-hack .fc-timegrid-col-frame{height:auto; position:absolute; top:0; right:0; bottom:0; left:0; } .fc-media-screen .fc-timegrid-cols{position:absolute; /* no z-index. children will decide and go above slots */ top:0; left:0; right:0; bottom:0 } .fc-media-screen .fc-timegrid-cols > table{height:100%; } .fc-media-screen .fc-timegrid-col-bg,.fc-media-screen .fc-timegrid-col-events,.fc-media-screen .fc-timegrid-now-indicator-container{position:absolute; top:0; left:0; right:0; } .fc-media-screen .fc-timegrid-event-harness{position:absolute; /* top/left/right/bottom will all be set by JS */ } .fc{ /* bg */ } .fc .fc-timegrid-col-bg{z-index:2; /* TODO:kill */ } .fc .fc-timegrid-col-bg .fc-non-business{z-index:1 } .fc .fc-timegrid-col-bg .fc-bg-event{z-index:2 } .fc .fc-timegrid-col-bg .fc-highlight{z-index:3 } .fc .fc-timegrid-bg-harness{position:absolute; /* top/bottom will be set by JS */ left:0; right:0; } .fc{ /* fg events */ /* (the mirror segs are put into a separate container with same classname,*/ /* and they must be after the normal seg container to appear at a higher z-index) */ } .fc .fc-timegrid-col-events{z-index:3; /* child event segs have z-indexes that are scoped within this div */ } .fc{ /* now indicator */ } .fc .fc-timegrid-now-indicator-container{bottom:0; overflow:hidden; /* don't let overflow of lines/arrows cause unnecessary scrolling */ /* z-index is set on the individual elements */ } .fc-direction-ltr .fc-timegrid-col-events{margin:0 2.5% 0 2px; } .fc-direction-rtl .fc-timegrid-col-events{margin:0 2px 0 2.5%; } .fc-timegrid-event-harness-inset .fc-timegrid-event, .fc-timegrid-event.fc-event-mirror{box-shadow:0px 0px 0px 1px #fff; box-shadow:0px 0px 0px 1px var(--fc-page-bg-color,#fff);} .fc-timegrid-event{ /* events need to be root */ font-size:.85em; font-size:var(--fc-small-font-size,.85em); border-radius:3px} .fc-timegrid-event .fc-event-main{padding:1px 1px 0; } .fc-timegrid-event .fc-event-time{white-space:nowrap; font-size:.85em; font-size:var(--fc-small-font-size,.85em); margin-bottom:1px; } .fc-timegrid-event-condensed .fc-event-main-frame{flex-direction:row; overflow:hidden; } .fc-timegrid-event-condensed .fc-event-time:after{content:'\00a0-\00a0'; /* dash surrounded by non-breaking spaces */ } .fc-timegrid-event-condensed .fc-event-title{font-size:.85em; font-size:var(--fc-small-font-size,.85em) } .fc-media-screen .fc-timegrid-event{position:absolute; /* absolute WITHIN the harness */ top:0; bottom:1px; /* stay away from bottom slot line */ left:0; right:0; } .fc{ /* line */ } .fc .fc-timegrid-now-indicator-line{position:absolute; z-index:4; left:0; right:0; border-style:solid; border-color:red; border-color:var(--fc-now-indicator-color,red); border-width:1px 0 0; } .fc{ /* arrow */ } .fc .fc-timegrid-now-indicator-arrow{position:absolute; z-index:4; margin-top:-5px; /* vertically center on top coordinate */ border-style:solid; border-color:red; border-color:var(--fc-now-indicator-color,red); } .fc-direction-ltr .fc-timegrid-now-indicator-arrow{left:0; /* triangle pointing right. TODO:mixin */ border-width:5px 0 5px 6px; border-top-color:transparent; border-bottom-color:transparent; } .fc-direction-rtl .fc-timegrid-now-indicator-arrow{right:0; /* triangle pointing left. TODO:mixin */ border-width:5px 6px 5px 0; border-top-color:transparent; border-bottom-color:transparent; } :root{--fc-list-event-dot-width:10px; --fc-list-event-hover-bg-color:#f5f5f5;} .fc-theme-standard .fc-list{border:1px solid #ddd; border:1px solid var(--fc-border-color,#ddd); } .fc{ /* message when no events */ } .fc .fc-list-empty{background-color:rgba(208,208,208,0.3); background-color:var(--fc-neutral-bg-color,rgba(208,208,208,0.3)); height:100%; display:flex; justify-content:center; align-items:center; /* vertically aligns fc-list-empty-inner */ } .fc .fc-list-empty-cushion{margin:5em 0; } .fc{ /* table within the scroller */ /* ---------------------------------------------------------------------------------------------------- */ } .fc .fc-list-table{width:100%; border-style:hidden; /* kill outer border on theme */ } .fc .fc-list-table tr > *{border-left:0; border-right:0; } .fc .fc-list-sticky .fc-list-day > *{ /* the cells */ position:-webkit-sticky; position:sticky; top:0; background:#fff; background:var(--fc-page-bg-color,#fff); /* for when headers are styled to be transparent and sticky */ } .fc .fc-list-table th{padding:0; /* uses an inner-wrapper instead... */ } .fc .fc-list-table td,.fc .fc-list-day-cushion{padding:8px 14px; } .fc{ /* date heading rows */ /* ---------------------------------------------------------------------------------------------------- */ } .fc .fc-list-day-cushion:after{content:""; clear:both; display:table; /* clear floating */ } .fc-theme-standard .fc-list-day-cushion{background-color:rgba(208,208,208,0.3); background-color:var(--fc-neutral-bg-color,rgba(208,208,208,0.3)); } .fc-direction-ltr .fc-list-day-text, .fc-direction-rtl .fc-list-day-side-text{float:left;} .fc-direction-ltr .fc-list-day-side-text, .fc-direction-rtl .fc-list-day-text{float:right;} /* make the dot closer to the event title */ .fc-direction-ltr .fc-list-table .fc-list-event-graphic{padding-right:0 } .fc-direction-rtl .fc-list-table .fc-list-event-graphic{padding-left:0 } .fc .fc-list-event.fc-event-forced-url{cursor:pointer; /* whole row will seem clickable */ } .fc .fc-list-event:hover td{background-color:#f5f5f5; background-color:var(--fc-list-event-hover-bg-color,#f5f5f5); } .fc{ /* shrink certain cols */ } .fc .fc-list-event-graphic,.fc .fc-list-event-time{white-space:nowrap; width:1px; } .fc .fc-list-event-dot{display:inline-block; box-sizing:content-box; width:0; height:0; border:5px solid #3788d8; border:calc(var(--fc-list-event-dot-width,10px) / 2) solid var(--fc-event-border-color,#3788d8); border-radius:5px; border-radius:calc(var(--fc-list-event-dot-width,10px) / 2); } .fc{ /* reset styling */ } .fc .fc-list-event-title a{color:inherit; text-decoration:none; } .fc{ /* underline link when hovering over any part of row */ } .fc .fc-list-event.fc-event-forced-url:hover a{text-decoration:underline; } .fc-theme-bootstrap a:not([href]){color:inherit; /* natural color for navlinks */ }