Fixed size of appts

[Piyush Bhatt]

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;  
        }        

[Simon]

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

[Piyush Bhatt]

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

Thanks,
pIyush