React Calendar - Customize Cell Appearance
For Angular, AngularJS, and Knockout apps, DevExtreme provides the dxTemplate markup component. The following code shows how to use dxTemplate to define templates for cells.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import Calendar from 'devextreme-react/calendar';
- const date = new Date();
- function CustomCell(cellInfo, index) {
- return (
- <span style={{ fontStyle: index === 0 || index === 6 ? 'italic' : 'normal' }}>
- { cellInfo.text }
- </span>
- );
- }
- class App extends React.Component {
- render() {
- return (
- <Calendar
- defaultValue={date}
- cellRender={CustomCell} />
- );
- }
- }
- export default App;
If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for cells. To apply this markup, use the cellTemplate callback function as shown in the following code.
- $(function () {
- $("#calendarContainer").dxCalendar({
- value: new Date(),
- cellTemplate: function (cellData, cellIndex, cellElement) {
- const italic = $("<span>").css('font-style', 'italic')
- .text(cellData.text);
- const normal = $("<span>").text(cellData.text);
- return (cellIndex == 0 || cellIndex == 6) ? italic : normal;
- }
- });
- });
In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the 3rd-Party Template Engines article.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.