| layout | title | description | platform | control | documentation | domainurl |
|---|---|---|---|---|---|---|
post |
Customization in Angular Calendar component | Syncfusion |
Learn here all about Customization in Syncfusion Angular Calendar component of Syncfusion Essential JS 2 and more. |
ej2-angular |
Customization |
ug |
Calendar allows you to customize the entire appearance by using the custom CSS and renderDayCell event to customize the each day cell.
This following section demonstrates how to disable, highlights the specific dates in the Calendar.
You can disable the weekends of every month in a Calendar by using the renderDayCell event. The isDisabled argument from this event allows you to define whether the date to be disabled or not.
Set
isDisabledto true to disable the date value.
The following example demonstrates how to disable weekends of every month.
{% tabs %} {% highlight ts tabtitle="app.component.ts" %} {% include code-snippet/calendar/getting-started-cs5/src/app.component.ts %} {% endhighlight %}
{% highlight ts tabtitle="main.ts" %} {% include code-snippet/calendar/getting-started-cs5/src/main.ts %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/samples/calendar/getting-started-cs5" %}
You can highlight the specific dates by adding the custom CSS or element to the day cell by using renderDayCell.
Below is the list of classes that provides the flexible way to customize the Calendar component.
| Class Name | Description |
|---|---|
| e-calendar | Applied to Calendar. |
| e-header | Applied to header. |
| e-title | Applied to title. |
| e-icon-container | Applied to previous and next icon container. |
| e-prev | Applied to previous icon. |
| e-next | Applied to next icon. |
| e-weekend | Applied to weekend dates. |
| e-other-month | Applied to other month dates. |
| e-day | Applied to each day cell. |
| e-selected | Applied to selected dates. |
| e-disabled | Applied to disabled dates. |
The following example highlights the world health date (7th April every year) and world forest day (21st March every year) in a Calendar by using the custom icon and tooltip.
{% tabs %} {% highlight ts tabtitle="app.component.ts" %} {% include code-snippet/calendar/highlight-cs1/src/app.component.ts %} {% endhighlight %}
{% highlight ts tabtitle="style.css" %} {% include code-snippet/calendar/highlight-cs1/src/style.css %} {% endhighlight %} {% highlight ts tabtitle="main.ts" %} {% include code-snippet/calendar/highlight-cs1/src/main.ts %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/samples/calendar/highlight-cs1" %}
You can highlight the weekends of every month in a Calendar by using the renderDayCell event. The following example demonstrates how to highlights the weekends of every month.
{% tabs %} {% highlight ts tabtitle="app.component.ts" %} {% include code-snippet/calendar/highlight-weekend-cs1/src/app.component.ts %} {% endhighlight %}
{% highlight ts tabtitle="main.ts" %} {% include code-snippet/calendar/highlight-weekend-cs1/src/main.ts %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/samples/calendar/highlight-weekend-cs1" %}