Display S M T W T F S in scheduler

[Mark]

I would like to display the week view column headers as "S M T W T F S" (rather than "Sun Mon Tue Wed Thu Fri Sat" ) in the RadScheduler but I can't find a way to do it.

As far as I know there is no custom date format string I can use (a single 'd' returns the full date, whereas 'ddd' returns Mon, Tue, Wed... etc)

I've found the DateTimeInfo.AbbreviatedDayNames property which seems to control this list of strings, but I can't see a way to persuade the RadScheduler to use my own AbbreviatedDayNames.

Can anyone help?

[T. Tsonev]

Hello Mark,

We do not support header templates just yet, but we can workaround the problem with some JavaScript:

function pageLoad()
{
    var columnHeaderRow = $telerik.getElementByClassName(document.body, "rsColumnHeaderRow", "tr");
    if (!columnHeaderRow) return;
    for (var i = 0; i < columnHeaderRow.cells.length; i++)
    {
        var headerText = columnHeaderRow.cells[i].innerHTML;
        headerText = headerText.replace(/Mon/, "M");
        headerText = headerText.replace(/Tue/, "T");
        headerText = headerText.replace(/Wed/, "W");
        headerText = headerText.replace(/Thu/, "T");
        headerText = headerText.replace(/Fri/, "F");
        headerText = headerText.replace(/Sat/, "S");
        headerText = headerText.replace(/Sun/, "S");

        columnHeaderRow.cells[i].innerHTML = headerText;
    }
}

Regards,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mark]

Thanks for your help - however I am using the GroupBy property so there are multiple rsColumnHeaderRow elements. Is there a way to iterate through all of them in order to find the correct one ?

[T. Tsonev]

Hi Mark,

Sure thing:

function getAllElementsByClassName(className, tagName)
{
    var children = document.body.getElementsByTagName(tagName ? tagName : "*");
    var elements = [];
    var child;

    var length = children.length;
    for (var i = 0; i < length; i++)
    {
        child = children[i];

        if (Sys.UI.DomElement.containsCssClass(child, className))
        {
            elements.push(child);
        }
    }

    return elements;
}

function pageLoad()
{
    var columnHeaderRows = getAllElementsByClassName("rsColumnHeaderRow", "tr");

    for (var headerIndex = 0; headerIndex < columnHeaderRows.length; headerIndex++)
    {
        var row = columnHeaderRows[headerIndex];
        for (var i = 0; i < row.cells.length; i++)
        {
            var headerText = row.cells[i].innerHTML;
            headerText = headerText.replace(/Mon/, "M");
            headerText = headerText.replace(/Tue/, "T");
            headerText = headerText.replace(/Wed/, "W");
            headerText = headerText.replace(/Thu/, "T");
            headerText = headerText.replace(/Fri/, "F");
            headerText = headerText.replace(/Sat/, "S");
            headerText = headerText.replace(/Sun/, "S");

            row.cells[i].innerHTML = headerText;
        }
    }
}

Greetings,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mark]

Cheers - that did the trick.
For info I squashed the code down to the following -

function fixHeaders()
{ 
    var children = document.body.getElementsByTagName("tr" ? "tr" : "*"); 
    var child; 
    var length = children.length; 
    for (var i = 0; i < length; i++) 
   { 
        child = children[i]; 
        if (Sys.UI.DomElement.containsCssClass(child, "rsColumnHeaderRow")) 
        { 
            for (var j = 0; j < child.cells.length; j++) 
            { 
                var headerText = child.cells[j].innerHTML; 
                headerText = headerText.replace(/Mon/, "M"); 
                headerText = headerText.replace(/Tue/, "T"); 
                headerText = headerText.replace(/Wed/, "W"); 
                headerText = headerText.replace(/Thu/, "T"); 
                headerText = headerText.replace(/Fri/, "F"); 
                headerText = headerText.replace(/Sat/, "S"); 
                headerText = headerText.replace(/Sun/, "S"); 
                child.cells[j].innerHTML = headerText; 
            } 
        } 
    }
}