DevExtreme Angular - 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.
- <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
- ],
- // ...
- })
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) {
- var italic = $("<span>").css('font-style', 'italic')
- .text(cellData.text);
- var normal = $("<span>").text(cellData.text);
- return (cellIndex == 0 || cellIndex == 6) ? italic : normal;
- }
- });
- });
In addition, you can use a 3rd-party template engine to customize widget 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.