:root {
--fc-daygrid-event-dot-width: 8px;
}
/* help things clear margins of inner content */
.fc-daygrid-day-frame,
.fc-daygrid-day-events,
.fc-daygrid-event-harness { /* for event top/bottom margins */
}
.fc-daygrid-day-frame:before, .fc-daygrid-day-events:before, .fc-daygrid-event-harness:before {
content: "";
clear: both;
display: table; }
.fc-daygrid-day-frame:after, .fc-daygrid-day-events:after, .fc-daygrid-event-harness:after {
content: "";
clear: both;
display: table; }
.fc .fc-daygrid-body { /* a
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;
padding: 2px 3px 0
}
.fc .fc-daygrid-day-bottom:before {
content: "";
clear: both;
display: table; }
.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 .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;
}
|