fixup daygrid classnames

packages/__tests__/src/lib/wrappers/DayGridWrapper.ts

@@ -7,7 +7,7 @@ export default class DayGridWrapper {
 
   static EVENT_IS_START_CLASSNAME = 'fc-start'
   static EVENT_IS_END_CLASSNAME = 'fc-end'
-  static MORE_LINK_CLASSNAME = 'fc-more'
+  static MORE_LINK_CLASSNAME = 'fc-daygrid-more-link'
 
 
   constructor(private el: HTMLElement) {
@@ -75,12 +75,12 @@ export default class DayGridWrapper {
 
 
   getMoreEl() {
-    return this.el.querySelector('.fc-more')
+    return this.el.querySelector('.fc-daygrid-more-link')
   }
 
 
   getMoreEls() {
-    return findElements(this.el, '.fc-more')
+    return findElements(this.el, '.fc-daygrid-more-link')
   }
 
 
@@ -118,7 +118,7 @@ export default class DayGridWrapper {
     if (index == null) {
       $(this.getMoreEl()).simulate('click')
     } else {
-      $(this.el.querySelectorAll('.fc-more')[index]).simulate('click')
+      $(this.el.querySelectorAll('.fc-daygrid-more-link')[index]).simulate('click')
     }
   }
 

packages/core/src/common/DayCellRoot.tsx

@@ -31,7 +31,7 @@ export interface DayCellRootProps {
 export interface DayCellMountProps {
   date: DateMarker
   view: ViewApi
-  [extraProp: string]: any
+  [extraProp: string]: any // so can include a resource
 }
 
 export type DayCellDynamicProps = DayCellMountProps & DateMeta & {

packages/core/src/component/DateComponent.ts

@@ -114,7 +114,7 @@ export default abstract class DateComponent<Props={}, State={}> extends BaseComp
     let segEl = elementClosest(el, this.fgSegSelector)
 
     return (!segEl || segEl.classList.contains('fc-mirror')) &&
-      !elementClosest(el, '.fc-more') && // a "more.." link
+      !elementClosest(el, '.fc-daygrid-more-link') && // a "more.." link
       !elementClosest(el, 'a[data-navlink]') && // a clickable nav link
       !this.isInPopover(el)
   }

packages/core/src/styles/_popover.scss

@@ -5,7 +5,7 @@
   box-shadow: 0 2px 6px rgba(0,0,0,.15);
 }
 
-.fc-popover .fc-header { /* TODO: be more consistent with fc-head/fc-body */
+.fc-popover-header { /* TODO: be more consistent with fc-head/fc-body */
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -13,15 +13,15 @@
   padding: 2px 4px;
 }
 
-.fc-rtl .fc-popover .fc-header {
+.fc-rtl .fc-popover-header {
   flex-direction: row-reverse;
 }
 
-.fc-popover .fc-header .fc-title {
+.fc-popover-title {
   margin: 0 2px;
 }
 
-.fc-popover .fc-header .fc-close {
+.fc-popover-close {
   cursor: pointer;
   opacity: 0.65;
   font-size: 1.1em;
@@ -34,11 +34,11 @@
     border: 1px solid $fc-unthemed-border-color;
     border: 1px solid var(--fc-unthemed-border-color, $fc-unthemed-border-color);
     background: #fff;
+  }
 
-    .fc-header {
-      background: $fc-unthemed-muted-bg-color;
-      background: var(--fc-unthemed-muted-bg-color, $fc-unthemed-muted-bg-color);
-    }
+  .fc-popover-header {
+    background: $fc-unthemed-muted-bg-color;
+    background: var(--fc-unthemed-muted-bg-color, $fc-unthemed-muted-bg-color);
   }
 
 }

packages/daygrid/src/MorePopover.tsx

@@ -1,4 +1,4 @@
-import { DateComponent, DateMarker, h, EventInstanceHash, ComponentContext, createFormatter, Hit, addDays, DateRange, getDateMeta, getDayClassNames, getSegMeta } from '@fullcalendar/core'
+import { DateComponent, DateMarker, h, EventInstanceHash, ComponentContext, createFormatter, Hit, addDays, DateRange, getSegMeta, DayCellRoot } from '@fullcalendar/core'
 import TableSeg from './TableSeg'
 import TableEvent from './TableEvent'
 import Popover from './Popover'
@@ -26,47 +26,47 @@ export default class MorePopover extends DateComponent<MorePopoverProps> {
     let { date, hiddenInstances, todayRange } = props
     let title = dateEnv.format(date, createFormatter(options.dayPopoverFormat)) // TODO: cache formatter
 
-    let contentClassNames = [ 'fc-more-popover-content' ].concat(
-      getDayClassNames(
-        getDateMeta(date, todayRange),
-        context.theme
-      )
-    )
-
     return (
-      <Popover
-        elRef={this.handlePopoverEl}
-        title={title}
-        onClose={props.onCloseClick}
-        alignmentEl={props.alignmentEl}
-        topAlignmentEl={props.topAlignmentEl}
-      >
-        <div className={contentClassNames.join(' ')}>
-          {props.segs.map((seg) => {
-            let { eventRange } = seg
-            let instanceId = eventRange.instance.instanceId
-
-            return (
-              <div
-                class='fc-daygrid-event-harness'
-                key={instanceId}
-                style={{
-                  visibility: hiddenInstances[instanceId] ? 'hidden' : ''
-                }}
-              >
-                <TableEvent
-                  seg={seg}
-                  isDragging={false}
-                  isResizing={false}
-                  isDateSelecting={false}
-                  isSelected={instanceId === props.selectedInstanceId}
-                  {...getSegMeta(seg, todayRange)}
-                />
-              </div>
-            )
-          })}
-        </div>
-      </Popover>
+      <DayCellRoot date={date} todayRange={todayRange} elRef={this.handlePopoverEl}>
+        {(rootElRef, dayClassNames, dataAttrs, innerElRef, innerContent) => (
+          <Popover
+            elRef={rootElRef}
+            title={title}
+            extraClassNames={[ 'fc-more-popover' ].concat(dayClassNames)}
+            extraAttrs={dataAttrs}
+            onClose={props.onCloseClick}
+            alignmentEl={props.alignmentEl}
+            topAlignmentEl={props.topAlignmentEl}
+          >
+            {innerContent &&
+              <div class='fc-more-popover-misc' ref={innerElRef}>{innerContent}</div>
+            }
+            {props.segs.map((seg) => {
+              let { eventRange } = seg
+              let instanceId = eventRange.instance.instanceId
+
+              return (
+                <div
+                  class='fc-daygrid-event-harness'
+                  key={instanceId}
+                  style={{
+                    visibility: hiddenInstances[instanceId] ? 'hidden' : ''
+                  }}
+                >
+                  <TableEvent
+                    seg={seg}
+                    isDragging={false}
+                    isResizing={false}
+                    isDateSelecting={false}
+                    isSelected={instanceId === props.selectedInstanceId}
+                    {...getSegMeta(seg, todayRange)}
+                  />
+                </div>
+              )
+            })}
+          </Popover>
+        )}
+      </DayCellRoot>
     )
   }
 

packages/daygrid/src/Popover.tsx

@@ -1,17 +1,18 @@
 import {
   h, ComponentChildren,
-  applyStyle, BaseComponent, ComponentContext, DelayedRunner, Ref
+  applyStyle, BaseComponent, ComponentContext, DelayedRunner, Ref, setRef
 } from '@fullcalendar/core'
 
 
 export interface PopoverProps {
   title: string
-  children?: ComponentChildren
-  extraClassName?: string
+  extraClassNames?: string[]
+  extraAttrs?: object
   alignmentEl: HTMLElement
   topAlignmentEl?: HTMLElement
   onClose?: () => void
   elRef?: Ref<HTMLDivElement>
+  children?: ComponentChildren
 }
 
 const PADDING_FROM_VIEWPORT = 10
@@ -20,22 +21,28 @@ const SCROLL_DEBOUNCE = 10
 
 export default class Popover extends BaseComponent<PopoverProps> {
 
+  private rootEl: HTMLElement
   private repositioner = new DelayedRunner(this.updateSize.bind(this))
 
 
   render(props: PopoverProps, state: {}, context: ComponentContext) {
     let { theme } = context
-    let classNames = [ 'fc-popover', context.theme.getClass('popover'), props.extraClassName ]
+    let classNames = [
+      'fc-popover',
+      context.theme.getClass('popover')
+    ].concat(
+      props.extraClassNames || []
+    )
 
     return (
-      <div class={classNames.join(' ')} ref={props.elRef}>
-        <div class={'fc-header ' + theme.getClass('popoverHeader')}>
-          <span class='fc-title'>
+      <div class={classNames.join(' ')} {...props.extraAttrs} ref={this.handleRootEl}>
+        <div class={'fc-popover-header ' + theme.getClass('popoverHeader')}>
+          <span class='fc-popover-title'>
             {props.title}
           </span>
-          <span class={'fc-close ' + theme.getIconClass('close')} onClick={this.handleCloseClick}></span>
+          <span class={'fc-popover-close ' + theme.getIconClass('close')} onClick={this.handleCloseClick}></span>
         </div>
-        <div class={'fc-body ' + theme.getClass('popoverContent')}>
+        <div class={'fc-popover-body ' + theme.getClass('popoverContent')}>
           {props.children}
         </div>
       </div>
@@ -56,6 +63,15 @@ export default class Popover extends BaseComponent<PopoverProps> {
   }
 
 
+  handleRootEl = (el: HTMLElement | null) => {
+    this.rootEl = el
+
+    if (this.props.elRef) {
+      setRef(this.props.elRef, el)
+    }
+  }
+
+
   // Triggered when the user clicks *anywhere* in the document, for the autoHide feature
   handleDocumentMousedown = (ev) => {
     let { onClose } = this.props
@@ -92,7 +108,7 @@ export default class Popover extends BaseComponent<PopoverProps> {
   */
   private updateSize() {
     let { alignmentEl, topAlignmentEl } = this.props
-    let rootEl = this.base as HTMLElement // BAD
+    let { rootEl } = this
 
     if (!rootEl) {
       return // not sure why this was null, but we shouldn't let external components call updateSize() anyway

packages/daygrid/src/Table.tsx

@@ -82,7 +82,7 @@ export default class Table extends DateComponent<TableProps, TableState> {
 
     let classNames = [ 'fc-daygrid' ]
     if (props.vGrowRows && props.eventLimit === true) {
-      classNames.push('fc-daygrid-constantrowheight')
+      classNames.push('fc-daygrid-balanced')
     }
 
     return (

packages/daygrid/src/TableCell.tsx

@@ -90,7 +90,6 @@ export default class TableCell extends DateComponent<TableCellProps> {
                     <div class={[ 'fc-daygrid-week-number' ].concat(classNames).join(' ')} ref={rootElRef}>
                       <a ref={innerElRef}
                         data-navlink={options.navLinks ? buildNavLinkData(date, 'week') : null}
-                        class='fc-scrollgrid-shrink-span'
                       >
                         {innerContent}
                       </a>
@@ -99,7 +98,7 @@ export default class TableCell extends DateComponent<TableCellProps> {
                 </WeekNumberRoot>
               }
               {innerContent &&
-                <div class='fc-daygrid-day-header' ref={innerElRef}>
+                <div class='fc-daygrid-day-top' ref={innerElRef}>
                   {innerContent}
                 </div>
               }
@@ -110,14 +109,14 @@ export default class TableCell extends DateComponent<TableCellProps> {
               >
                 {props.fgContent}
                 {Boolean(props.moreCnt) &&
-                  <div class='fc-more' style={{ marginTop: props.moreMarginTop }}>
+                  <div class='fc-daygrid-day-bottom' style={{ marginTop: props.moreMarginTop }}>
                     <RenderHook name='moreLink'
                       mountProps={{ view: context.view }}
                       dynamicProps={{ num: props.moreCnt, text: props.buildMoreLinkText(props.moreCnt), view: context.view }}
                       defaultInnerContent={renderMoreLinkInner}
                     >
                       {(rootElRef, classNames, innerElRef, innerContent) => (
-                        <a onClick={this.handleMoreLink} ref={rootElRef} className={classNames.join(' ')}>
+                        <a onClick={this.handleMoreLink} ref={rootElRef} className={[ 'fc-daygrid-more-link' ].concat(classNames).join(' ')}>
                           {innerContent}
                         </a>
                       )}
@@ -152,7 +151,7 @@ export default class TableCell extends DateComponent<TableCellProps> {
 function renderCellHeaderInner(props: DayCellDynamicProps) {
   if (props.dayNumberText) {
     return (
-      <a data-navlink={props.navLinkData} className='fc-day-number'>
+      <a className='fc-daygrid-day-number' data-navlink={props.navLinkData}>
         {props.dayNumberText}
       </a>
     )

packages/daygrid/src/TableRow.tsx

@@ -137,9 +137,9 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
                 <Fragment>{mirrorFgNodes}</Fragment>
               ]}
               bgContent={[
-                <Fragment>{this.renderFillSegs(highlightSegsByCol[col], 'fc-highlight')}</Fragment>, // Fragment scopes the keys
-                <Fragment>{this.renderFillSegs(businessHoursByCol[col], 'fc-nonbusiness')}</Fragment>,
-                <Fragment>{this.renderFillSegs(bgEventSegsByCol[col], 'fc-bgevent')}</Fragment>
+                <Fragment>{this.renderFillSegs(highlightSegsByCol[col], 'highlight')}</Fragment>, // Fragment scopes the keys
+                <Fragment>{this.renderFillSegs(businessHoursByCol[col], 'nonbusiness')}</Fragment>,
+                <Fragment>{this.renderFillSegs(bgEventSegsByCol[col], 'bgevent')}</Fragment>
               ]}
             />
           )
@@ -279,7 +279,7 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
   }
 
 
-  renderFillSegs(segs: TableSeg[], className: string) {
+  renderFillSegs(segs: TableSeg[], fillType: string) {
     let { isRtl } = this.context
     let { cellInnerPositions } = this.state
     let nodes: VNode[] = []
@@ -296,7 +296,9 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
         }
 
         nodes.push(
-          <div class={className} style={leftRightCss} />
+          <div class='fc-daygrid-bg-harness' style={leftRightCss}>
+            <div class={`fc-daygrid-${fillType} fc-${fillType}`} />
+          </div>
         )
       }
     }

packages/daygrid/src/styles/_daygrid.scss

@@ -14,7 +14,7 @@
   position: static;
 }
 
-.fc-daygrid-day-header {
+.fc-daygrid-day-top {
   padding: 0 4px 4px;
   text-align: right;
 }
@@ -32,7 +32,7 @@
   min-height: 3em;
 }
 
-.fc-daygrid-constantrowheight .fc-daygrid-day-events {
+.fc-daygrid-balanced .fc-daygrid-day-events {
   position: absolute;
   left: 0;
   right: 0;
@@ -51,45 +51,51 @@
   right: 0;
 }
 
+.fc-daygrid-bg-harness {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.fc-daygrid-bgevent { z-index: 1 }
+.fc-daygrid-nonbusiness { z-index: 2 }
+.fc-daygrid-highlight { z-index: 3 }
 
-.fc-daygrid-day {
-  .fc-bgevent,
-  .fc-highlight,
-  .fc-nonbusiness {
-    z-index: 1; // TODO: more specific
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
+.fc-daygrid-event {
+  position: relative;
+  z-index: 4;
 }
 
-.fc-daygrid .fc-event {
+.fc-daygrid-event.fc-event-mirror {
   position: relative;
-  z-index: 2;
+  z-index: 5;
 }
 
-.fc-daygrid .fc-event.fc-event-mirror {
+.fc-daygrid-day-top {
   position: relative;
-  z-index: 3;
+  z-index: 4;
 }
 
-.fc-daygrid .fc-more {
+.fc-daygrid-day-bottom {
   position: relative;
-  z-index: 2;
+  z-index: 4;
   font-size: .85em;
+}
 
-  a {
-    cursor: pointer; // TODO: add reset?
-  }
+.fc-daygrid-more-link { // TODO: dont put here
+  cursor: pointer;
 }
 
+
+
+
 .fc-daygrid .fc-popover {
-  z-index: 4;
+  z-index: 6;
 }
 
-.fc-more-popover-content {
+.fc-more-popover .fc-popover-body {
   padding: 10px;
   min-width: 220px;
 }
@@ -113,6 +119,6 @@
   border-radius: 0 0 0 3px;
 }
 
-.fc-day-other .fc-daygrid-day-header {
+.fc-day-other .fc-daygrid-day-top {
   opacity: 0.3;
 }

packages/timegrid/src/TimeCol.tsx

@@ -51,7 +51,7 @@ export default class TimeCol extends BaseComponent<TimeColProps> {
             {...props.extraDataAttrs}
           >
             <div class='fc-timegrid-col-origin'>
-              <div class='fc-timegrid-events'>
+              <div class='fc-timegrid-col-events'>
                 {/* the Fragments scope the keys */}
                 <Fragment>
                   {this.renderFgSegs(

packages/timegrid/src/styles/_time-grid.scss

@@ -27,7 +27,7 @@
   position: relative;
 }
 
-.fc-timegrid-events {
+.fc-timegrid-col-events {
   position: absolute;
   top: 0;
   left: 0;
@@ -70,11 +70,11 @@
 }
 
 
-.fc-ltr .fc-timegrid-events { /* space on the sides of events for LTR (default) */
+.fc-ltr .fc-timegrid-col-events { /* space on the sides of events for LTR (default) */
   margin: 0 2.5% 0 2px;
 }
 
-.fc-rtl .fc-timegrid-events { /* space on the sides of events for RTL */
+.fc-rtl .fc-timegrid-col-events { /* space on the sides of events for RTL */
   margin: 0 2px 0 2.5%;
 }
 
@@ -82,7 +82,7 @@
   position: absolute;
 }
 
-.fc-timegrid-events { z-index: 4 } // events are z-index-scoped within
+.fc-timegrid-col-events { z-index: 4 } // events are z-index-scoped within
 .fc-timegrid-highlight { z-index: 3 }
 .fc-timegrid-bgevent { z-index: 2 }
 .fc-timegrid-nonbusiness { z-index: 1 }