Change the color when two appointments overlap

[Cornel Amarandei]

Hi,

Is there possible to have a different color when two appointments overlaps? Please look in the attached photo at the blue marked zone: Amarandei Corneil have two appoitments that overlap, but the color in the header looks like they are not overlap.

Thanks,

Cornel.

Attachment: Different_color_d589ca9a.zip

[Karthigeyan Krishnamurthi]

Hi Cornel, 

 

Thank you for contacting Syncfusion support. 

 

We suspect that your requirement is to apply different color (other than appointment colors) in resource bar for both the overlapped appointments. Please conform it, so that we will prepare and provide the sample as per the requirement. If we misunderstand your requirement kindly revert us with more information which clearly depicts your requirement. 

 

Regards, 

Karthigeyan 

[Cornel Amarandei]

Hi Karthigeyan,

Yes, this is what I want. And the different color can be red.

Thanks,

Cornel.

[Karthigeyan Krishnamurthi]

Hi Cornel,  

 

Thanks for being patience. 

 

We have prepared the sample to apply different resource group bar color (red) for the overlapped appointments and sample can be download from the below location. 

http://www.syncfusion.com/downloads/support/forum/129114/ze/Sample-1209480067 

 

Kindly refer the below code example used in the sample. 

 

<Code> 

function onCreate() { // this function will be called on initial load and on view change 

        for (var ii = 0, res = this._tempResource[0].resourceSettings.dataSource; ii < res.length; ii++) { 

            var currentViewAppointments = this._appointmentCount(), filterData = []; 

            var appointments = new ej.DataManager(currentViewAppointments).executeLocal(new ej.Query().where("RoomId", ej.FilterOperators.equal, this._tempResource[0].resourceSettings.dataSource[ii].id)); 

            for (var i = 0, len = appointments.length; i < len; i++) { 

                var record = appointments[i]; 

                var predicate1 = ej.Predicate(this._appointmentSettings["startTime"], ej.FilterOperators.greaterThanOrEqual, new Date(record[this._appointmentSettings["startTime"]])).and(this._appointmentSettings["endTime"], ej.FilterOperators.lessThanOrEqual, new Date(record[this._appointmentSettings["endTime"]])); 

                var predicate2 = ej.Predicate(this._appointmentSettings["endTime"], ej.FilterOperators.greaterThanOrEqual, new Date(record[this._appointmentSettings["startTime"]])).and(this._appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, new Date(record[this._appointmentSettings["endTime"]])); 

                var predicate = predicate1.or(predicate2); 

                var filterData = new ej.DataManager(appointments).executeLocal(new ej.Query().where(predicate)); 

                if (filterData.length > 1) { 

                    var proxy = this; 

                    filterData.forEach(function (obj) { 

                        proxy.element.find(".e-categorybar").filter("div[id=categorybar_" + obj["Guid"] + "]").css({ background: "red" }); 

                    }); 

                } 

            } 

        } 

    } 

</Code> 

 

Regards, 

Karthigeyan 

[Cornel Amarandei]

Hi Karthigeyan,

Thanks for your information.

Your sample is working, but in my case it doesn't work, I don't know why. I attached a small project for that.

Ans second thing: I would need to have the red color only for the portion where the two appoinments overlap, and for the rest to have their original color. Is it possible that?

Thanks,

Cornel.

Attachment: ScheduleErrorSample_5cd62ac7.zip

[Karthigeyan Krishnamurthi]

Hi Cornel, 

 

Thanks for sharing your sample. 

 

When appointments are rendered using URL binding, appointments can’t be retrieved in Create event. We have modified your sample to apply red color only for the overlapped div as shown in the below image and kindly download the sample from the below link. 

http://www.syncfusion.com/downloads/support/forum/129114/ze/ScheduleErrorSample1816354021 

 

 

 

 

Kindly refer the below code example used in the sample. 

 

<Code> 

