How to use cellTemplate in calendarOptions of devextreme react DateBox?

Question

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.

hokwanhung · Accepted Answer · 2024-07-22 09:57:46Z

0

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;
}

edited Jul 22, 2024 at 9:57

answered Jul 22, 2024 at 9:51

hokwanhung

7091 gold badge9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use cellTemplate in calendarOptions of devextreme react DateBox?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related