Hi Srikant,

     Unfortunatelly, we do not support this feature yet. However, we only can set the color for all the days. So, it will set all the header of days style.

      We can use WebScheduler property for this, the property is DayHeaderStyle. However, I have encountered a minor issue for this. And I have forwarded this to our Development Team.

      I hope it helps. Thank you and have a nice day.

Best Regards,

Andi Santoso

Hi Andi,

     Thanks for your replay.  You mean I can not achieve this functionality in current scenario.

Please let me know if there is any work around for this or any hotfix can solve this problem.

Thanks and Regards

Srikant

Hi Srikant,

     What I meant is, at this moment, our WebScheduler only can edit the color for all days header. We cannot just set a different color for one particular day.

     Thank you and have a nice day.

Best Regards,

Andi Santoso

Just got this from support and this works except for Month view where the 9th day is shown twice (current month and next month) and both get shaded. Asked another question if there is a way to indicate what month each 9th block is for or some difference between the blocks.

Hi,

For such scenario, you could use the OnAfterRenderView client side event handler in order to modify the header day element based on certain condition. Here is the snippet in order to modify the first date in every view to have a black background color with white color:

function WebScheduler1_OnAfterRenderView(controlId, viewMode)
{
    var sched = ISGetObject(controlId);
    var headerElem = null;
    var type = "";
   
    //Setting all date 1 to have black background color with white text
    switch (viewMode)
    {
        case "Day":
            headerElem = sched.GetDayDayHeader().getElementsByTagName('td');
            type = 'DayHeader;';      
            break;
        case "Week":
            headerElem = sched.GetWeekDayHeader().getElementsByTagName('td');
            type = 'DayHeader;';
            break;
        case "Month":
            headerElem = sched.GetSchedulerTableFrame().getElementsByTagName('td');
            type = 'MonthInboundDateHeader;MonthOutboundDateHeader;';
            break;
        case "Quarter":
            headerElem = sched.GetSchedulerTableFrame().getElementsByTagName('td');
            type = 'YearDayOfWeek;';
            break;
        case "Year":
            headerElem = sched.GetSchedulerTableFrame().getElementsByTagName('td');
            type = 'YearDayOfWeek;';
            break;
    }

    for (var i = 0; i < headerElem.length; i )
    {
        if (type.indexOf(headerElem[i].getAttribute('type') ";") != -1 &&
                    headerElem[i].getAttribute('d') == '1')
        {
            headerElem[i].style.backgroundImage = "none";
            headerElem[i].style.backgroundColor = "Black";
            headerElem[i].style.color = "White";
        }
    }
}

The snippet will modify the header color for all the date in month view, because the matching type in month view is set to 'MonthInboundDateHeader;MonthOutboundDateHeader;'

If you prefer only the current month is modified, please set the type in the month view to MonthInboundDateHeader;

Hi Glenn,

Thanks for the response. It is working fine in month view. Can you please suggest a solutions for Quarter view and Year view.

Thanks

Srikant

Hi Glenn,

Thanks for the response. Please ignore my previous post. I had found out a work wround to achieve the header color for quarter and year view.

Thanks

Srikant

A user has created a new thread, Day header color changes on mouse over, in which he show a flaw with the provided snippet on Week view and Month view.

The thread also has a modified snippet in order to overcome the flaw.

Hi Glenn,

    Thanks for your response. It is working fine for the day header color (on mouse over)

The snippet you provide there creating one more issue. In Week view when some one clicks on the day header the application redirected to Day view. But agter I applied the snippet , I got the redirection error.

When i clicked on the day header it throws an js error.  Please find the attachment.

Can you please help on this.

Thanks

Srikant

The issue could be replicated in my environment. This issue is caused because the clicked area is the newly added DIV, in order to resolve the issue, we will need to invoke the click event of the original area when we click the new DIV. You will need to add a new onclick event in the newly created DIV. Here is the snippet:

Listener.Add(headerElem[i], "onclick", ClickEventHandlerHeader, headerElem[i]);

During this click event handler, you will need to invoke the click for the original element, original snippet from this post:

var inProgress = false;
function ClickEventHandlerHeader()
{
    if (!inProgress)
    {
        inProgress = true;
        if (this.dispatchEvent)
        {
            var e = document.createEvent("MouseEvents");

            e.initEvent("click", true, true);
            this.dispatchEvent(e);
        }
        else
        {
            this.click();
        }
    }
    inProgress = false;
}

Hi Glenn,

   Thanks for the response. It is working. Can you please tell me how to prevent the click from the user. I mean when user clicked on the header no need to redirect them for newly created div.

Thanks

Srikant

Did you mean when user click on the modified header, the user will not be redirected to the day view? If so in the new DIV click event handler you will need to abort the click. Here is the snippet:

function ClickEventHandlerHeader(headerElem)
{    
    event.returnValue = false;
    event.cancelBubble = true;   
}