How to change the background of a timeslot container ?

[Carlos]

Hi I have a problem I need to change the background color of a timeslot container , when i click over it and is not assigned to a appointment ?

How can i do that ,pleasse help me?

[Shinu]

Hello Carlos,


You can do it in 'OnClientTimeSlotClick' client side event of RadScheduler.

JavaScript:

<script type="text/javascript">
    function OnClientTimeSlotClick(sender, args) {
        args.get_targetSlot().get_domElement().style.backgroundColor = "silver";
    }
</script>

-Shinu.

[Carlos]

OK ,thanks i got it  !!!!

Now if i want that when i select another timeslot the previously selected return to normal ?
I do something like this but i dont now,not always work sometimes i have 3 timeslot with silver background color.

PreviousSlotXCoordinate_value.value = eventArgs._domEvent.clientX;

PreviousSlotYCoordinate_value.value = eventArgs._domEvent.clientY;

//Get local controls to store the coordinates
var PreviousSlotXCoordinate_value = $get('<%=PreviousSlotXCoordinate.ClientID %>');

var PreviousSlotYCoordinate_value = $get('<%=PreviousSlotYCoordinate.ClientID %>');

  

//Change the bgcolor

eventArgs.get_targetSlot().get_domElement().style.backgroundColor = "Yellow";

  

//if previously selected some timeslot

if (PreviousSlotXCoordinate_value.value != '') 

{

sender._getCellFromCoordinates(parseInt(PreviousSlotXCoordinate_value.value), parseInt(PreviousSlotYCoordinate_value.value)).bgColor = ''

}

//I store the selected row coordinates to check later

PreviousSlotXCoordinate_value.value = eventArgs._domEvent.clientX;

PreviousSlotYCoordinate_value.value = eventArgs._domEvent.clientY;

[Veronica]

Hi Carlos,

One simple solution is to iterate through all timeSlots and clear the background in the OnClientTimeSlotClick event via jQuery. After that you can simply set the backround to the last clicked timeSlot as you did before. Here's the code:

function OnClientTimeSlotClick(sender, args) {
            var $ = $telerik.$;
            $(".rsWrap").each(function(i) {
                this.style.backgroundColor = "white";
            });
            args.get_targetSlot().get_domElement().style.backgroundColor = "silver";
        }

Hope this helps.

Kind regards,
Veronica Milcheva
the Telerik team

[Carlos]

Hi veronica ,thanks for your answer unfortunately the code don't work,the scheduler always maintain 2 or more timeslot´s with color "yellow" and i need only one to be selected and identified with that color.

the attachment is an image of what my scheduler do.

Thanks

[Veronica]

Hi Carlos,

The example code worked but only for MonthView. The reason not to work in other views is that .rsWrap class does not renders when you don't have appointments.

So, here's the modificated code:

function OnClientTimeSlotClick(sender, args) {
            var $ = $telerik.$;
            $(".rsContentTable .rsWrap, .rsContentTable td").each(function(i) {
                this.style.backgroundColor = "white";
            });
            args.get_targetSlot().get_domElement().style.backgroundColor = "yellow";
        }

Hope this helps.

All the best,
Veronica Milcheva
the Telerik team

[Carlos]

Hello, i apply this solution and works great, but now i have a new question, i block some timeslot´s setting this style from codebehind in the TimeSlot_created event :

ASPX.

.Disabled

{

 

background: gray

;

 

 

 

 

cursor: not-allowed

;

 

 

}

 

 

 

.Disabled.rsAptCreate

 

 

{

 

background: gray !important

;

 

 

}

VB.

 

e.TimeSlot.CssClass =

"Disabled"

when i run the function that put all timeslots backgrounds to white include the timeslots that are blocked and i want to mantain the gray color for the blocked timeslots.

I include a attachment with an image of how look my Schedule went a timeslot is blocked.

What can i do ? ,thanks

[Veronica]

Hi Carlos,

Please take a look at this Knowledge Base article and let me know if it helps.

Best wishes,
Veronica Milcheva
the Telerik team

[NEX]

args.get_targetSlot().get_domElement().style.backgroundColor = "silver";

This is not working with build 2011.2.915.35 in the Week view.

[Princy]

Hi Alfred,

I tried in to reproduce the problem in 2011, 2, 915, 35 version, but no avail. Please take a look into the following code which worked as expected for me.

ASPX:

<telerik:RadScheduler ID="RadScheduler2" runat="server"   DataEndField="End"  DataKeyField="ID" OnClientTimeSlotClick="OnClientTimeSlotClick"  DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurranceParentID" DataReminderField="Reminder" DataSourceID="SqlDataSource1" DataStartField="Start" DataSubjectField="Subject" >
</telerik:RadScheduler>

JS:

<script type="text/javascript">
 function OnClientTimeSlotClick(sender, args)
  {
        args.get_targetSlot().get_domElement().style.backgroundColor = "silver";
  }
</script>

Please elaborate your scenario if it doesn't helps.

Thanks,
Princy.

[NEX]

Could not get your code to work but I did get this work. Changing the style:

timeSlot.get_domElement().className = "selected";