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.
- <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>
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.