How to use cellTemplate in calendarOptions of devextreme react DateBox?

40 Views Asked by At

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.

Edit devextreme-react-datebox-with-celltemplate

0

There are 0 best solutions below