JavaScript/jQuery 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.
Angular
<dx-calendar [(value)]="currentDate"> <span *dxTemplate="let cellData of 'cell'; let i = index" [style.font-style]="i == 0 || i == 6 ? 'italic' : 'normal'"> {{cellData.text}} </span> </dx-calendar>
import { DxCalendarModule } from "devextreme-angular"; // ... export class AppComponent { currentDate: Date = new Date(); } @NgModule({ imports: [ // ... DxCalendarModule ], // ... })
Vue
<template> <DxCalendar :value="date" cell-template="cell" > <template #cell="{ data: cell, index }"> <span :style="{ fontStyle: index === 0 || index === 6 ? 'italic' : 'normal' }"> {{ cell.text }} </span> </template> </DxCalendar> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxCalendar from 'devextreme-vue/calendar'; export default { components: { DxCalendar }, data() { return { date: new Date() } } } </script>
React
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.