ColorPicker + Scheduler

[Karl Wilkens]

Hi,

I have already reviewed your templates example
http://demos.telerik.com/aspnet-ajax/scheduler/examples/templates/defaultcs.aspx



and this provides the result I want, EXCEPT that rather than using Stylesheets with pre-defined colors, I want to provide end users with the color picker for a new appointment and allow them to color code based on a ColorPicker choice.

I had thought that I would be able to do something like this in the TimeslotCreated event -

                If e.TimeSlot.Appointments.Count > 0 Then
                    e.TimeSlot.Appointments(0).BackColor = Drawing.Color.Blue
                End If

But even in this hard-coded example, the scheduler adheres to its stylesheet. I wanted to avoid developing a custom color picker/stylesheet and use the colorPicker. Is there any way to accomplish this? Thanks.

[Peter]

Hello Karl,

With Q1 2009, we use background images from sprites for the appointments' background. If you want to use custom color for the appointments, you have to remove the background image with the following css rules:

 <style type="text/css">
    .RadScheduler .rsAptContent,
    .RadScheduler .rsAptIn,
    .RadScheduler .rsAptMid,
    .RadScheduler .rsAptOut
    {
        background-image: none !important;
    }
    </style>

  
and set the BackColor property from code:

  protected void RadScheduler1_AppointmentDataBound(object sender, SchedulerEventArgs e)
    {
        e.Appointment.BackColor = System.Drawing.Color.Red;
    }

However, if you choose to use the BackColor property you will lose the rounded corners and the appointments will be slightly offset.

I suggest you use the predefined styles for the appoitments. With SP1 of Q1 2009 we provide 10 unique styles which you can use out-of-the-box:

rsCategoryBlue
rsCategoryDarkBlue
rsCategoryDarkGreen
rsCategoryDarkRed
rsCategoryGreen
rsCategoryOrange
rsCategoryPink
rsCategoryRed
rsCategoryViolet
rsCategoryYellow

For more styles, you will have to create your own background images



Best wishes,
Peter
the Telerik team

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

[scidec.net]

Is there any chance that this can be used with the webservice client population example?

Setting the BackColor or CssClass in the Provider after GetAppointments is called, seems to have no affect on the rendered appointmtent.

[Peter]

Hi scidec.net,

When using web services, the OnClientAppointmentCreated event occurs for each appointment in the visible range, so you can handle this event instead of AppointmentDataBound:

<script type="text/javascript">
            function OnClientAppointmentCreated(sender, eventArgs) {
                eventArgs.get_appointment().get_element().style.backgroundColor = "Red"
            }
        </script>

We have decided to expose a property with which to set the appointment's background color without any additional css styling. Untill this happens, please use the following css fix in addition to the one suggested in the above post:

 div.RadScheduler .rsAptContent,
    div.RadScheduler .rsAptIn,
    div.RadScheduler .rsAptMid,
    div.RadScheduler .rsAptOut
    {
        background:none;
        margin:0;
        padding: 0;
        rightright: auto;
        bottombottom: auto;
    }
    div.RadScheduler .rsAptOut
    {
        padding-bottom: 4px;
    }
    div.RadScheduler .rsAptMid
    {
        border: 1px solid gray;
        padding-bottom: 3px;
    }
    div.RadScheduler .rsAptContent,
    div.RadScheduler .rsAptIn
    {
        padding-bottom: 3px;
    }
    div.RadScheduler .rsTimelineView .rsAptResize
    {
        margin-top: -1px;
    }

Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Bruno]

Hi Peter,

For some reason my installation folder Skins > Common > Scheduler contains only 4 of the rsAppointment background images. I have Blue, Green, Orange and Red. The other 6 are missing. Can these be downloaded from anywhere?

Regards
Bruno
Bluegem Software

[Atanas Korchev]

Hi Bruno,

The rest of the CSS classes were introduced with the service pack release. You may consider upgrading.

Greetings,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Majd]

I'm trying to change the background color of the inlineedittemplate that would show when an appointment is clicked for editing. I applied a background to the DIV containing the template but still getting shadowed/tarnsperent color around the border from the inside (between the div and the border. Any suggestions?