disabled days

packages/core/src/common/DayCellRoot.tsx

@@ -39,7 +39,8 @@ export interface DayCellRootProps {
   children: (
     rootElRef: Ref<any>,
     classNames: string[],
-    rootDataAttrs
+    rootDataAttrs,
+    isDisabled: boolean
   ) => ComponentChildren
 }
 
@@ -55,17 +56,24 @@ export class DayCellRoot extends BaseComponent<DayCellRootProps> {
       todayRange: props.todayRange,
       showDayNumber: props.showDayNumber
     }
-    let hookProps = {
+    let hookProps = { // it's weird to rely on this internally so much (isDisabled)
       ...massageHooksProps(hookPropsOrigin, context),
       ...props.extraHookProps
     }
-    let customClassNames = this.buildClassNames(hookProps, context, null, hookPropsOrigin) // cacheBuster=hookPropsOrigin
-    let standardClassNames = getDayClassNames(hookProps, context.theme) // can use publicHookProps as input
-    let dataAttrs = { 'data-date': formatDayString(props.date) }
+
+    let classNames = getDayClassNames(hookProps, context.theme).concat(
+      hookProps.isDisabled
+        ? [] // don't use custom classNames if disalbed
+        : this.buildClassNames(hookProps, context, null, hookPropsOrigin) // cacheBuster=hookPropsOrigin
+    )
+
+    let dataAttrs = hookProps.isDisabled ? {} : {
+      'data-date': formatDayString(props.date)
+    }
 
     return (
       <MountHook name='dayCell' hookProps={hookProps} elRef={props.elRef}>
-        {(rootElRef) => props.children(rootElRef, standardClassNames.concat(customClassNames), dataAttrs)}
+        {(rootElRef) => props.children(rootElRef, classNames, dataAttrs, hookProps.isDisabled)}
       </MountHook>
     )
   }

packages/core/src/component/date-rendering.tsx

@@ -32,25 +32,27 @@ export function getDayClassNames(meta: DateMeta, theme: Theme) {
     'fc-day-' + DAY_IDS[meta.dow]
   ]
 
