className

packages-premium

@@ -1 +1 @@
-Subproject commit c039ffa1942908e3873692844bc2fdd7351c70e1
+Subproject commit 42ac7f178870daed4663f45026e652360c5cf5a3

packages/core/src/Toolbar.tsx

@@ -47,7 +47,7 @@ export class Toolbar extends BaseComponent<ToolbarProps> {
     ]
 
     return (
-      <div class={classNames.join(' ')}>
+      <div className={classNames.join(' ')}>
         {this.renderSection(startContent || [])}
         {this.renderSection(centerContent || [])}
         {this.renderSection(endContent || [])}
@@ -84,7 +84,7 @@ class ToolbarSection extends BaseComponent<ToolbarSectionProps> {
     let { theme } = context
 
     return (
-      <div class='fc-toolbar-chunk'>
+      <div className='fc-toolbar-chunk'>
         {props.widgetGroups.map((widgetGroup: ToolbarWidget[]) => {
           let children = []
           let isOnlyButtons = true
@@ -114,10 +114,10 @@ class ToolbarSection extends BaseComponent<ToolbarSectionProps> {
               children.push(
                 <button
                   disabled={isDisabled}
-                  class={buttonClasses.join(' ')}
+                  className={buttonClasses.join(' ')}
                   onClick={buttonClick}
                   { ...ariaAttrs }
-                >{ buttonText || (buttonIcon ? <span class={buttonIcon} /> : '')}</button>
+                >{ buttonText || (buttonIcon ? <span className={buttonIcon} /> : '')}</button>
               )
             }
           }
@@ -125,7 +125,7 @@ class ToolbarSection extends BaseComponent<ToolbarSectionProps> {
           if (children.length > 1) {
             let groupClasses = (isOnlyButtons && theme.getClass('buttonGroup')) || ''
 
-            return (<div class={groupClasses}>{children}</div>)
+            return (<div className={groupClasses}>{children}</div>)
           } else {
             return children[0]
           }

packages/core/src/ViewContainer.tsx

@@ -36,7 +36,7 @@ export class ViewContainer extends BaseComponent<ViewContainerProps> {
       <div
         ref={props.elRef}
         onClick={props.onClick}
-        class={classNames.join(' ')} style={{ height, paddingBottom }}
+        className={classNames.join(' ')} style={{ height, paddingBottom }}
       >{props.children}</div>
     )
   }

packages/core/src/common/StandardEvent.tsx

@@ -58,14 +58,14 @@ export class StandardEvent extends BaseComponent<StandardEventProps> {
             ref={rootElRef}
             {...getSegAnchorAttrs(props.seg)}
           >
-            <div class='fc-event-main' ref={innerElRef}>
+            <div className='fc-event-main' ref={innerElRef}>
               {innerContent}
             </div>
             {hookProps.isStartResizable &&
-              <div class='fc-event-resizer fc-event-resizer-start' />
+              <div className='fc-event-resizer fc-event-resizer-start' />
             }
             {hookProps.isEndResizable &&
-              <div class='fc-event-resizer fc-event-resizer-end' />
+              <div className='fc-event-resizer fc-event-resizer-end' />
             }
           </a>
         )}
@@ -79,9 +79,9 @@ export class StandardEvent extends BaseComponent<StandardEventProps> {
 function renderInnerContent(innerProps: EventMeta) {
   return [
     innerProps.timeText &&
-      <div class='fc-event-time'>{innerProps.timeText}</div>
+      <div className='fc-event-time'>{innerProps.timeText}</div>
     ,
-    <div class='fc-event-title'>
+    <div className='fc-event-title'>
       {innerProps.event.title || <Fragment>&nbsp;</Fragment>}
     </div>
   ]

packages/core/src/common/TableDateCell.tsx

@@ -73,7 +73,7 @@ export class TableDateCell extends BaseComponent<TableDateCellProps> { // BAD na
             {!dayMeta.isDisabled &&
               <a
                 data-navlink={navLinkData}
-                class={[
+                className={[
                   'fc-col-header-cell-cushion',
                   props.isSticky ? 'fc-sticky' : ''
                 ].join(' ')}
@@ -143,7 +143,7 @@ export class TableDowCell extends BaseComponent<TableDowCellProps> {
             {...props.extraDataAttrs}
           >
             <a
-              class={[
+              className={[
                 'fc-col-header-cell-cushion',
                 props.isSticky ? 'fc-sticky' : ''
               ].join(' ')}

packages/core/src/common/bg-fill.tsx

@@ -6,7 +6,7 @@ import { EventMeta } from '../component/event-rendering'
 
 export function renderFill(fillType: string) {
   return (
-    <div class={`fc-${fillType}`} />
+    <div className={`fc-${fillType}`} />
   )
 }
 
@@ -45,6 +45,6 @@ function renderInnerContent(props: EventMeta) {
   let title = props.event.title
 
   return title && (
-    <div class='fc-event-title'>{props.event.title}</div>
+    <div className='fc-event-title'>{props.event.title}</div>
   )
 }

packages/core/src/scrollgrid/Scroller.tsx

@@ -40,7 +40,7 @@ export class Scroller extends BaseComponent<ScrollerProps> implements ScrollerLi
     }
 
     return (
-      <div ref={this.handleEl} class={className.join(' ')} style={{
+      <div ref={this.handleEl} className={className.join(' ')} style={{
         overflowX: props.overflowX,
         overflowY: props.overflowY,
         left: (isAbsolute && -(props.overcomeLeft || 0)) || '',

packages/core/src/scrollgrid/SimpleScrollGrid.tsx

@@ -60,7 +60,7 @@ export class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProps, Simpl
     let classNames = getScrollGridClassNames(props.liquid, context)
 
     return (
-      <table class={classNames.join(' ')} style={{ height: props.height }}>
+      <table className={classNames.join(' ')} style={{ height: props.height }}>
         <tbody>
           {sectionConfigs.map((sectionConfig, sectionI) => this.renderSection(sectionConfig, sectionI, microColGroupNode))}
         </tbody>
@@ -76,7 +76,7 @@ export class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProps, Simpl
     }
 
     return (
-      <tr key={sectionConfig.key} class={getSectionClassNames(sectionConfig, this.props.liquid).join(' ')}>
+      <tr key={sectionConfig.key} className={getSectionClassNames(sectionConfig, this.props.liquid).join(' ')}>
         {this.renderChunkTd(sectionConfig, sectionI, microColGroupNode, sectionConfig.chunk)}
       </tr>
     )
@@ -116,7 +116,7 @@ export class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProps, Simpl
 
     return (
       <td ref={chunkConfig.elRef}>
-        <div class={'fc-scroller-harness' + (isLiquid ? ' fc-scroller-harness-liquid' : '')}>
+        <div className={'fc-scroller-harness' + (isLiquid ? ' fc-scroller-harness-liquid' : '')}>
           <Scroller
             ref={this.scrollerRefs.createRef(sectionI)}
             elRef={this.scrollerElRefs.createRef(sectionI)}

packages/core/src/scrollgrid/util.tsx

@@ -192,7 +192,7 @@ export function getSectionClassNames(sectionConfig: SectionConfig, wholeTableVGr
 
 export function renderScrollShim(arg: ChunkContentCallbackArgs) {
   return (
-    <div class='fc-scrollgrid-sticky-shim' style={{
+    <div className='fc-scrollgrid-sticky-shim' style={{
       width: arg.clientWidth,
       minWidth: arg.tableMinWidth
     }} />

packages/daygrid/src/MorePopover.tsx

@@ -44,7 +44,7 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
             <DayCellContent date={date} dateProfile={dateProfile} todayRange={todayRange}>
               {(innerElRef, innerContent) => (
                 innerContent &&
-                  <div class='fc-more-popover-misc' ref={innerElRef}>{innerContent}</div>
+                  <div className='fc-more-popover-misc' ref={innerElRef}>{innerContent}</div>
               )}
             </DayCellContent>
             {props.segs.map((seg) => {

packages/daygrid/src/Popover.tsx

@@ -35,14 +35,14 @@ export class Popover extends BaseComponent<PopoverProps> {
     )
 
     return (
-      <div class={classNames.join(' ')} {...props.extraAttrs} ref={this.handleRootEl}>
-        <div class={'fc-popover-header ' + theme.getClass('popoverHeader')}>
-          <span class='fc-popover-title'>
+      <div className={classNames.join(' ')} {...props.extraAttrs} ref={this.handleRootEl}>
+        <div className={'fc-popover-header ' + theme.getClass('popoverHeader')}>
+          <span className='fc-popover-title'>
             {props.title}
           </span>
-          <span class={'fc-popover-close ' + theme.getIconClass('close')} onClick={this.handleCloseClick}></span>
+          <span className={'fc-popover-close ' + theme.getIconClass('close')} onClick={this.handleCloseClick}></span>
         </div>
-        <div class={'fc-popover-body ' + theme.getClass('popoverContent')}>
+        <div className={'fc-popover-body ' + theme.getClass('popoverContent')}>
           {props.children}
         </div>
       </div>

packages/daygrid/src/Table.tsx

@@ -101,7 +101,7 @@ export class Table extends DateComponent<TableProps, TableState> {
     ]
 
     return (
-      <div class={classNames.join(' ')} ref={this.handleRootEl} style={{
+      <div className={classNames.join(' ')} ref={this.handleRootEl} style={{
         // these props are important to give this wrapper correct dimensions for interactions
         // TODO: if we set it here, can we avoid giving to inner tables?
         width: props.clientWidth,

packages/daygrid/src/TableCell.tsx

@@ -92,17 +92,17 @@ export class TableCell extends DateComponent<TableCellProps> {
         {(rootElRef, classNames, rootDataAttrs, isDisabled) => (
           <td
             ref={rootElRef}
-            class={[ 'fc-daygrid-day' ].concat(classNames, props.extraClassNames || []).join(' ')}
+            className={[ '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 */}>
+            <div className='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) => (
                     <a
                       ref={rootElRef}
-                      class={[ 'fc-daygrid-week-number' ].concat(classNames).join(' ')}
+                      className={[ 'fc-daygrid-week-number' ].concat(classNames).join(' ')}
                       data-navlink={options.navLinks ? buildNavLinkData(date, 'week') : null}
                     >
                       {innerContent}
@@ -120,13 +120,13 @@ export class TableCell extends DateComponent<TableCellProps> {
                 />
               }
               <div
-                class='fc-daygrid-day-events'
+                className='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 }}>
+                  <div className='fc-daygrid-day-bottom' style={{ marginTop: props.moreMarginTop }}>
                     <RenderHook name='moreLink'
                       hookProps={{ num: props.moreCnt, text: props.buildMoreLinkText(props.moreCnt), view: context.viewApi }}
                       defaultContent={renderMoreLinkInner}
@@ -140,7 +140,7 @@ export class TableCell extends DateComponent<TableCellProps> {
                   </div>
                 }
               </div>
-              <div class='fc-daygrid-day-bg'>
+              <div className='fc-daygrid-day-bg'>
                 {props.bgContent}
               </div>
             </div>
@@ -237,7 +237,7 @@ class TableCellTop extends BaseComponent<TableCellTopProps> {
       >
         {(innerElRef, innerContent) => (
           innerContent &&
-            <div class='fc-daygrid-day-top' ref={innerElRef}>
+            <div className='fc-daygrid-day-top' ref={innerElRef}>
               <a
                 className='fc-daygrid-day-number'
                 data-navlink={this.context.options.navLinks ? buildNavLinkData(props.date) : null}

packages/daygrid/src/TableListItemEvent.tsx

@@ -65,9 +65,9 @@ function renderInnerContent(innerProps: EventMeta) {
       style={{ backgroundColor: innerProps.backgroundColor || innerProps.borderColor }}
     />,
     innerProps.timeText &&
-      <div class='fc-event-time'>{innerProps.timeText}</div>
+      <div className='fc-event-time'>{innerProps.timeText}</div>
     ,
-    <div class='fc-event-title'>
+    <div className='fc-event-title'>
       {innerProps.event.title || <Fragment>&nbsp;</Fragment>}
     </div>
   ]

packages/daygrid/src/TableRow.tsx

@@ -251,7 +251,7 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
 
         nodes.push(
           <div
-            class={'fc-daygrid-event-harness' + (isAbsolute ? ' fc-daygrid-event-harness-abs' : '')}
+            className={'fc-daygrid-event-harness' + (isAbsolute ? ' fc-daygrid-event-harness-abs' : '')}
             key={instanceId}
             ref={isMirror ? null : this.segHarnessRefs.createRef(instanceId)}
             style={{
@@ -312,7 +312,7 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
         let key = eventRange.instance ? eventRange.instance.instanceId : eventRange.def.defId
 
         nodes.push(
-          <div class='fc-daygrid-bg-harness' style={leftRightCss}>
+          <div className='fc-daygrid-bg-harness' style={leftRightCss}>
             {fillType === 'bg-event' ?
               <BgEvent
                 key={key}

packages/daygrid/src/TableView.tsx

@@ -55,7 +55,7 @@ export abstract class TableView<State={}> extends DateComponent<ViewProps, State
     return (
       <ViewRoot viewSpec={context.viewSpec}>
         {(rootElRef, classNames) => (
-          <div ref={rootElRef} class={[ 'fc-daygrid' ].concat(classNames).join(' ')}>
+          <div ref={rootElRef} className={[ 'fc-daygrid' ].concat(classNames).join(' ')}>
             <SimpleScrollGrid
               liquid={!props.isHeightAuto}
               forPrint={props.forPrint}
@@ -117,7 +117,7 @@ export abstract class TableView<State={}> extends DateComponent<ViewProps, State
     return (
       <ViewRoot viewSpec={context.viewSpec}>
         {(rootElRef, classNames) => (
-          <div ref={rootElRef} class={[ 'fc-daygrid' ].concat(classNames).join(' ')}>
+          <div ref={rootElRef} className={[ 'fc-daygrid' ].concat(classNames).join(' ')}>
             <ScrollGrid
               liquid={!props.isHeightAuto}
               forPrint={props.forPrint}

packages/list/src/ListView.tsx

@@ -49,7 +49,7 @@ export class ListView extends DateComponent<ViewProps> {
     return (
       <ViewRoot viewSpec={context.viewSpec} elRef={this.setRootEl}>
         {(rootElRef, classNames) => (
-          <div ref={rootElRef} class={extraClassNames.concat(classNames).join(' ')}>
+          <div ref={rootElRef} className={extraClassNames.concat(classNames).join(' ')}>
             <Scroller
               liquid={!props.isHeightAuto}
               overflowX={props.isHeightAuto ? 'visible' : 'hidden'}
@@ -138,7 +138,7 @@ export class ListView extends DateComponent<ViewProps> {
         }
 
         return (
-          <table class={'fc-list-table ' + theme.getClass('table')}>
+          <table className={'fc-list-table ' + theme.getClass('table')}>
             <tbody>{innerNodes}</tbody>
           </table>
         )

packages/list/src/ListViewEventRow.tsx

@@ -41,12 +41,12 @@ export class ListViewEventRow extends BaseComponent<MinimalEventProps> {
         {(rootElRef, classNames, style, innerElRef, innerContent, hookProps) => (
           <tr className={[ 'fc-list-event', hookProps.event.url ? 'fc-event-forced-url' : '' ].concat(classNames).join(' ')} ref={rootElRef}>
             {buildTimeContent(seg, timeFormat, context)}
-            <td class='fc-list-event-graphic'>
-              <span class='fc-list-event-dot' style={{
+            <td className='fc-list-event-graphic'>
+              <span className='fc-list-event-dot' style={{
                 backgroundColor: hookProps.event.backgroundColor
               }} />
             </td>
-            <td class='fc-list-event-title' ref={innerElRef}>
+            <td className='fc-list-event-title' ref={innerElRef}>
               {innerContent}
             </td>
           </tr>
@@ -128,7 +128,7 @@ function buildTimeContent(seg: Seg, timeFormat: DateFormatter, context: Componen
       return (
         <RenderHook name='allDay' hookProps={hookProps} defaultContent={renderAllDayInner}>
           {(rootElRef, classNames, innerElRef, innerContent) => (
-            <td class={[ 'fc-list-event-time' ].concat(classNames).join(' ')} ref={rootElRef}>
+            <td className={[ 'fc-list-event-time' ].concat(classNames).join(' ')} ref={rootElRef}>
               {innerContent}
             </td>
           )}
@@ -137,7 +137,7 @@ function buildTimeContent(seg: Seg, timeFormat: DateFormatter, context: Componen
 
     } else {
       return (
-        <td class='fc-list-event-time'>
+        <td className='fc-list-event-time'>
           {timeText}
         </td>
       )

packages/timegrid/src/TimeCol.tsx

@@ -51,8 +51,8 @@ export class TimeCol extends BaseComponent<TimeColProps> {
             {...dataAttrs}
             {...props.extraDataAttrs}
           >
-            <div class='fc-timegrid-col-origin'>
-              <div class='fc-timegrid-col-events'>
+            <div className='fc-timegrid-col-origin'>
+              <div className='fc-timegrid-col-events'>
                 {/* the Fragments scope the keys */}
                 <Fragment>
                   {this.renderFgSegs(
@@ -71,7 +71,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
                   )}
                 </Fragment>
               </div>
-              <div class='fc-timegrid-col-bg'>
+              <div className='fc-timegrid-col-bg'>
                 <Fragment>{this.renderFillSegs(props.businessHourSegs, 'non-business')}</Fragment>
                 <Fragment>{this.renderFillSegs(props.bgEventSegs, 'bg-event')}</Fragment>
                 <Fragment>{this.renderFillSegs(props.dateSelectionSegs, 'highlight')}</Fragment>
@@ -118,7 +118,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
 
       return (
         <div
-          class={'fc-timegrid-event-harness' + (seg.level > 0 ? ' fc-timegrid-event-harness-inset' : '')}
+          className={'fc-timegrid-event-harness' + (seg.level > 0 ? ' fc-timegrid-event-harness-inset' : '')}
           key={instanceId}
           style={{
             visibility: segIsInvisible[instanceId] ? 'hidden' : '',
@@ -155,7 +155,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
       let key = eventRange.instance ? eventRange.instance.instanceId : eventRange.def.defId
 
       return (
-        <div class='fc-timegrid-bg-harness' style={this.computeSegTopBottomCss(seg)}>
+        <div className='fc-timegrid-bg-harness' style={this.computeSegTopBottomCss(seg)}>
           {fillType === 'bg-event' ?
             <BgEvent
               key={key}
@@ -180,7 +180,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
         {(rootElRef, classNames, innerElRef, innerContent) => (
           <div
             ref={rootElRef}
-            class={[ 'fc-timegrid-now-indicator-line' ].concat(classNames).join(' ')}
+            className={[ 'fc-timegrid-now-indicator-line' ].concat(classNames).join(' ')}
             style={{ top: slatCoords.computeDateTop(seg.start, date) }}
           >{innerContent}</div>
         )}
@@ -249,7 +249,7 @@ class TimeColMisc extends BaseComponent<TimeColMiscProps> {
       <DayCellContent date={props.date} dateProfile={props.dateProfile} todayRange={props.todayRange} extraHookProps={props.extraHookProps}>
         {(innerElRef, innerContent) => (
           innerContent &&
-            <div class='fc-timegrid-col-misc' ref={innerElRef}>{innerContent}</div>
+            <div className='fc-timegrid-col-misc' ref={innerElRef}>{innerContent}</div>
         )}
       </DayCellContent>
     )

packages/timegrid/src/TimeCols.tsx

@@ -65,7 +65,7 @@ export class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
 
   render(props: TimeColsProps, state: TimeColsState) {
     return (
-      <div class='fc-timegrid-body' ref={props.rootElRef} style={{
+      <div className='fc-timegrid-body' ref={props.rootElRef} style={{
         // these props are important to give this wrapper correct dimensions for interactions
         // TODO: if we set it here, can we avoid giving to inner tables?
         width: props.clientWidth,

packages/timegrid/src/TimeColsContent.tsx

@@ -71,7 +71,7 @@ export class TimeColsContent extends BaseComponent<TimeColsContentProps> { // TO
     let eventResizeByRow = this.splitEventResize(props.eventResize, colCnt)
 
     return (
-      <div class='fc-timegrid-cols' ref={this.rootElRef}>
+      <div className='fc-timegrid-cols' ref={this.rootElRef}>
         <table style={{
           minWidth: props.tableMinWidth,
           width: props.clientWidth
@@ -80,7 +80,7 @@ export class TimeColsContent extends BaseComponent<TimeColsContentProps> { // TO
           <tbody>
             <tr>
               {props.axis &&
-                <td class='fc-timegrid-axis' />
+                <td className='fc-timegrid-axis' />
               }
               {props.cells.map((cell, i) => (
                 <TimeCol
@@ -112,7 +112,7 @@ export class TimeColsContent extends BaseComponent<TimeColsContentProps> { // TO
             {(rootElRef, classNames, innerElRef, innerContent) => (
               <div
                 ref={rootElRef}
-                class={[ 'fc-timegrid-now-indicator-arrow' ].concat(classNames).join(' ')}
+                className={[ 'fc-timegrid-now-indicator-arrow' ].concat(classNames).join(' ')}
                 style={{ top: nowIndicatorTop }}
               >{innerContent}</div>
             )}

packages/timegrid/src/TimeColsSlats.tsx

@@ -62,9 +62,9 @@ export class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
     let { theme } = context
 
     return (
-      <div class='fc-timegrid-slots' ref={this.rootElRef}>
+      <div className='fc-timegrid-slots' ref={this.rootElRef}>
         <table
-          class={theme.getClass('table')}
+          className={theme.getClass('table')}
           style={{
             minWidth: props.tableMinWidth,
             width: props.clientWidth,
@@ -216,8 +216,8 @@ export function TimeColsAxisCell(props: TimeSlatMeta) {
           return (
             <RenderHook name='slotLabel' hookProps={hookProps} defaultContent={renderInnerContent}>
               {(rootElRef, customClassNames, innerElRef, innerContent) => (
-                <td ref={rootElRef} class={classNames.concat(customClassNames).join(' ')} data-time={props.isoTimeStr}>
-                  <div class='fc-timegrid-slot-label-frame fc-scrollgrid-shrink-frame'>
+                <td ref={rootElRef} className={classNames.concat(customClassNames).join(' ')} data-time={props.isoTimeStr}>
+                  <div className='fc-timegrid-slot-label-frame fc-scrollgrid-shrink-frame'>
                     <span className='fc-timegrid-slot-label-cushion fc-scrollgrid-shrink-cushion' ref={innerElRef}>
                       {innerContent}
                     </span>

packages/timegrid/src/TimeColsView.tsx

@@ -73,9 +73,9 @@ export abstract class TimeColsView extends DateComponent<ViewProps> {
       })
       sections.push({
         outerContent: (
-          <tr class='fc-scrollgrid-section fc-scrollgrid-section-body'>
+          <tr className='fc-scrollgrid-section fc-scrollgrid-section-body'>
             <td
-              class={'fc-timegrid-divider fc-divider ' + context.theme.getClass('tableCellShaded')}
+              className={'fc-timegrid-divider fc-divider ' + context.theme.getClass('tableCellShaded')}
             />
           </tr>
         )
@@ -96,7 +96,7 @@ export abstract class TimeColsView extends DateComponent<ViewProps> {
     return (
       <ViewRoot viewSpec={context.viewSpec} elRef={this.rootElRef}>
         {(rootElRef, classNames) => (
-          <div class={[ 'fc-timegrid' ].concat(classNames).join(' ')} ref={rootElRef}>
+          <div className={[ 'fc-timegrid' ].concat(classNames).join(' ')} ref={rootElRef}>
             <SimpleScrollGrid
               forPrint={props.forPrint}
               liquid={!props.isHeightAuto}
@@ -164,10 +164,10 @@ export abstract class TimeColsView extends DateComponent<ViewProps> {
       })
       sections.push({
         outerContent: (
-          <tr class='fc-scrollgrid-section fc-scrollgrid-section-body'>
+          <tr className='fc-scrollgrid-section fc-scrollgrid-section-body'>
             <td
               colSpan={2}
-              class={'fc-timegrid-divider fc-divider ' + context.theme.getClass('tableCellShaded')}
+              className={'fc-timegrid-divider fc-divider ' + context.theme.getClass('tableCellShaded')}
             />
           </tr>
         )
@@ -205,7 +205,7 @@ export abstract class TimeColsView extends DateComponent<ViewProps> {
     return (
       <ViewRoot viewSpec={context.viewSpec} elRef={this.rootElRef}>
         {(rootElRef, classNames) => (
-          <div class={[ 'fc-timegrid' ].concat(classNames).join(' ')} ref={rootElRef}>
+          <div className={[ 'fc-timegrid' ].concat(classNames).join(' ')} ref={rootElRef}>
             <ScrollGrid
               forPrint={props.forPrint}
               liquid={!props.isHeightAuto}
@@ -261,12 +261,12 @@ export abstract class TimeColsView extends DateComponent<ViewProps> {
       return (
         <WeekNumberRoot date={range.start} defaultFormat={DEFAULT_WEEK_NUM_FORMAT}>
           {(rootElRef, classNames, innerElRef, innerContent) => (
-            <th ref={rootElRef} class={[
+            <th ref={rootElRef} className={[
               'fc-timegrid-axis',
               'fc-scrollgrid-shrink'
             ].concat(classNames).join(' ')}>
-              <div class='fc-timegrid-axis-frame fc-scrollgrid-shrink-frame fc-timegrid-axis-frame-liquid'>
-                <a class='fc-timegrid-axis-cushion fc-scrollgrid-shrink-cushion' data-navlink={navLinkData} ref={innerElRef}>
+              <div className='fc-timegrid-axis-frame fc-scrollgrid-shrink-frame fc-timegrid-axis-frame-liquid'>
+                <a className='fc-timegrid-axis-cushion fc-scrollgrid-shrink-cushion' data-navlink={navLinkData} ref={innerElRef}>
                   {innerContent}
                 </a>
               </div>
@@ -277,7 +277,7 @@ export abstract class TimeColsView extends DateComponent<ViewProps> {
     }
 
     return (
-      <th class='fc-timegrid-axis'></th>
+      <th className='fc-timegrid-axis'></th>
     )
   }
 
@@ -303,8 +303,8 @@ export abstract class TimeColsView extends DateComponent<ViewProps> {
             'fc-timegrid-axis',
             'fc-scrollgrid-shrink'
           ].concat(classNames).join(' ')}>
-            <div class={'fc-timegrid-axis-frame fc-scrollgrid-shrink-frame' + (rowHeight == null ? ' fc-timegrid-axis-frame-liquid' : '')} style={{ height: rowHeight }}>
-              <span class='fc-timegrid-axis-cushion fc-scrollgrid-shrink-cushion' ref={innerElRef}>
+            <div className={'fc-timegrid-axis-frame fc-scrollgrid-shrink-frame' + (rowHeight == null ? ' fc-timegrid-axis-frame-liquid' : '')} style={{ height: rowHeight }}>
+              <span className='fc-timegrid-axis-cushion fc-scrollgrid-shrink-cushion' ref={innerElRef}>
                 {innerContent}
               </span>
             </div>