Intersoft Community - WebScheduler - Webscheduler Event Color Enhancement

Webscheduler Event Color Enhancement

srikantweb007 — Thu, 12 Jan 2012 06:34:49 GMT

Thank you for your support.

Webscheduler Event Color Enhancement

yudi — Mon, 02 Jan 2012 21:44:32 GMT

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.

Webscheduler Event Color Enhancement

srikantweb007 — Fri, 30 Dec 2011 09:23:45 GMT

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

Now, I debuged the code and I found that "var div = evt.GetContentElement();" gave me a single div.

Don't know how to add three colors to a single div? That too have to be dynamic.

Looking forward to your response.

Webscheduler Event Color Enhancement

yudi — Fri, 30 Dec 2011 02:13:20 GMT

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.

Webscheduler Event Color Enhancement

srikantweb007 — Thu, 29 Dec 2011 02:56:53 GMT

I have a very specific requirement regarding my application that I am using the webscheduler for, specifically the month view mode.

Webscheduler seems to use the Resource color as the Event color "bar" when designating appointments.
Now I have a requirement like,

Each event has 3 parts.
Each part can be set to number of days.
The End Date will be calculated by adding the days for each part to the Begin Date
We want to display the line on the calendar covering the days in color blocks.

So for a event that is 1 day part1, 1 day part2 and 1 day part3 the schedule would show a band covering 3 days that is 1/3 color1; 1/3 color2; 1/3 color3;

So, main thing is that, can we have a single event with three different colors ?

Please tell me do I have any options or workarounds regarding this?