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

Change the color when two appointments overlap

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

7 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team March 1, 2017 11:18 AM UTC

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 



CA Cornel Amarandei March 1, 2017 11:32 AM UTC

Hi Karthigeyan,

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

Thanks,
Cornel.


KK Karthigeyan Krishnamurthi Syncfusion Team March 6, 2017 02:11 PM UTC

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



CA Cornel Amarandei March 7, 2017 09:07 AM UTC

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


KK Karthigeyan Krishnamurthi Syncfusion Team March 8, 2017 01:23 PM UTC

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



CA Cornel Amarandei March 9, 2017 10:48 AM UTC

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.


KK Karthigeyan Krishnamurthi Syncfusion Team March 10, 2017 08:41 AM UTC

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 (2nd) 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 


Loader.
Up arrow icon