-  if (meta.isDisabled) { // TODO: shouldn't we avoid all other classnames if disabled?
+  if (meta.isDisabled) {
     classNames.push('fc-day-disabled')
-  }
 
-  if (meta.isToday) {
-    classNames.push('fc-day-today')
-    classNames.push(theme.getClass('today'))
-  }
+  } else {
 
-  if (meta.isPast) {
-    classNames.push('fc-day-past')
-  }
+    if (meta.isToday) {
+      classNames.push('fc-day-today')
+      classNames.push(theme.getClass('today'))
+    }
 
-  if (meta.isFuture) {
-    classNames.push('fc-day-future')
-  }
+    if (meta.isPast) {
+      classNames.push('fc-day-past')
+    }
+
+    if (meta.isFuture) {
+      classNames.push('fc-day-future')
+    }
 
-  if (meta.isOther) {
-    classNames.push('fc-day-other')
+    if (meta.isOther) {
+      classNames.push('fc-day-other')
+    }
   }
 
   return classNames
@@ -63,21 +65,23 @@ export function getSlotClassNames(meta: DateMeta, theme: Theme) {
     'fc-slot-' + DAY_IDS[meta.dow]
   ]
 
-  if (meta.isDisabled) { // TODO: shouldn't we avoid all other classnames if disabled?
+  if (meta.isDisabled) {
     classNames.push('fc-slot-disabled')
-  }
 
-  if (meta.isToday) {
-    classNames.push('fc-slot-today')
-    classNames.push(theme.getClass('today'))
-  }
+  } else {
 
-  if (meta.isPast) {
-    classNames.push('fc-slot-past')
-  }
+    if (meta.isToday) {
+      classNames.push('fc-slot-today')
+      classNames.push(theme.getClass('today'))
+    }
+
+    if (meta.isPast) {
+      classNames.push('fc-slot-past')
+    }
 
-  if (meta.isFuture) {
-    classNames.push('fc-slot-future')
+    if (meta.isFuture) {
+      classNames.push('fc-slot-future')
+    }
   }
 
   return classNames

packages/daygrid/src/TableCell.tsx

@@ -76,59 +76,61 @@ export default class TableCell extends DateComponent<TableCellProps> {
         extraHookProps={props.extraHookProps}
         elRef={props.elRef}
       >
-        {(rootElRef, classNames, rootDataAttrs) => (
+        {(rootElRef, classNames, rootDataAttrs, isDisabled) => (
           <td
             ref={rootElRef}
             class={[ 'fc-daygrid-day' ].concat(classNames, props.extraClassNames || []).join(' ')}
             {...rootDataAttrs}
             {...props.extraDataAttrs}
           >
-            <div class='fc-daygrid-day-frame fc-scrollgrid-sync-inner' ref={props.innerElRef /* different from hook system! RENAME */}>
-              {props.showWeekNumber &&
-                <WeekNumberRoot date={date} defaultFormat={DEFAULT_WEEK_NUM_FORMAT}>
-                  {(rootElRef, classNames, innerElRef, innerContent) => (
-                    <div class={[ 'fc-daygrid-week-number' ].concat(classNames).join(' ')} ref={rootElRef}>
-                      <a ref={innerElRef}
-                        data-navlink={options.navLinks ? buildNavLinkData(date, 'week') : null}
-                      >
-                        {innerContent}
-                      </a>
-                    </div>
-                  )}
-                </WeekNumberRoot>
-              }
-              <TableCellTop
-                date={date}
-                showDayNumber={props.showDayNumber}
-                dateProfile={props.dateProfile}
-                todayRange={props.todayRange}
-                extraHookProps={props.extraHookProps}
-              />
-              <div
-                class='fc-daygrid-day-events'
-                ref={props.fgContentElRef}
-                style={{ paddingBottom: props.fgPaddingBottom }}
-              >
-                {props.fgContent}
-                {Boolean(props.moreCnt) &&
-                  <div class='fc-daygrid-day-bottom' style={{ marginTop: props.moreMarginTop }}>
-                    <RenderHook name='moreLink'
-                      hookProps={{ num: props.moreCnt, text: props.buildMoreLinkText(props.moreCnt), view: context.view }}
-                      defaultContent={renderMoreLinkInner}
-                    >
-                      {(rootElRef, classNames, innerElRef, innerContent) => (
-                        <a onClick={this.handleMoreLink} ref={rootElRef} className={[ 'fc-daygrid-more-link' ].concat(classNames).join(' ')}>
+            {!isDisabled && // only render inside if not disabled. TODO: what about week number?
+              <div class='fc-daygrid-day-frame fc-scrollgrid-sync-inner' ref={props.innerElRef /* different from hook system! RENAME */}>
+                {props.showWeekNumber &&
+                  <WeekNumberRoot date={date} defaultFormat={DEFAULT_WEEK_NUM_FORMAT}>
+                    {(rootElRef, classNames, innerElRef, innerContent) => (
+                      <div class={[ 'fc-daygrid-week-number' ].concat(classNames).join(' ')} ref={rootElRef}>
+                        <a ref={innerElRef}
+                          data-navlink={options.navLinks ? buildNavLinkData(date, 'week') : null}
+                        >
                           {innerContent}
                         </a>
-                      )}
-                    </RenderHook>
-                  </div>
+                      </div>
+                    )}
+                  </WeekNumberRoot>
                 }
+                <TableCellTop
+                  date={date}
+                  showDayNumber={props.showDayNumber}
+                  dateProfile={props.dateProfile}
+                  todayRange={props.todayRange}
+                  extraHookProps={props.extraHookProps}
+                />
+                <div
+                  class='fc-daygrid-day-events'
+                  ref={props.fgContentElRef}
+                  style={{ paddingBottom: props.fgPaddingBottom }}
+                >
+                  {props.fgContent}
+                  {Boolean(props.moreCnt) &&
+                    <div class='fc-daygrid-day-bottom' style={{ marginTop: props.moreMarginTop }}>
+                      <RenderHook name='moreLink'
+                        hookProps={{ num: props.moreCnt, text: props.buildMoreLinkText(props.moreCnt), view: context.view }}
+                        defaultContent={renderMoreLinkInner}
+                      >
+                        {(rootElRef, classNames, innerElRef, innerContent) => (
+                          <a onClick={this.handleMoreLink} ref={rootElRef} className={[ 'fc-daygrid-more-link' ].concat(classNames).join(' ')}>
+                            {innerContent}
+                          </a>
+                        )}
+                      </RenderHook>
+                    </div>
+                  }
+                </div>
+                <div class='fc-daygrid-day-bg'>
+                  {props.bgContent}
+                </div>
               </div>
-              <div class='fc-daygrid-day-bg'>
-                {props.bgContent}
-              </div>
-            </div>
+            }
           </td>
         )}
       </DayCellRoot>