that wraps the table position: relative; z-index: 1; // container inner z-index's because s can't do it } & .fc-daygrid-day { &.fc-day-today { background-color: var(--fc-today-bg-color); } } & .fc-daygrid-day-frame { position: relative; min-height: 100%; // seems to work better than `height` because sets height after rows/cells naturally do it } // cell top & .fc-daygrid-day-top { display: flex; flex-direction: row-reverse; } & .fc-day-other .fc-daygrid-day-top { opacity: 0.3; } // day number (within cell top) & .fc-daygrid-day-number { position: relative; z-index: $daygrid-topbottom-z; padding: 4px; } & .fc-daygrid-month-start { // on .fc-daygrid-day-number font-weight: bold; font-size: 1.1em; } // event container & .fc-daygrid-day-events { margin-top: 1px; // needs to be margin, not padding, so that available cell height can be computed } // 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: 2em; // in addition to being a min-height during natural height, equalizes the heights a little bit } } & .fc-daygrid-body-natural { // can coexist with -unbalanced & .fc-daygrid-day-events { margin-bottom: 1em; } } // event harness & .fc-daygrid-event-harness { position: relative; } & .fc-daygrid-event-harness-abs { position: absolute; top: 0; // fallback coords for when cannot yet be computed left: 0; // right: 0; // } & .fc-daygrid-bg-harness { position: absolute; top: 0; bottom: 0; } // bg content & .fc-daygrid-day-bg { & .fc-non-business { z-index: $daygrid-non-business-z } & .fc-bg-event { z-index: $daygrid-bg-event-z } & .fc-highlight { z-index: $daygrid-highlight-z } } // events & .fc-daygrid-event { z-index: $daygrid-event-z; margin-top: 1px; } & .fc-daygrid-event.fc-event-mirror { z-index: $daygrid-event-mirror-z; } // cell bottom (within day-events) & .fc-daygrid-day-bottom { font-size: .85em; margin: 0 2px; // can't use flexbox well inside tables. for floating &:before { @include clearfix; } &:after { @include clearfix; } } & .fc-daygrid-more-link { position: relative; z-index: $daygrid-topbottom-z; margin-top: 1px; max-width: 100%; border-radius: 3px; padding: 2px; overflow: hidden; white-space: nowrap; line-height: 1; // undo themes that have thick line-height cursor: pointer; &:hover { background-color: rgba(0, 0, 0, 0.1); } } // week number (within frame) & .fc-daygrid-week-number { position: absolute; z-index: $daygrid-weeknum-z; top: 0; padding: 2px; min-width: 1.5em; text-align: center; background-color: var(--fc-neutral-bg-color); color: var(--fc-neutral-text-color); } // popover & .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-more-link { float: left; } & .fc-daygrid-week-number { left: 0; border-radius: 0 0 3px 0; } } .fc-direction-rtl { & .fc-daygrid-more-link { float: right; } & .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 } } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/daygrid/src/styles/daygrid-event.css */ .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: var(--fc-small-font-size); } // --- the rectangle ("block") style of event --- .fc-daygrid-block-event { & .fc-event-time { font-weight: bold; } & .fc-event-time, & .fc-event-title { padding: 1px; } } // --- the dot style of event --- .fc-daygrid-dot-event { display: flex; align-items: center; padding: 2px 0; & .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; } &:hover, &.fc-event-mirror { background: rgba(0, 0, 0, 0.1); } &.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: calc(var(--fc-daygrid-event-dot-width) / 2) solid var(--fc-event-border-color); border-radius: calc(var(--fc-daygrid-event-dot-width) / 2); } // --- spacing between time and title --- $daygrid-event-inner-margin: 3px; .fc-direction-ltr { & .fc-daygrid-event .fc-event-time { margin-right: $daygrid-event-inner-margin; } } .fc-direction-rtl { & .fc-daygrid-event .fc-event-time { margin-left: $daygrid-event-inner-margin; } } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/timegrid/src/styles/constants.css */ $timegrid-slots-z: 1; $timegrid-col-bg-z: 2; $timegrid-col-fg-z: 3; $timegrid-now-indicator-z: 4; /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/timegrid/src/styles/timegrid.css */ .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-timegrid-divider { 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-axis-chunk { // for advanced ScrollGrid position: relative; // offset parent for now-indicator-container & > table { position: relative; z-index: 1; // above the now-indicator-container } } } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/timegrid/src/styles/timegrid-slots.css */ .fc { & .fc-timegrid-slots { position: relative; z-index: $timegrid-slots-z; } & .fc-timegrid-slot { // a height: 1.5em; border-bottom: 0; // each cell owns its top border &:empty:before { content: '\00a0'; // make sure there's at least an empty space to create height for height syncing } } & .fc-timegrid-slot-minor { border-top-style: dotted; } & .fc-timegrid-slot-label-cushion { display: inline-block; white-space: nowrap; } & .fc-timegrid-slot-label { vertical-align: middle; // vertical align the slots } // slots AND axis cells (top-left corner of view including the "all-day" text) & .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-timegrid-axis-frame { overflow: hidden; display: flex; align-items: center; // vertical align justify-content: flex-end; // horizontal align. matches text-align below } & .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 { @include liquid-absolute-override; } } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/timegrid/src/styles/timegrid-cols.css */ .fc { & .fc-timegrid-col { &.fc-day-today { background-color: var(--fc-today-bg-color); } } & .fc-timegrid-col-frame { min-height: 100%; // liquid-hack is below position: relative; } } .fc-media-screen { &.fc-liquid-hack { & .fc-timegrid-col-frame { @include liquid-absolute-override; } } & .fc-timegrid-cols { position: absolute; // no z-index. children will decide and go above slots top: 0; left: 0; right: 0; bottom: 0; & > table { height: 100%; } } & .fc-timegrid-col-bg, & .fc-timegrid-col-events, & .fc-timegrid-now-indicator-container { position: absolute; top: 0; left: 0; right: 0; } } .fc { // bg & .fc-timegrid-col-bg { z-index: $timegrid-col-bg-z; @include bg-z-indexes; } & .fc-timegrid-bg-harness { position: absolute; // top/bottom will be set by JS left: 0; right: 0; } // 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-timegrid-col-events { z-index: $timegrid-col-fg-z; // child event segs have z-indexes that are scoped within this div } // now indicator & .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%; } } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/timegrid/src/styles/timegrid-event.css */ .fc-timegrid-event-harness { position: absolute; // top/left/right/bottom will all be set by JS & > .fc-timegrid-event { position: absolute; // absolute WITHIN the harness top: 0; // for when not yet positioned bottom: 0; // " left: 0; right: 0; } } .fc-timegrid-event-harness-inset .fc-timegrid-event, .fc-timegrid-event.fc-event-mirror, .fc-timegrid-more-link { box-shadow: 0px 0px 0px 1px var(--fc-page-bg-color); } .fc-timegrid-event, .fc-timegrid-more-link { // events need to be root font-size: var(--fc-small-font-size); border-radius: 3px; } .fc-timegrid-event { // events need to be root margin-bottom: 1px; // give some space from bottom & .fc-event-main { padding: 1px 1px 0; } & .fc-event-time { white-space: nowrap; font-size: var(--fc-small-font-size); margin-bottom: 1px; } } .fc-timegrid-event-short { & .fc-event-main-frame { flex-direction: row; overflow: hidden; } & .fc-event-time:after { content: '\00a0-\00a0'; // dash surrounded by non-breaking spaces } & .fc-event-title { font-size: var(--fc-small-font-size) } } .fc-timegrid-more-link { // does NOT inherit from fc-timegrid-event position: absolute; z-index: 9999; // hack color: var(--fc-more-link-text-color); background: var(--fc-more-link-bg-color); cursor: pointer; margin-bottom: 1px; // match space below fc-timegrid-event } .fc-timegrid-more-link-inner { // has fc-sticky padding: 3px 2px; top: 0; } .fc-direction-ltr { & .fc-timegrid-more-link { right: 0; } } .fc-direction-rtl { & .fc-timegrid-more-link { left: 0; } } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/timegrid/src/styles/timegrid-now-indicator.css */ .fc { & .fc-timegrid-now-indicator-line, & .fc-timegrid-now-indicator-arrow { pointer-events: none; } // line & .fc-timegrid-now-indicator-line { position: absolute; z-index: $timegrid-now-indicator-z; left: 0; right: 0; border-style: solid; border-color: var(--fc-now-indicator-color); border-width: 1px 0 0; } // arrow & .fc-timegrid-now-indicator-arrow { position: absolute; z-index: $timegrid-now-indicator-z; margin-top: -5px; // vertically center on top coordinate border-style: solid; border-color: var(--fc-now-indicator-color); } } .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; } } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/timegrid/src/styles/v-event.css */ /* A VERTICAL event */ .fc-v-event { // allowed to be top-level display: block; border: 1px solid var(--fc-event-border-color); background-color: var(--fc-event-bg-color); & .fc-event-main { color: var(--fc-event-text-color); height: 100%; } & .fc-event-main-frame { height: 100%; display: flex; flex-direction: column; } & .fc-event-time { flex-grow: 0; flex-shrink: 0; max-height: 100%; overflow: hidden; } & .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-event-title { // will have fc-sticky on it top: 0; bottom: 0; max-height: 100%; // clip overflow overflow: hidden; } &:not(.fc-event-start) { border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; } &:not(.fc-event-end) { border-bottom-width: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } &.fc-event-selected:before { // expand hit area left: -10px; right: -10px; } // resizer (mouse AND touch) & .fc-event-resizer-start { cursor: n-resize; } & .fc-event-resizer-end { cursor: s-resize; } // resizer for MOUSE &:not(.fc-event-selected) { & .fc-event-resizer { height: var(--fc-event-resizer-thickness); left: 0; right: 0; } & .fc-event-resizer-start { top: calc(var(--fc-event-resizer-thickness) / -2); } & .fc-event-resizer-end { bottom: calc(var(--fc-event-resizer-thickness) / -2); } } // resizer for TOUCH (when event is "selected") &.fc-event-selected { & .fc-event-resizer { left: 50%; margin-left: calc(var(--fc-event-resizer-dot-total-width) / -2); } & .fc-event-resizer-start { top: calc(var(--fc-event-resizer-dot-total-width) / -2); } & .fc-event-resizer-end { bottom: calc(var(--fc-event-resizer-dot-total-width) / -2); } } } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/list/src/styles/vars.css */ :root { --fc-list-event-dot-width: 10px; --fc-list-event-hover-bg-color: #f5f5f5; } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/list/src/styles/list.css */ .fc-theme-standard { & .fc-list { border: 1px solid var(--fc-border-color); } } .fc { // message when no events & .fc-list-empty { background-color: var(--fc-neutral-bg-color); height: 100%; display: flex; justify-content: center; align-items: center; // vertically aligns fc-list-empty-inner } & .fc-list-empty-cushion { margin: 5em 0; } } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/list/src/styles/list-table.css */ .fc { // table within the scroller // ---------------------------------------------------------------------------------------------------- & .fc-list-table { width: 100%; border-style: hidden; // kill outer border on theme } & .fc-list-table tr > * { border-left: 0; border-right: 0; } & .fc-list-sticky { & .fc-list-day > * { // the cells position: sticky; top: 0; background: var(--fc-page-bg-color); // for when headers are styled to be transparent and sticky } } // only exists for aria reasons, hide for non-screen-readers & .fc-list-table thead { position: absolute; left: -10000px; } // the table's border-style:hidden gets confused by hidden thead. force-hide top border of first cell & .fc-list-table tbody > tr:first-child th { border-top: 0; } & .fc-list-table th { padding: 0; // uses an inner-wrapper instead... } & .fc-list-table td, & .fc-list-day-cushion { padding: 8px 14px; } // date heading rows // ---------------------------------------------------------------------------------------------------- & .fc-list-day-cushion { &:after { @include clearfix; // clear floating } } } .fc-theme-standard { & .fc-list-day-cushion { background-color: var(--fc-neutral-bg-color); } } .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 } /* https://raw.githubusercontent.com/fullcalendar/fullcalendar/v6.1.20/packages/list/src/styles/list-event.css */ .fc { & .fc-list-event.fc-event-forced-url { cursor: pointer; // whole row will seem clickable } & .fc-list-event:hover td { background-color: var(--fc-list-event-hover-bg-color); } // shrink certain cols & .fc-list-event-graphic, & .fc-list-event-time { white-space: nowrap; width: 1px; } & .fc-list-event-dot { display: inline-block; box-sizing: content-box; width: 0; height: 0; border: calc(var(--fc-list-event-dot-width) / 2) solid var(--fc-event-border-color); border-radius: calc(var(--fc-list-event-dot-width) / 2); } // 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; } }