Programatically add holidays in Gantt control

[Rémi]

Hi,

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.

[Mahalakshmi Karthikeyan]

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" //…>

        <Holidays>

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

        </Holidays>

    </ej:Gantt>

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

</form>

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

        newHoliday.push(holiday);

        //To reset Holiday Collection

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

        ganttobj.updateScheduleDates(ganttobj.model.scheduleStartDate,               

                                     ganttobj.model.scheduleEndDate);

    }

</script>

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.

Sample

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

http://helpjs.syncfusion.com/js/api/ejgantt#events

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

Regards,

Mahalakshmi.

[Rémi]

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"
            };
            newHoliday.push(holiday);
            ganttobj.option("holidays", newHoliday, true);
            ganttobj.updateScheduleDates(ganttobj.model.scheduleStartDate, ganttobj.model.scheduleEndDate);
        };

[Mahalakshmi Karthikeyan]

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.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

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

Regards,

Mahalakshmi K.