It appears that the demo on devextreme-react
for cellTemplate
is just another use of cellRender
.
Although it was mentioned that both cellComponent
and cellRender
are just:
An alias for the cellTemplate property specified in React.
It does not work when I tried to customize the cells in the calendar for DateBox
(for example, as I want to change the color
of weekends to 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;
And it returns a plank calendar with no context in it, even though the "cells" are still clickable.
In case anyone needs a quick solution with this issue, I have managed to use plain JavaScript
to temporarily handle the styling issue:
// ...other functions
const renderCell = (cellData: CellTemplateData, cellIndex: number,
cellElement: HTMLElement) => {
if (isWeekend(cellData.date)) {
cellElement.classList.add("custom-text-color-red");
} else {
cellElement.classList.add("custom-text-color-green");
}
// REMARK: This displays the cell well as it is defined in devextreme.
return cellData.text;
}