classname fixup, mostly timegrid

examples/background-events.html

@@ -19,6 +19,7 @@
       navLinks: true, // can click day/week names to navigate views
       businessHours: true, // display business hours
       editable: true,
+      selectable: true,
       events: [
         {
           title: 'Business Lunch',

packages-premium

@@ -1 +1 @@
-Subproject commit c835ba29c95af5679a114f8ee6dda15978ecdaf2
+Subproject commit 795ceee3574ff3aea7cbaeb3be029d115701f1d3

packages/core/src/scrollgrid/util.tsx

@@ -49,7 +49,7 @@ export interface ChunkContentCallbackArgs { // TODO: util for wrapping tables!?
 
 
 export function computeShrinkWidth(chunkEls: HTMLElement[]) { // all in same COL!
-  let shrinkCells = findElements(chunkEls, '.shrink')
+  let shrinkCells = findElements(chunkEls, '.fc-scrollgrid-shrink')
   let largestWidth = 0
 
   for (let shrinkCell of shrinkCells) {

packages/core/src/styles/_event.scss

@@ -10,6 +10,17 @@
   opacity: 0.3;
 }
 
+.fc-bgevent,
+.fc-nonbusiness,
+.fc-highlight {
+  // will always have a harness
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 
 .fc-event-dot {
   background-color: #3788d8; /* default BACKGROUND color */

packages/core/src/util/misc.ts

@@ -317,14 +317,14 @@ export function diffDates(date0: DateMarker, date1: DateMarker, dateEnv: DateEnv
 ----------------------------------------------------------------------------------------------------------------------*/
 
 export function computeSmallestCellWidth(cellEl: HTMLElement) {
-  let allWidthEl = cellEl.querySelector('[data-fc-width-all]')
-  let contentWidthEl = cellEl.querySelector('[data-fc-width-content]')
+  let allWidthEl = cellEl.querySelector('.fc-scrollgrid-shrink-block')
+  let contentWidthEl = cellEl.querySelector('.fc-scrollgrid-shrink-span')
 
   if (!allWidthEl) {
-    throw new Error('needs data-fc-width-all') // TODO: use const
+    throw new Error('needs fc-scrollgrid-shrink-block className') // TODO: use const
   }
   if (!contentWidthEl) {
-    throw new Error('needs data-fc-width-content')
+    throw new Error('needs fc-scrollgrid-shrink-span className')
   }
 
   return cellEl.getBoundingClientRect().width - allWidthEl.getBoundingClientRect().width + // the cell padding+border

packages/daygrid/src/TableCell.tsx

@@ -90,7 +90,7 @@ 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}
-                        data-fc-width-content={1}
+                        class='fc-scrollgrid-shrink-span'
                       >
                         {innerContent}
                       </a>

packages/timegrid/src/TimeCol.tsx

@@ -50,8 +50,8 @@ export default class TimeCol extends BaseComponent<TimeColProps> {
             {...dataAttrs}
             {...props.extraDataAttrs}
           >
-            <div class='fc-timegrid-col-inner'>
-              <div class='fc-timegrid-col-events'>
+            <div class='fc-timegrid-col-origin'>
+              <div class='fc-timegrid-events'>
                 {/* the Fragments scope the keys */}
                 <Fragment>
                   {this.renderFgSegs(
@@ -71,9 +71,9 @@ export default class TimeCol extends BaseComponent<TimeColProps> {
                 </Fragment>
               </div>
               {this.renderNowIndicator(props.nowIndicatorSegs)}
-              <Fragment>{this.renderFillSegs(props.businessHourSegs, interactionAffectedInstances, 'fc-nonbusiness')}</Fragment>
-              <Fragment>{this.renderFillSegs(props.bgEventSegs, interactionAffectedInstances, 'fc-bgevent')}</Fragment>
-              <Fragment>{this.renderFillSegs(props.dateSelectionSegs, interactionAffectedInstances, 'fc-highlight')}</Fragment>
+              <Fragment>{this.renderFillSegs(props.businessHourSegs, 'nonbusiness')}</Fragment>
+              <Fragment>{this.renderFillSegs(props.bgEventSegs, 'bgevent')}</Fragment>
+              <Fragment>{this.renderFillSegs(props.dateSelectionSegs, 'highlight')}</Fragment>
             </div>
             {innerContent &&
               <div class='fc-timegrid-col-misc' ref={innerElRef}>{innerContent}</div>
@@ -129,7 +129,7 @@ export default class TimeCol extends BaseComponent<TimeColProps> {
   }
 
 
-  renderFillSegs(segs: TimeColsSeg[], segIsNoDisplay: { [instanceId: string]: any }, className: string) {
+  renderFillSegs(segs: TimeColsSeg[], fillType: string) {
     let { context, props } = this
 
     if (!props.slatCoords) { return }
@@ -138,7 +138,9 @@ export default class TimeCol extends BaseComponent<TimeColProps> {
     computeSegVerticals(segs, props.date, props.slatCoords, context.options.eventMinHeight)
 
     return segs.map((seg) => (
-      <div class={className} style={this.computeSegTopBottomCss(seg)}></div>
+      <div class={`fc-timegrid-bg-harness`} style={this.computeSegTopBottomCss(seg)}>
+        <div class={`fc-timegrid-${fillType} fc-${fillType}`}></div>
+      </div>
     ))
   }
 

packages/timegrid/src/TimeColsContent.tsx

@@ -79,7 +79,7 @@ export default class TimeColsContent extends BaseComponent<TimeColsContentProps>
           <tbody>
             <tr>
               {props.axis &&
-                <td class='fc-timegrid-cols-axis' />
+                <td class='fc-timegrid-col-axis' />
               }
               {props.cells.map((cell, i) => (
                 <TimeCol

packages/timegrid/src/TimeColsSlats.tsx

@@ -63,7 +63,7 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
     let { theme } = context
 
     return (
-      <div class='fc-timegrid-slats' ref={this.rootElRef}>
+      <div class='fc-timegrid-slots' ref={this.rootElRef}>
         <table
           class={theme.getClass('table') + ' vgrow' /* why not use rowsGrow like resource view? */}
           style={{
@@ -142,7 +142,11 @@ export class TimeColsSlatsBody extends BaseComponent<TimeColsSlatsBodyProps> {
             date: context.dateEnv.toDate(slatMeta.date),
             view: context.view
           }
-          let classNames = [ 'fc-slat', 'fc-time', (!slatMeta.isLabeled ? ' fc-minor' : '') ]
+          let classNames = [
+            'fc-timegrid-slot',
+            'fc-timegrid-slot-lane',
+            slatMeta.isLabeled ? '' : 'fc-timegrid-slot-minor'
+          ]
 
           return (
             <tr ref={slatElRefs.createRef(i)}>
@@ -176,7 +180,11 @@ const DEFAULT_SLAT_LABEL_FORMAT = {
 }
 
 export function TimeColsAxisCell(props: TimeSlatMeta) {
-  let classNames = [ 'fc-slat', 'fc-time', props.isLabeled ? 'shrink' : 'fc-minor', 'fc-axis' ]
+  let classNames = [
+    'fc-timegrid-slot',
+    'fc-timegrid-slot-axis',
+    props.isLabeled ? 'fc-scrollgrid-shrink' : 'fc-timegrid-slot-minor'
+  ]
 
   return (
     <ComponentContextType.Consumer>
@@ -204,8 +212,8 @@ export function TimeColsAxisCell(props: TimeSlatMeta) {
             <RenderHook name='slotLabel' mountProps={mountProps} dynamicProps={dynamicProps} defaultInnerContent={renderInnerContent}>
               {(rootElRef, customClassNames, innerElRef, innerContent) => (
                 <td ref={rootElRef} class={classNames.concat(customClassNames).join(' ')} data-time={props.isoTimeStr}>
-                  <div data-fc-width-all={1}>
-                    <span data-fc-width-content={1} ref={innerElRef}>
+                  <div class='fc-scrollgrid-shrink-block'>
+                    <span className='fc-timegrid-slot-axis-inner fc-scrollgrid-shrink-span' ref={innerElRef}>
                       {innerContent}
                     </span>
                   </div>

packages/timegrid/src/TimeColsView.tsx

@@ -232,9 +232,13 @@ export default abstract class TimeColsView extends View {
       return (
         <WeekNumberRoot date={range.start} defaultFormat={DEFAULT_WEEK_NUM_FORMAT}>
           {(rootElRef, classNames, innerElRef, innerContent) => (
-            <th class={[ 'fc-axis shrink', 'fc-week-number' ].concat(classNames).join(' ')} ref={rootElRef}>
-              <div data-fc-width-all={1}>
-                <a data-navlink={navLinkData} data-fc-width-content={1} ref={innerElRef}>
+            <th ref={rootElRef} class={[
+              'fc-timegrid-view-axis',
+              'fc-scrollgrid-shrink',
+              'fc-week-number' // TODO: make part of WeekNumberRoot
+            ].concat(classNames).join(' ')}>
+              <div class='fc-scrollgrid-shrink-block'>
+                <a class='fc-timegrid-view-axis-inner fc-scrollgrid-shrink-span' data-navlink={navLinkData} ref={innerElRef}>
                   {innerContent}
                 </a>
               </div>
@@ -245,7 +249,7 @@ export default abstract class TimeColsView extends View {
     }
 
     return (
-      <th class='fc-axis'></th>
+      <th class='fc-timegrid-view-axis'></th>
     )
   }
 
@@ -260,9 +264,13 @@ export default abstract class TimeColsView extends View {
     return (
       <RenderHook name='allDay' mountProps={innerProps} dynamicProps={innerProps}>
         {(rootElRef, classNames, innerElRef, innerContent) => (
-          <td className={[ 'shrink', 'fc-axis' ].concat(classNames).join(' ')} ref={rootElRef}>
-            <div data-fc-width-all={1}>
-              <span data-fc-width-content={1} ref={innerElRef}>
+          <td ref={rootElRef} className={[
+            'fc-timegrid-view-axis',
+            'fc-scrollgrid-shrink',
+            'fc-allday' // TODO: have RenderHook supply this?
+          ].concat(classNames).join(' ')}>
+            <div class='fc-scrollgrid-shrink-block'>
+              <span class='fc-timegrid-view-axis-inner fc-scrollgrid-shrink-span' ref={innerElRef}>
                 {innerContent}
               </span>
             </div>
@@ -288,7 +296,9 @@ class TimeBodyAxis extends BaseComponent<TimeBodyAxisProps> {
 
   render(props: TimeBodyAxisProps) {
     return props.slatMetas.map((slatMeta: TimeSlatMeta) => (
-      <tr><TimeColsAxisCell {...slatMeta} /></tr>
+      <tr>
+        <TimeColsAxisCell {...slatMeta} />
+      </tr>
     ))
   }
 

packages/timegrid/src/styles/_event.scss

@@ -1,10 +1,4 @@
 
-.fc-timegrid-event-harness {
-  position: absolute;
-}
-
-
-
 .fc-timegrid-event {
   position: absolute;
   top: 0;
@@ -12,6 +6,7 @@
   left: 0;
   right: 0;
   overflow: hidden;
+  margin-bottom: 1px;
 
   display: block; /* make the <a> tag block */
   font-size: .85em;
@@ -23,31 +18,6 @@
   text-decoration: none; /* if <a> has an href */
 }
 
-.fc-timegrid .fc-highlight,
-.fc-timegrid .fc-bgevent,
-.fc-timegrid .fc-nonbusiness {
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
-.fc-timegrid-event { z-index: 5 }
-.fc-timegrid-event.fc-event-mirror { z-index: 4 }
-.fc-timegrid .fc-highlight { z-index: 3 }
-.fc-timegrid .fc-bgevent { z-index: 2 }
-.fc-timegrid .fc-nonbusiness { z-index: 1 }
-
-
-/* TimeGrid Event Styling
-----------------------------------------------------------------------------------------------------
-We use the full "fc-time-grid-event" class instead of using descendants because the event won't
-be a descendant of the grid when it is being dragged.
-*/
-
-.fc-timegrid-event {
-  margin-bottom: 1px;
-}
-
 .fc-timegrid-event-harness-inset .fc-timegrid-event {
   // TODO: make these colors into variables
   -webkit-box-shadow: 0px 0px 0px 1px #fff;

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

@@ -5,8 +5,7 @@
   min-height: 100%; // fill height always ... even when slat table doesn't grow
 }
 
-
-.fc-timegrid-slats {
+.fc-timegrid-slots {
   position: relative;
   z-index: 2;
 }
@@ -24,55 +23,66 @@
   }
 }
 
-.fc-timegrid-col-inner,
-.fc-timegrid-col-events {
+.fc-timegrid-col-origin {
   position: relative;
-  height: 0;
 }
 
-.fc-ltr .fc-timegrid-col-events { /* space on the sides of events for LTR (default) */
-  margin: 0 2.5% 0 2px;
+.fc-timegrid-events {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 0;
 }
 
-.fc-rtl .fc-timegrid-col-events { /* space on the sides of events for RTL */
-  margin: 0 2px 0 2.5%;
-}
 
 
-.fc-timegrid-col-inner .fc-nonbusiness {
-  z-index: 1;
-}
+// SLATS (lines that run horizontally)
 
-.fc-timegrid-col-inner .fc-bgevent {
-  z-index: 2;
+.fc-timegrid-slot { // a <td>
+  height: 1.5em;
+  border-bottom: 0 !important;
+    /* each cell is responsible for its top border */
+    /* is !important because competing with theme declarations */
 }
 
-.fc-timegrid-col-inner .fc-highlight {
-  z-index: 3;
+.fc-timegrid-slot-minor {
+  border-top-style: dotted !important;
 }
 
-.fc-timegrid-col-inner .fc-event {
-  z-index: 4;
+.fc .fc-timegrid-view-axis,
+.fc .fc-timegrid-slot-axis {
+  vertical-align: middle;
 }
 
-.fc-timegrid-col-inner .fc-now-indicator-line {
-  z-index: 5;
+.fc-timegrid-view-axis-inner,
+.fc-timegrid-slot-axis-inner {
+  white-space: nowrap;
+  padding: 0 4px;
 }
 
-.fc-timegrid-col-events {
-  z-index: 6;
+
+
+.fc-timegrid-bg-harness {
+  position: absolute;
+  left: 0;
+  right: 0;
 }
 
 
-// SLATS (lines that run horizontally)
+.fc-ltr .fc-timegrid-events { /* space on the sides of events for LTR (default) */
+  margin: 0 2.5% 0 2px;
+}
 
-.fc-slat { // a <td>
-  height: 1.5em;
-  border-bottom: 0 !important;
-    /* each cell is responsible for its top border */
-    /* is !important because competing with theme declarations */
+.fc-rtl .fc-timegrid-events { /* space on the sides of events for RTL */
+  margin: 0 2px 0 2.5%;
 }
 
-.fc-slat.fc-minor {
-  border-top-style: dotted;
+.fc-timegrid-event-harness {
+  position: absolute;
 }
+
+.fc-timegrid-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 }

packages/timegrid/src/styles/_view.scss

@@ -5,40 +5,3 @@
 .fc .fc-timeGrid-view .fc-divider {
   padding: 0 0 2px;
 }
-
-
-// axis, for the timegrid AND the daygrid
-
-.fc-timeGrid-view .fc-axis {
-  vertical-align: middle;
-
-  span { // bad selector
-    white-space: nowrap;
-    padding: 0 4px;
-  }
-}
-
-
-.fc-screen {
-
-  // all-day area
-
-  .fc-timeGrid-view .fc-day-grid .fc-row {
-    min-height: 3em; /* all-day section will never get shorter than this */
-  }
-
-  .fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
-    padding-bottom: 1em; /* give space underneath events for clicking/selecting days */
-  }
-
-}
-
-
-.fc-print {
-
-  /* don't display the side axis at all ("all-day" and time cells) */
-  .fc-timeGrid-view .fc-axis {
-    display: none;
-  }
-
-}