Customization of RadCalender inside Scheduler

[Imran]

Hi,

I am using RadScheduler in my application.I am overriding different css classes to customize skin of Scheduler.The problem is , I want to place the Calendar(along with next previous day buttons) on right hand corner of Scheduler.I have done this and Today,next,previous and Select Date buttons move on the right hand side but If I click the "Select Date" then Calendar still opens on left hand corner.Please tell me how can I place all these buttons on right side so that Calendar opens on right hand side.

Thanks

[Imran]

I fixed that problem with a little tweak.....but I want to draw Telerik Team attention towards a little problem with Scheduler skin. All the elements in Scheduler have external css classes which can be easily overridden in pages. But the div that contain RadCalendar has some inline css styles which can't be overriden simply in style tag.I have changed that style using a javascript by first findgin the clientid of that div and then use it to add style to div.here is the javascript:

<script language="javascript" type="text/javascript">
                 vartablediv=document.getElementById("UCChannelGuideChart1_RadScheduler1_SelectedDateCalendar_wrapper");
                tablediv.style.left="600px";
</script>

It would be much easier if you also provide css class for the div that contain Calendar. But it has issues in IE.kindly look into it and tell me if had done something wrong or is there any better way to add css style to existing casses.


Thanks

[Alex Gyoshev]

Hello Imran,

The div that contains RadCalendar has the class rsDatePickerWrapper. The Calendar expands on the right, however, because we've assumed that the button won't be positioned right - I assume you wish to achieve something like a RTL mode, am I right?

The animation can be mirrored by adjusting the jQuery code in the following RadScheduler function:


    Telerik.Web.UI.RadScheduler.prototype._onDatePickerToggle = function (e)
    {
        var pickerOuterWrapper = $(this.get_element()).find("div.rsDatePickerWrapper");
        var pickerWrapper = pickerOuterWrapper.find("div:first");
        var pickerTable = pickerWrapper.find("table:first");
        var activator = $(this.get_element()).find("a.rsDatePickerActivator");

        var maxWidth = this.get_element().offsetWidth + "px";

        pickerWrapper
            .stop()
            .css({
                position: "absolute",
                overflow: "hidden",
                width: maxWidth})
            .css({
                width: pickerTable.width() + "px"});

        pickerOuterWrapper
            .css("overflow", "visible");

        if (!this._datePickerCalendarExpanded)
        {
            // Expand animation
            this.hideInlineForm();

            pickerWrapper.animate({height: pickerTable.height() + "px"}, 300, "easeInQuart");

            activator.addClass("rsDatePickerActivatorDown");
        }
        else
        {
            // Collapse animation
            pickerWrapper
                .animate({height: "0px"}, 300, "easeOutQuart",
                    function()
                    {
                        pickerOuterWrapper
                            .css("overflow", "hidden");
                    });

            activator.removeClass("rsDatePickerActivatorDown");
        }

        this._datePickerCalendarExpanded = !this._datePickerCalendarExpanded;

        if (e)
            e.preventDefault();

        return false;
    };

In the expand/collapse logic, you could change the animation in the way that you like the Calendar to appear.

Sincerely yours,
Alex
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.