We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Programatically add holidays in Gantt control


Here is my scenario :
I have a Calendar and I would like to dynamically add a holiday in the Gantt control each time I select a day in this Calendar.
I guess I should use Javascript but I can't find any documentation on ejGantt client-side programming. So I don't know which method to use to get ejGantt's holidays array and populate him with new records.

Can you show how to do this and can you link me, if possible, your components' client-side programming documentation ?

Thanks, Rémi.

3 Replies

MK Mahalakshmi Karthikeyan Syncfusion Team July 9, 2015 09:19 AM UTC

Hi Remi,

Thanks for using Syncfusion product.

For your kind information, we can choose a date from calendar and add it to the existing Gantt holiday collection. Please find the below code snippet to add holiday dynamically,

<form id="form1" runat="server" //...>

   <ej:Gantt ID="Gantt" runat="server" //…>


            <ej:Holiday Label="holiday" Day="02/28/2014" BackGround="cyan" />



    <ej:DatePicker ID="DatePicker" runat="server" ClientSideOnChange="dateChange"></ej:DatePicker>


<script type="text/javascript">

    function dateChange(args) {

        //Create Object for Gantt control

        var ganttobj = $("#Gantt").data("ejGantt"),

            //Create Object for Date picker

            dialogObj = $("#DatePicker").data("ejDatePicker"),

            date = args.value,

            holiday = {

                day: date,

                label: "Leave",

                background: "yellow"


        var newHoliday = ganttobj.model.holidays;


        //To reset Holiday Collection

        ganttobj.option("holidays", newHoliday, true);





As stated above we have created Gantt and DatePicker. In Datepicker change event we have added the selected date to the Gantt Holiday collection.

We have also prepared sample based on this and you can find the sample under the following location.


Please find our cliect side events documentation from the following link.


Please let us know if you need further assistance on this.



Rémi July 10, 2015 07:31 AM UTC

Thanks, it works as expected. I just have a performance problem especially with IE8, this error message popup "a script on this page is causing your web browser to run slowly".

I'm new with Javascript, here is the code I'm using, do you see a way to avoid this error ?

function DateSelected(sender, eventArgs) {
            var ganttobj = $("#<%=EjGantt.ClientID%>").data("ejGantt")
            var date = eventArgs._renderDay._date;
            var year = date[0];
            var month = date[1];
            var day = date[2];
            date = month + "/" + day + "/" + year;
            var newHoliday = ganttobj.model.holidays;
            var holiday = {
                day: date,
                label: "",
                background: "#ffff99"
            ganttobj.option("holidays", newHoliday, true);
            ganttobj.updateScheduleDates(ganttobj.model.scheduleStartDate, ganttobj.model.scheduleEndDate);

MK Mahalakshmi Karthikeyan Syncfusion Team July 13, 2015 04:24 PM UTC

Hi Remi,

Sorry for the inconvenience caused.

For your kind information, we can also reproduce the reported issue in IE8. Hence we have logged a issue report regarding this.

A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.


Please let us know if you require further assistance on this.


Mahalakshmi K.

Live Chat Icon For mobile
Up arrow icon