[Solved] How do I add a Date Suffix to the ColumnHeaderDateFormat in a RadScheduler Timeline view?

[Karl]

I know how to format the column headers in a RadScheduler's TimeLineView so I can display the date in any format I choose, but cannot see how I would add the date suffix.

For example I want to show the short version of the days name, followed by the date of the month.
For today (Tuesday, 12th of March 2013) I want to display "Tue 12th" but all I can get is "Tue 12".

Personally, it makes no odds to me and I prefer just the "Tue 12" for a number of reasons, but the powers that be want the date suffix!

Anyone have any ideas?
Thanks,
Karl

[Boyan Dimitrov]

Hello Karl,

Since such date time formatting does not comes out of the box, I have prepared a custom client-side functionality that implements very similar scenario only for your RadScheduler Timeline View.
//markup code

<telerik:RadScheduler runat="server" ID="RadScheduler1" >
 </telerik:RadScheduler>

//JavaScript

function pageLoad() {
    $ = $telerik.$;
    var scheduler = $find('<%=RadScheduler1.ClientID %>');
    if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.TimelineView) {
        var headerColumns = $(".rsHorizontalHeaderTable th div");
        headerColumns.each(function (index, elem) {
            var date = $.trim($(elem).text());
            var indexOfSpace = date.indexOf(" ");
            var monthDay = date.substring(indexOfSpace + 1, date.lenght);
            if (monthDay == 1) {
                date += "st";
            }
            else if (monthDay == 2) {
                date += "nd";
            }
            else {
                date += "th";
            }
            $(elem).text(date);
        });
    }

}

Regards,
Boyan Dimitrov
the Telerik team

[shubhangi]

Where we can call this Function Page_load()

Thanks,

Shubh

[shubhangi]

Hi,

I have added function below for showing jobstatus in different color as per requirement. for that i have added some html code and showing as i want. 

  function page_load() {
            var $ = $telerik.$;
            var $header = $(".rsHeader h2");
            var result = '';
            result += '<Span class ="tab">' + "<u>Job Status:</u> " + '<Span class ="clr1"> ' + "Success" + '</span>' + '<Span class ="clr2">' + " Runing " + '</span>' + '<Span class ="clr3">' + " Failed " + '<span>' + '<Span class ="clr4">' + " Deleted " + '</span>' + '</span>';
            $header.html($header.html() + result)
        }

Code Behind:

   protected void Page_Load(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "page_load()", true);

        }

 But after inserting record the label are not visible means page is not loading again. Please give me any idea where we can call this function Page_Load(). You can see implemented changes in attachment image.

 

Thanks,

shubh

[Plamen]

Hello,

You can sue the  pageLoad() without the need to register it from the code behind.

Regards,
Plamen
Telerik

[shubhangi]

Hi..

I tried its not working after adding or updating schedule or after clicking on radscheduler calendar. Please help me in to this..

[Plamen]

Hi,

I am attaching the code that worked correctly at my side.

Regards,
Plamen
Telerik