function onCreate() { // this function will be called on initial load  

        dataManager2 = ej.DataManager({ 

            url: '@Url.Action("GetProjectsData", "Projects")', 

            crossDomain: true 

        }); 

        dataManager2.adaptor = new ej.UrlAdaptor(); 

        var ds = dataManager2.executeQuery(new ej.Query()); 

        ds.done(function (e) { 

            grupColor(); 

        }); 

    } 

    function grupColor() { // this function will be called on initial load and action complete event 

        var obj = $("#ProjectsSchedule").ejSchedule("instance"); 

        for (var ii = 0, res = obj._tempResource[0].resourceSettings.dataSource; ii < res.length; ii++) { 

            var currentViewAppointments = appointmentCount(), filterData = []; 

            var appointments = new ej.DataManager(currentViewAppointments).executeLocal(new ej.Query().where("RoomId", ej.FilterOperators.equal, obj._tempResource[0].resourceSettings.dataSource[ii].id)); 

            for (var i = 0, len = appointments.length; i < len; i++) { 

                var record = appointments[i]; 

                var predicate1 = ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.greaterThanOrEqual, new Date(record[obj._appointmentSettings["startTime"]])).and(obj._appointmentSettings["endTime"], ej.FilterOperators.lessThanOrEqual, new Date(record[obj._appointmentSettings["endTime"]])); 

                var predicate2 = ej.Predicate(obj._appointmentSettings["endTime"], ej.FilterOperators.greaterThanOrEqual, new Date(record[obj._appointmentSettings["startTime"]])).and(obj._appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, new Date(record[obj._appointmentSettings["endTime"]])); 

                var predicate = predicate1.or(predicate2); 

                var filterData = new ej.DataManager(appointments).executeLocal(new ej.Query().where(predicate)); 

                if (filterData.length > 1) { 

                    var proxy = obj, days = []; 

                    filterData.forEach(function (objj) { 

                        days.push({ Guid: objj["Guid"], duration: Math.round((objj["EndTime"].getTime() - objj["StartTime"].getTime()) / (1000 * 60 * 60)) }); 

                    }); 

                    min = days[0].duration; 

                    for (var i = 1; i < days.length; i++) 

                        min = Math.min(days[i].duration, min); 

                    var minObj = new ej.DataManager(days).executeLocal(new ej.Query().where("duration", ej.FilterOperators.equal, min)); 

                    obj.element.find(".e-categorybar").filter("div[id=categorybar_" + minObj[0]["Guid"] + "]").css({ background: "red" }); 

                } 

            } 

        } 

    } 

    function appointmentCount() { 

        var obj = $("#ProjectsSchedule").ejSchedule("instance"); 

        var renderDate = (obj.model.orientation == "horizontal" && (obj.currentView() == "month" || obj._isCustomMonthView())) ? obj.monthDays : obj._dateRender, 

                appointments = obj._appointmentSort(obj._processed), 

                startDate = obj.currentView() == "agenda" ? new Date(new Date(obj.currentDate()).setHours(0, 0, 0)) : new Date(renderDate[0]), 

                endDate = obj.currentView() == "agenda" ? new Date(new Date(new Date(obj.currentDate()).setDate(startDate.getDate() + (obj.model.agendaViewSettings.daysInAgenda > 0 ? obj.model.agendaViewSettings.daysInAgenda - 1 : 0))).setHours(23, 59, 59)) : new Date(new Date(renderDate[renderDate.length - 1]).setHours(23, 59, 59)), 

                predicate = ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.greaterThanOrEqual, startDate).and(obj._appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, endDate), 

                newAppList = new ej.DataManager(appointments).executeLocal(new ej.Query().where(predicate)); 

        return newAppList; 

    } 

</Code> 

 

Regards, 

Karthigeyan 

[Cornel Amarandei]

Hi Karthigeyan,

Thanks for your information.

It works like it's now. But if you change the start date for the second appoinment, it doesn't work anymore. Please update the GetProjectsData method like this:

public JsonResult GetProjectsData()

        {

            var data = new List<ScheduleData>();

            data.Add(new ScheduleData() { AllDay = true, EndTime = DateTime.Now.AddDays(3), Id = "1", OwnerId = "1", Recurrence = false, RecurrenceRule = null, RoomId = "1", StartTime = DateTime.Now, Subject = "" });

            data.Add(new ScheduleData() { AllDay = true, EndTime = DateTime.Now.AddDays(2), Id = "2", OwnerId = "2", Recurrence = false, RecurrenceRule = null, RoomId = "1", StartTime = DateTime.Now.AddDays(-1), Subject = "" });

            return Json(data, JsonRequestBehavior.AllowGet);

        }

Regards,

Cornel.

[Karthigeyan Krishnamurthi]

Hi Cornel,    

   

Thanks for your update.   

   

In resource grouping sample, group color div elements will be rendered in the order of the resource’s appointment. For example, if Test employee1 has an appointment at March 10, 9-10AM and Test employee2 (2^nd) has an appointment at March 10, 9-10AM, then first owner’s (Test employee1) group color div will be rendered first (Z-index = 0) and above that second owner’s (Test employee2) group color div will be rendered (Z-index > 0).  Therefore, customized color Red for the second owner (Test employee2) appointment div is in visible. If Test employee1 appointment is at March 10, 9-10AM and Test employee2 appointment is at March 10, 9-11AM, then both group color div will be in visible. It is the default behavior and now your requirement is to apply Red color in the below highlighted portion. It is not possible to apply three different color for two div elements.   

 

Regards, 

Karthigeyan