By default, the color of WebScheduler’s event is based on its resource. However, you can try to modify the applied style of the event content element as shown in FitnessCenterWebScheduler.aspx sample (the local version of this sample is available in WebSchedulerSamples project; and the live sample version of this sample can be accessed in http://live.intersoftpt.com/cs/WebScheduler/ FitnessCenterWebScheduler.aspx).

Try to scroll down the timeline view and find the events of Claire, Harry, and Paul. The events have a custom image attached into the event content element. For more detail information, please check the sample code.

Look forward to hearing back from you whether this helps or not.

Hi Yudi,

Thanks for the reply.

I have been looking into the code given in live sample version and I have been trying few things like, in the EventBound javascript function I added color to the event bar like this :-

function WebScheduler1_EventBound(controlId, evt) {

            var s = ISGetObject(controlId);
            var arr = new ISArray();
            var childArray = new Array();
            var startInfoArray = new Array();
            var endInfoArray = new Array();
            var year = 0;
            var month = 0;
            var day = 0;
            var sHour = 0;
            var sMin = 0;
            var eHour = 0;
            var eMin = 0;
            if (s.ViewSettings.SelectedViewMode == "Month") {
                var currentWeekDay = evt.StartTime.getDay();
                startInfoArray = evt.StartTimeInfo.split("|");
                endInfoArray = evt.EndTimeInfo.split("|");
                var sMonth = 0;
                var eMonth = 0;
                sMonth = parseInt(startInfoArray[1], 10);
                eMonth = parseInt(endInfoArray[1], 10);
                var arr2 = new ISArray();
                var endDay1 = parseInt(endInfoArray[0], 10);
                var endMon1 = eMonth;
                var endyear1 = parseInt(endInfoArray[2], 10);
                var vType = parseInt(evt.OriginalObject.ResourceID, 10);
                if (vType == 1) {
                    arr2.Add(new WebSchedulerDateRange(new Date(startInfoArray[2], sMonth, startInfoArray[0], startInfoArray[3], startInfoArray[4], 0), new Date(endyear1, endMon1, endDay1, endInfoArray[3], endInfoArray[4], 0), 2, "DateTime"));
                    var elements2 = s.GetCellElements(arr2);
                    var ScheduledColor = "#FF0000"

                    var div = evt.GetContentElement();          //** Event bar div
                    div.style.backgroundColor = ScheduledColor; //** Set color to div
                }}}

Yes, the evt.GetContentElement() method will returns a single div of HTML element.

It seems that the approach to set the background image property as shown in the FitnessCenterWebScheduler.aspx sample file doesn’t fit your scenario very well. By default, the WebScheduler doesn’t support to have a single event with three different colors. I may be able to help submitting this scenario as feature request to the development team.

Hope this helps.

Thank you for your support.