| layout | post |
|---|---|
| title | Event markers in |
| description | Learn here all about Event markers in Syncfusion |
| platform | ej2-javascript |
| control | Event markers |
| publishingplatform | |
| documentation | ug |
| domainurl |
The event markers in the Gantt control is used to highlight the important events in a project. Event markers can be initialized by using the eventMarkers property, and you can define date and label for the event markers using the day and label properties. You can also customize it using the cssClass properties. The following code example shows how to add event markers in the Gantt control.
To highlight the days, inject the DayMarkers module into the Gantt control.
{% if page.publishingplatform == "typescript" %}
{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/gantt/event-markers-cs1/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/gantt/event-markers-cs1/index.html %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs1" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/gantt/event-markers-cs1/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/gantt/event-markers-cs1/index.html %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs1" %} {% endif %}
When eventMarkers are given in consecutive dates and zoomToFit is performed, they may overlap. To avoid this, you can update the position of the eventMarkers in the dataBound and actionComplete events so that they are not overlapped and are visible to read.
{% if page.publishingplatform == "typescript" %}
{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/gantt/event-markers-cs2/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/gantt/event-markers-cs2/index.html %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs2" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/gantt/event-markers-cs2/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/gantt/event-markers-cs2/index.html %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs2" %} {% endif %}
The EJ2 Gantt chart offers powerful features for customizing various labels position within the chart, enabling users to present relevant project information clearly. In EJ2 Gantt chart, labelSettings feature provides three key options for label customization: rightLabel, taskLabel, and leftLabel. Label positions can be initialized by using the labelSettings property.
The following code example shows how to add label positions in the gantt control.
{% if page.publishingplatform == "typescript" %}
{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/gantt/label-position-cs1/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/gantt/label-position-cs1/index.html %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/code-snippet/gantt/label-position-cs1" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/gantt/label-position-cs1/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/gantt/label-position-cs1/index.html %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/code-snippet/gantt/label-position-cs1" %} {% endif %}
In the EJ2 Gantt control, it is possible to customize multiple eventMarkers for the same date. However, by default, in such scenarios, these markers may overlap each other, resulting in visual clutter. To manage this, the following sample code demonstrates how to utilize the Gantt dataBound function to obtain label and arrow classes. It performs a loop action to fulfill the current requirement and to avoid overlapping. For further clarification, the code snippet below illustrates the flow of its implementation.
{% if page.publishingplatform == "typescript" %}
{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/gantt/eventmarkeroverlap-cs1/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/gantt/eventmarkeroverlap-cs1/index.html %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/code-snippet/gantt/eventmarkeroverlap-cs1" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/gantt/eventmarkeroverlap-cs1/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/gantt/eventmarkeroverlap-cs1/index.html %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/code-snippet/gantt/eventmarkeroverlap-cs1" %} {% endif %}