that wraps the table */ position: relative; z-index: 1; /* container inner z-index's because s can't do it */ } /* cell inner-wrappers */ .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-daygrid-day-frame:before { content: ""; clear: both; display: table; /* clear top-margin of event-container when first child */ } .fc-liquid-hack .fc-daygrid-day-frame { position: static; /* will cause inner absolute stuff to expand to */ } /* positioning for balanced vs natural */ .fc-daygrid-body-balanced .fc-daygrid-day-events { position: absolute; left: 0; right: 0; } .fc-daygrid-body-unbalanced .fc-daygrid-day-events { position: relative; /* for containing abs positioned event harnesses */ min-height: 3em; } /* in addition to being a min-height during natural height, equalizes the heights a little bit */ .fc-daygrid-body-unbalanced .fc-daygrid-day-events:before { content: ""; clear: both; display: table; /* clear top-margin of event harnesses */ } /* can coexist with -unbalanced */ .fc-daygrid-body-natural .fc-daygrid-day-events { padding-bottom: 1em; } /* cell top */ .fc-daygrid-day-top { position: relative; z-index: 4; } .fc-daygrid-day-top:after { content: ""; clear: both; display: table; } .fc-day-other .fc-daygrid-day-top { opacity: 0.3; } /* day number (within cell top) */ .fc-daygrid-day-number { padding: 4px; /* TODO: variable */ } .fc-direction-ltr .fc-daygrid-day-number { float: right; } .fc-direction-rtl .fc-daygrid-day-number { float: left; } /* fg events */ .fc-daygrid-day-events { margin-left: 2px; margin-right: 2px; } .fc-daygrid-day-events:first-child { /* only add top margin if no fc-daygrid-day-top */ margin-top: 2px; } /* fg event harness */ .fc-daygrid-event-harness:before { content: ""; clear: both; display: table; /* for when event element has top margin */ } .fc-daygrid-event-harness:after { content: ""; clear: both; display: table; /* for when event element has bottom margin */ } .fc-daygrid-event-harness-abs { position: absolute; top: 0; /* fallback */ left: 0; /* fallback */ right: 0; /* fallback */ } .fc-daygrid-event:not(.fc-event-mirror) { /* TODO: should be in daygrid-event file? needs var */ z-index: 6; /* is already position:relative */ } /* cell bottom (within day-events) */ .fc-daygrid-day-bottom { position: relative; z-index: 4; font-size: .85em; margin: 2px 3px 0; } .fc-daygrid-more-link { cursor: pointer; } /* bg content (within frame) */ .fc-daygrid-day-bg .fc-non-business { z-index: 1 } .fc-daygrid-day-bg .fc-bg-event { z-index: 2 } .fc-daygrid-day-bg .fc-highlight { z-index: 3 } .fc-daygrid-bg-harness { position: absolute; top: 0; bottom: 0; } /* week number (within frame) */ /* TODO: maybe we should move it within day-top */ .fc-daygrid-week-number { position: absolute; z-index: 5; top: 0; padding: 2px; min-width: 1.5em; text-align: center; background-color: #f2f2f2; /* TODO: var */ color: #808080; /* TODO: var */ } .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; } /* popover */ .fc-daygrid .fc-popover { z-index: 7; } .fc-more-popover .fc-popover-body { padding: 10px !important; /* OVERCOME BOOTSTRAP */ min-width: 220px; } .fc-daygrid-event { position: relative; white-space: nowrap; margin: 1px 0; /* spacing between events */ border-radius: 3px; /* dot event needs this to when selected */ /* TODO: vars */ font-size: .85em; } .fc-daygrid-event .fc-event-time, .fc-daygrid-event .fc-event-title { display: inline; } /* spacing between time and title */ .fc-direction-ltr .fc-daygrid-event .fc-event-time { margin-right: 3px; /* TODO: var */ } .fc-direction-rtl .fc-daygrid-event .fc-event-time { margin-left: 3px; /* TODO: var */ } /* --- the rectangle ("block") style of event --- */ .fc-daygrid-block-event { border: 1px solid #3788d8; /* TODO: var */ background-color: #3788d8; } /* TODO: var */ .fc-daygrid-block-event .fc-event-main { color: #fff; /* better to be within the tag, for theme. TODO: var */ padding: 1px; overflow: hidden; } .fc-daygrid-block-event .fc-event-time { font-weight: bold; } /* kill radius when event continues into future/past */ .fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start), .fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end), .fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* --- the dot style of event --- */ /* (time and title are already display:inline b/c they're spans) */ .fc-daygrid-dot-event { overflow: hidden; padding: 2px 0; } .fc-daygrid-dot-event .fc-event-title { font-weight: bold; } .fc-daygrid-dot-event:hover, .fc-daygrid-dot-event.fc-event-mirror { background: rgba(0, 0, 0, .1); } .fc-daygrid-event-dot { /* the actual dot */ display: inline-block; margin: 0 4px; width: 8px; height: 8px; border-radius: 50%; background: #3788d8; /* TODO: var */ } /* rename to thickness */ /* A VERTICAL event */ .fc-v-event .fc-event-main { position: relative; /* specifically for the z-index */ z-index: 2; } /* resizer (mouse AND touch) */ .fc-v-event .fc-event-resizer { position: absolute; z-index: 3; } .fc-v-event .fc-event-resizer-start { cursor: n-resize; } .fc-v-event .fc-event-resizer-end { cursor: s-resize; } /* resizer for MOUSE */ .fc-v-event.fc-event-resizable-mouse .fc-event-resizer { height: 8px; left: -1px; /* overcome border */ right: -1px; /* overcome border */ } .fc-v-event.fc-event-resizable-mouse .fc-event-resizer-start { top: -4px; } .fc-v-event.fc-event-resizable-mouse .fc-event-resizer-end { bottom: -4px; } /* resizer for TOUCH (when event is "selected") */ .fc-v-event.fc-event-selected .fc-event-resizer { border-radius: 4px; border-width: 1px; width: 8px; height: 8px; border-style: solid; border-color: inherit; background: #fff; left: 50%; margin-left: -4px; } .fc-v-event.fc-event-selected .fc-event-resizer-start { top: -4px; } .fc-v-event.fc-event-selected .fc-event-resizer-end { bottom: -4px; } /* expand touch area for TOUCH (when event is "selected") */ .fc-v-event.fc-event-selected:before { left: -10px; right: -10px; } .fc .fc-timegrid-divider { /* OVERCOME RESET */ padding: 0 0 2px; /* browsers get confused when you set height. use padding instead */ } .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-timegrid-slots { position: relative; z-index: 2; } .fc-timegrid-slot { /* a */ height: 1.5em; border-bottom: 0 !important; /* each cell owns its top border so it can change to dotted */ } .fc-timegrid-slot-minor { border-top-style: dotted !important; /* OVERCOME THEME */ } .fc-timegrid-slot-label-cushion { white-space: nowrap; } .fc .fc-timegrid-slot-label { /* OVERCOME RESET */ vertical-align: middle; /* vertical align the slots */ } /* slots AND axis cells (top-left corner of view including the "all-day" text) */ .fc-direction-ltr .fc-timegrid-axis-frame, .fc-direction-ltr .fc-timegrid-slot-label-frame { text-align: right; } .fc-direction-rtl .fc-timegrid-axis-frame, .fc-direction-rtl .fc-timegrid-slot-label-frame { text-align: left; } .fc-timegrid-axis-cushion, .fc-timegrid-slot-label-cushion { padding: 0 4px; } /* axis cells (top-left corner of view including the "all-day" text) */ /* vertical align is more complicated, uses flexbox */ .fc-timegrid-axis-frame-liquid { height: 100%; /* will need liquid-hack in FF */ } .fc-liquid-hack .fc-timegrid-axis-frame-liquid { height: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .fc-timegrid-axis-frame { overflow: hidden; display: flex; align-items: center; /* vertical align */ justify-content: flex-end; /* horizontal align. matches text-align */ } .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-timegrid-cols { /* prevents now indicator arrow from bleeding out and causing more scrolling */ /* bad if we want to do sticky-titles on events in timegrid */ /* TODO: move now indicator arrow into own container, that does its own overflow */ overflow: hidden; } .fc-timegrid-cols>table{ background-color:#00bb44; } .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% !important; } .fc-media-screen .fc-timegrid-event-harness { position: absolute; /* top/left/right/bottom will all be set by JS */ } .fc-timegrid-col-origin { /* TODO: rename to frame? */ position: relative; /* why do we need this now? */ } /* fg events */ .fc-timegrid-col-events { position: relative; z-index: 3; } .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%; } /* bg */ .fc-timegrid-col-bg { position: relative; z-index: 1; } .fc-timegrid-col-bg .fc-non-business { z-index: 1 } .fc-timegrid-col-bg .fc-bg-event { z-index: 2 } .fc-timegrid-col-bg .fc-highlight { z-index: 3 } .fc-timegrid-bg-harness { position: absolute; /* top/bottom will be set by JS */ left: 0; right: 0; } /* harness */ .fc-timegrid-event-harness-inset .fc-timegrid-event, .fc-timegrid-event.fc-event-mirror { box-shadow: 0px 0px 0px 1px #fff; /* TODO: var */ } /* root */ .fc-timegrid-event { /* TODO: vars */ font-size: .85em; border-radius: 3px; border: 1px solid #3788d8; background-color: #3788d8; } .fc-timegrid-event .fc-event-main { color: #fff; /* better to be within the tag, for theme. TODO: var */ max-height: 100%; overflow: hidden; padding: 1px 1px 0; } .fc-media-screen .fc-timegrid-event { position: absolute; top: 0; bottom: 1px; /* stay away from bottom slot line */ left: 0; right: 0; } /* kill radius/padding when event continues into future/past */ .fc-timegrid-event:not(.fc-event-start) { /* replace space made by the top border with padding */ border-top-width: 0; padding-top: 1px; /* remove top rounded corners */ border-top-left-radius: 0; border-top-right-radius: 0; } .fc-timegrid-event:not(.fc-event-end) { /* replace space made by the top border with padding */ border-bottom-width: 0; padding-bottom: 1px; /* remove bottom rounded corners */ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* time header */ .fc-timegrid-event .fc-event-time { white-space: nowrap; font-size: .85em; margin-bottom: 1px; } /* line */ .fc-timegrid-now-indicator-line { position: absolute; z-index: 4; left: 0; right: 0; border-style: solid; border-color: red; border-width: 1px 0 0; } /* arrow */ .fc-timegrid-now-indicator-arrow { position: absolute; z-index: 4; margin-top: -5px; /* vertically center on top coordinate */ border-style: solid; border-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; } /* rename to thickness */ /* the view wrapper */ /* ---------------------------------------------------------------------------------------------------- */ .fc-theme-standard .fc-list { border: 1px solid #ddd; border: 1px solid var(--fc-theme-standard-border-color, #ddd); } /* table within the scroller */ /* ---------------------------------------------------------------------------------------------------- */ .fc-list-table { width: 100%; border-collapse: separate; border-style: hidden !important; } /* kill outer border on theme. OVERCOME BOOTSTRAP */ .fc-list-table tr > * { border-left: 0 !important; /* OVERCOME BOOTSTRAP */ border-right: 0 !important; /* OVERCOME BOOTSTRAP */ border-top: 0 !important; /* OVERCOME BOOTSTRAP */ } .fc-list-table tr:last-child > * { border-bottom: 0 !important; /* OVERCOME BOOTSTRAP */ } .fc-list-sticky .fc-list-day > * { position: sticky; /* TODO: browser prefix? */ z-index: 2; /* TODO: var */ top: 0; } .fc-list-table th { background: #fff; /* for when headers are styled to be transparent and sticky. TODO: var */ padding: 0; /* uses an inner-wrapper instead... */ } .fc-list-table td, .fc-list-day-frame { padding: 8px 14px; } /* date heading rows */ /* ---------------------------------------------------------------------------------------------------- */ .fc-list-day-frame:after { content: ""; clear: both; display: table; /* clear floating */ } .fc-theme-standard .fc-list-day-frame { background: #eee; background: var(--fc-theme-standard-muted-bg-color, #eee); } .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; } /* event rows */ /* ---------------------------------------------------------------------------------------------------- */ .fc-list-event.fc-event-forced-url { cursor: pointer; /* whole row will seem clickable */ } .fc-theme-standard .fc-list-event:hover td { background-color: #f5f5f5; } /* shrink certain cols */ .fc-list-event-graphic, .fc-list-event-time { white-space: nowrap; width: 1px; } .fc-list-event-dot { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #3788d8; /* TODO: var */ } /* make the dot closer to the event title */ .fc-direction-ltr .fc-list-event-graphic { padding-right: 0 } .fc-direction-rtl .fc-list-event-graphic { padding-left: 0 } /* reset styling */ .fc-list-event-title a { color: inherit; text-decoration: none; } /* underline link when hovering over any part of row */ .fc-list-event.fc-event-forced-url:hover a { text-decoration: underline; } /* message when no events */ .fc-list-empty { background-color: #eee; height: 100%; display: flex; justify-content: center; align-items: center; /* vertically aligns fc-list-empty-inner */ } .fc-list-empty-cushion { margin: 5em 0; } .fc.fc-theme-bootstrap a { text-decoration: none; } .fc.fc-theme-bootstrap a[data-navlink]:hover { text-decoration: underline; } .fc-theme-bootstrap .fc-day-today.alert { border-radius: 0; } .fc-theme-bootstrap .table { margin-bottom: 0; } .fc-theme-bootstrap .fc-popover.card { position: absolute; /* because .card sets it to position:relative */ } .fc .fc-bootstrap-bordered { background: transparent; /* some themes provide background. undo */ border-radius: 0; /* some themes provide border-radius. undo */ } /* Popover --------------------------------------------------------------------------------------------------*/ .fc-theme-bootstrap .fc-popover .card-body { padding: 0; /* undo built-in padding */ } /* TimeGrid Slots (lines that run horizontally) --------------------------------------------------------------------------------------------------*/ .fc-theme-bootstrap .fc-timegrid-slots table { /* some themes have background color. see through to slats */ background: none; } .fc.fc-media-print { display: block; /* undo flexbox. FF doesn't know how to flow */ max-width: 100%; /* width will be hardcoded too */ } .fc-event, .fc-scrollgrid table tr { break-inside: avoid; } .fc-media-print .fc-timegrid-slots, .fc-media-print .fc-timegrid-slot-labels, .fc-media-print .fc-timeline-slots { display: none; } .fc-media-print .fc-timegrid-event { margin: 0.5em 0; } /* rename to thickness */ .fc-timeline-body { min-height: 100%; position: relative; z-index: 1; /* scope slots, bg, etc */ } /* vertical slots in both the header AND the body */ .fc-timeline-slots { position: absolute; z-index: 1; top: 0; bottom: 0; } .fc-timeline-slots > table { height: 100%; } /* border for both header AND body cells */ .fc .fc-timeline-slot-minor { /* OVERCOME RESET */ border-style: dotted; } /* only owns one side, so can do dotted */ .fc-direction-ltr .fc-timeline-slot { border-right: 0 !important } .fc-direction-rtl .fc-timeline-slot { border-left: 0 !important } /* header cells (aka "label") */ .fc-timeline-slot-frame { display: flex; align-items: center; /* vertical align */ justify-content: center; /* horizontal align */ } /* a row of times */ .fc-timeline-header-row-chrono .fc-timeline-slot-frame { justify-content: flex-start; /* horizontal align left or right */ } .fc-timeline-slot-cushion { padding: 4px 5px; /* TODO: unify with fc-col-header? */ } /* NOTE: how does the top row of cells get horizontally centered? */ /* for the non-chrono-row, the fc-sticky system looks for text-align center, */ /* and it's a fluke that the default browser stylesheet already does this for */ /* TODO: have StickyScrolling look at natural left coord to detect centeredness. */ .fc-timeline-now-indicator-arrow, .fc-timeline-now-indicator-line { position: absolute; z-index: 4; top: 0; border-style: solid; border-color: red; } .fc-timeline-now-indicator-arrow { margin: 0 -6px; /* 5, then one more to counteract scroller's negative margins */ /* triangle pointing down. TODO: mixin */ border-width: 6px 5px 0 5px; border-left-color: transparent; border-right-color: transparent; } .fc-timeline-now-indicator-line { margin: 0 -1px; /* counteract scroller's negative margins */ bottom: 0; border-width: 0 0 0 1px; } /* container */ .fc-timeline-events { position: relative; z-index: 3; width: 0; /* for event positioning. will end up on correct side based on dir */ } /* harness */ .fc-timeline-event-harness { position: absolute; top: 0; /* default when not specified */ /* JS will set tht left/right */ } /* root */ /* ---------------------------------------------------------------------------------------------------- */ .fc-timeline-event { position: relative; /* contains things. TODO: make part of fc-h-event and fc-v-event */ border-radius: 0; padding: 2px 1px; margin-bottom: 1px; /* TODO: make vars */ font-size: .85em; border: 1px solid #3788d8; background-color: #3788d8; } .fc-timeline-event .fc-event-main { color: #fff; /* better to be within the tag, for theme. TODO: var */ } /* move 1px away from slot line */ .fc-direction-ltr .fc-timeline-event { margin-right: 1px } .fc-direction-rtl .fc-timeline-event { margin-left: 1px } /* make event beefier when overlap not allowed */ .fc-timeline-overlap-disabled .fc-timeline-event { padding-top: 5px; padding-bottom: 5px; margin-bottom: 0; } /* time and title spacing */ /* ---------------------------------------------------------------------------------------------------- */ .fc-timeline-event .fc-event-main { display: flex; } .fc-timeline-event .fc-event-title { flex-grow: 1; flex-shrink: 1; min-width: 0; /* important for allowing to shrink all the way */ } .fc-timeline-event .fc-event-time { font-weight: bold; } .fc-timeline-event .fc-event-time, .fc-timeline-event-title-cushion { white-space: nowrap; padding: 0 2px; } .fc-timeline-event-title-cushion { /* sticky within fc-event-title container */ display: inline-block; /* need this to be sticky cross-browser */ left: 0; /* for sticky */ right: 0; /* for sticky */ vertical-align: top; /* need this for not affecting line-height */ padding: 0 2px; /* clip overflow on this element */ max-width: 100%; overflow: hidden; } /* arrows indicating the event continues into past/future */ /* ---------------------------------------------------------------------------------------------------- */ /* part of the flexbox flow */ .fc-timeline-event:not(.fc-event-start) .fc-event-main:before, .fc-timeline-event:not(.fc-event-end) .fc-event-main:after { content: ""; align-self: center; opacity: .5; /* triangle. TODO: mixin */ width: 0; height: 0; margin: 0 1px; border: 5px solid #000; border-top-color: transparent; border-bottom-color: transparent; } /* pointing left */ .fc-direction-ltr .fc-timeline-event:not(.fc-event-start) .fc-event-main:before, .fc-direction-rtl .fc-timeline-event:not(.fc-event-end) .fc-event-main:after { border-left: 0; } /* pointing right */ .fc-direction-ltr .fc-timeline-event:not(.fc-event-end) .fc-event-main:after, .fc-direction-rtl .fc-timeline-event:not(.fc-event-start) .fc-event-main:before { border-right: 0; } .fc-timeline-bg { /* a container for bg content */ position: absolute; z-index: 2; top: 0; bottom: 0; width: 0; left: 0; /* will take precedence when LTR */ right: 0; } /* will take precedence when RTL */ .fc-timeline-bg .fc-non-business { z-index: 1 } .fc-timeline-bg .fc-bg-event { z-index: 2 } .fc-timeline-bg .fc-highlight { z-index: 3 } .fc-timeline-bg-harness { position: absolute; top: 0; bottom: 0; } /* rename to thickness */ .fc-resource-timeline-divider { width: 3px; /* important to have width to shrink this cell. no cross-browser problems */ cursor: col-resize; } /* will match horizontal groups in the datagrid AND group lanes in the timeline area */ .fc-resource-timeline .fc-resource-group:not([rowspan]) { background: #eee; background: var(--fc-theme-standard-muted-bg-color, #eee); } .fc-timeline-lane-frame { position: relative; /* contains the fc-timeline-bg container, which liquidly expands */ /* the height is explicitly set by row-height-sync */ } .fc-timeline-overlap-enabled .fc-timeline-lane-frame .fc-timeline-events { /* has height set on it */ box-sizing: content-box; /* padding no longer part of height */ padding-bottom: 10px; /* give extra spacing underneath for selecting */ } /* TODO: rename file?? */ /* the "frame" */ .fc-datagrid-cell-frame-liquid { height: 100%; /* needs liquid hack */ } .fc-liquid-hack .fc-datagrid-cell-frame-liquid { height: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* the "frame" in a HEADER */ /* needs to position the column resizer */ /* needs to vertically center content */ /* better than fc-datagrid-header, which won't work in print view */ th.fc-datagrid-cell .fc-datagrid-cell-frame { position: relative; /* for resizer */ display: flex; justify-content: flex-start; /* horizontal align (natural left/right) */ align-items: center; /* vertical align */ } th.fc-datagrid-cell .fc-datagrid-cell-super .fc-datagrid-cell-frame { justify-content: center; /* horizontal align */ } /* the column resizer (only in HEADER) */ .fc-datagrid-cell-resizer { position: absolute; z-index: 1; top: 0; bottom: 0; width: 5px; cursor: col-resize; } .fc-direction-ltr .fc-datagrid-cell-resizer { right: -3px } .fc-direction-rtl .fc-datagrid-cell-resizer { left: -3px } /* the cushion */ .fc-datagrid-cell-cushion { padding: 8px; white-space: nowrap; overflow: hidden; /* problem for col resizer :( */ } /* expander icons */ .fc-datagrid-expander { cursor: pointer; opacity: 0.65; } .fc-direction-ltr .fc-datagrid-expander { margin-right: 3px } .fc-direction-rtl .fc-datagrid-expander { margin-left: 3px } .fc-datagrid-expander .fc-icon { /* the expander and spacers before the expander */ display: inline-block; width: 1em; /* ensure constant width, esp for empty icons */ text-align: center; } .fc-resource-timeline-flat .fc-datagrid-expander-placeholder { display: none; }