如何在devextreme React DateBox的calendarOptions中使用cellTemplate？

Question

看起来 devextreme-react 上

cellTemplate

的

demo

只是

cellRender

的另一种用法。

虽然有人提到

cellComponent

和

cellRender

都只是：

React 中指定的 cellTemplate 属性的别名。

当我尝试在日历中自定义

DateBox

的单元格时，它不起作用（例如，因为我想将周末的

color

更改为

red

）：

import React from 'react';
import DateBox from 'devextreme-react/date-box';
import moment from 'moment';

const CustomDateBox = () => {
  const isWeekend = (date) => [0, 6].includes(moment(date).day());

  const renderCell = (cellData) => (
    <div style={{ color: isWeekend(cellData.date) ? 'red' : 'inherit' }}>
      {cellData.text}
    </div>
  );

  return (
    <DateBox
      labelMode="hidden"
      openOnFieldClick={true}
      hoverStateEnabled={false}
      calendarOptions={{
        cellTemplate: renderCell
      }}
    />
  );
};

export default CustomDateBox;

它返回一个没有上下文的木板日历，即使“单元格”仍然可单击。

Answer 1

如果有人需要快速解决此问题，我已经设法使用普通的

JavaScript

来临时处理样式问题：

// ...other functions

const CustomCell = (itemData: CellTemplateData, itemIndex: number, 
  itemElement: HTMLElement) => {
  if (isWeekend(itemData.date)) {
    itemElement.classList.add("custom-text-color-red");
  } else {
    itemElement.classList.add("custom-text-color-green");
  }

  // REMARK: This displays the cell as it defines in devextreme.
  return itemData.text;
}