ColorPicker + Scheduler

7 posts, 0 answers
  1. Karl Wilkens
    Karl Wilkens avatar
    206 posts
    Member since:
    Oct 2012

    Posted 05 Apr 2009 Link to this post

    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.
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 08 Apr 2009 Link to this post

    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-imagenone !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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. scidec.net
    scidec.net avatar
    4 posts
    Member since:
    Jul 2007

    Posted 16 Apr 2009 Link to this post

    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.
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 20 Apr 2009 Link to this post

    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;  
            rightrightauto;  
            bottombottomauto;  
        }  
        div.RadScheduler .rsAptOut  
        {  
            padding-bottom4px;  
        }  
        div.RadScheduler .rsAptMid  
        {  
            border1px solid gray;  
            padding-bottom3px;  
        }  
        div.RadScheduler .rsAptContent,  
        div.RadScheduler .rsAptIn  
        {  
            padding-bottom3px;  
        }  
        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.
  6. Bruno
    Bruno avatar
    16 posts
    Member since:
    May 2008

    Posted 05 May 2009 Link to this post

    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
  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 05 May 2009 Link to this post

    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.
  8. Majd
    Majd avatar
    2 posts
    Member since:
    May 2009

    Posted 21 May 2009 Link to this post

    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?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017