Fixed size of appts

3 posts, 1 answers
  1. Piyush Bhatt
    Piyush Bhatt avatar
    166 posts
    Member since:
    Nov 2007

    Posted 09 Jul 2008 Link to this post

    I had earlier asked about the fixed size of appts and I was given following CSS by your support team to display appts as a fixed size.

    The problem now I notice is - when there is an appt at 8 AM upto 10 AM, it hides the appt at 9 AM beneath it and does not display.

    Can you please help, how to resolve this?

    Thanks,
    Piyush

            .RadScheduler_Outlook .rsDayView .rsRow .rsCell .rsWrap .rsApt  
            {         
                margin-right: 10px;  
                width: 200px !important;  
                left: auto !important;  
                position: relative !important;  
                float: left !important;  
            }        
  2. Answer
    Simon
    Admin
    Simon avatar
    2281 posts

    Posted 11 Jul 2008 Link to this post

    Hi Piyush,

    Unfortunately fixed-size Appointments cannot be achieved only with CSS.

    On the other hand, this could be achieved with server-side code only. A limitation of this approach is that the maximum width of Appointments should be defined in percentage and not in pixels.

    In any case, below is the implementation of the approach for you to examine it.

    Hook on the AppointmentCreated server-side event of RadScheduler and implement it as follows:

        private const int MAX_PERCENTAGE_APPOINTMENT_WIDTH = 10; 
        private bool _lastAppIsModified = false
     
        protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e) 
        { 
            double widthPercentage = e.Appointment.AppointmentControls[0].Width.Value; 
            int leftPercentage =  
                Int32.Parse(e.Appointment.AppointmentControls[0].Style["left"].Replace("%", String.Empty)); 
     
            int widthLeftRatio = (int) Math.Ceiling(leftPercentage / widthPercentage); 
     
            if (leftPercentage == 0) 
            { 
                _lastAppIsModified = false
            } 
     
            if (widthPercentage > MAX_PERCENTAGE_APPOINTMENT_WIDTH) 
            { 
                if ((leftPercentage == 0) || 
                    ((leftPercentage > 0) && (_lastAppIsModified == true))) 
                { 
                    Unit width = Unit.Percentage(MAX_PERCENTAGE_APPOINTMENT_WIDTH); 
     
                    e.Appointment.AppointmentControls[0].Width = width; 
     
                    string leftValue = (MAX_PERCENTAGE_APPOINTMENT_WIDTH * widthLeftRatio).ToString() + "%"
     
                    e.Appointment.AppointmentControls[0].Style["left"] = leftValue; 
     
                    _lastAppIsModified = true
                } 
            } 
        } 

    The MAX_PERCENTAGE_APPOINTMENT_WIDTH variable lets you define the maximum width of Appointments in percentage.

    The second variable is just a helper for the function below to catch the final Appointment in a row of Appointments with width, less than the maximum defined.

    Finally, remove the CSS you were previously using to fix the width.

    I hope this you will find useful.


    Greetings,
    Simon
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Piyush Bhatt
    Piyush Bhatt avatar
    166 posts
    Member since:
    Nov 2007

    Posted 14 Jul 2008 Link to this post

    This is great solution man. I really appreciate this. this is going to make our release smooth.

    Thanks,
    pIyush
Back to Top