Displaying items per day in MonthView with no restriction

[Daniel Tharp]

Is it possible to have no restriction on the number of items per day in the MonthView. Right now you have to set it to a number and it will create more space for the additional items but I would like this to be a dynamic process so I dont have to limit the number of items per day using the MonthVisibleAppointmentsPerDay.

thanks,

chad

[Peter]

Hi Daniel,



Here is one possible solution to this question:

(The code has been editted and the redundant switch construct removed.) 

int[] MaxCount = { 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2 };
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void RadScheduler1_AppointmentDataBound(object sender, Telerik.Web.UI.SchedulerEventArgs e)
    {
        DateTime startOfDay = e.Appointment.Start.Date;
        DateTime endOfDay = e.Appointment.Start.Date.AddHours(24);
        int NumberOfApp = RadScheduler1.Appointments.GetAppointmentsInRange(startOfDay, endOfDay).Count;
        int AppMonth = e.Appointment.Start.Month;

        if (NumberOfApp > MaxCount[AppMonth - 1])
        {
            MaxCount[AppMonth - 1] = NumberOfApp;
        }
    }
    protected void RadScheduler1_DataBound(object sender, EventArgs e)
    {
        int AppMonth = RadScheduler1.SelectedDate.Month;
        RadScheduler1.MonthVisibleAppointmentsPerDay = MaxCount[AppMonth-1];
    }

Explanation of the code: First,  initialize an integer array MaxCount which will store the maximum number of appointments per day for each month. The default value for each element of the array is 2.

Next, in the AppointmentDataBound event, the GetAppointmentsInRange method is used to find the number of appointments for the current appointment's day (24 hr).  AppMonth is the current appointment month (integer from 1 to 12). 

Finally, in RadScheduler's DataBound event set the MonthVisibleAppointmentsPerDay to MaxCount for each month.

The chronology of RadScheduler's events mandates such a solution. This may not be the optimal approach but I hope it helps you get started. If you find a neater way to handling this case, we will appreciate if you share it with us.

Notice that this solution is strictly for a Scheduler which spans over one year period. You can extend the approach using multidimensional arrays to store not only the month number, but also the year.

Let us know how it goes.


Kind regards,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[EmpowerIT]

Hi,
I was wondering if there was a way to do something similar to what was described in this thread. I want to have a variable number of appointments displayed in the scheduler month view, however, I don't want it to be the maximum for the whole month, but the maximum for the week displayed.

i.e. the first week might have a maximum of 20 appointments, so we will set the height and number of appoitnments for that week accordingly, the week after however, might just have 5 appointments, so i don't want to display all that extra space

I thought I might try playing with the rsRow css class but I cant figure out where the best place to do this might be

Any help would be appreciated

[T. Tsonev]

Hi Daniel Tharp,

You can use the following CSS selectors to achieve this:

<style type="text/css">
    .RadScheduler div.rsApt
    {
        position: relative;
    }

    .rsMonthView .rsCell div.rsWrap
    {
        height: auto;
    }
</style>

Also, set "OverflowBehavior" to "Expand", so RadScheduler can adjust its height for the smaller content.

Greetings,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[EmpowerIT]

Hi
That css works perfectly for firefox! However, in IE it doesn't seem to work correctly

Any CSS guru's out there? =)

Thanks

[Alex Gyoshev]

Hello EmpowerIT,

...and greetings from the CSS gurus ;-)

The problem under IE browsers occurs because of the line-height / font-size of the DIV elements that have no contents. The required style is achieved by applying these styles instead of the ones sent previously:

<style type="text/css">

    .rsMonthView .rsCell div.rsWrap
    {
        height: auto;
        font-size: 0;
        line-height: 0;
    }

    .RadScheduler .rsRow div.rsDateWrap,
    .RadScheduler .rsWrap div.rsApt,
    .RadScheduler .rsRow div.rsShowMore
    {
        position: relative;
        font: 11px/16px verdana,sans-serif;
    }
</style>

They simply remove the font sizing and re-apply it again, whenever there is meaningful content.

Let me know if you need more assistance or information.

Kind regards,
Alexander
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Ted]

Alexander,

Is there a way to use the  CSS you listed and have a minimum cell size for an appointment for days in the month that do not have appointments?

 

Thanks

[Alex Gyoshev]

Hello Ted,

Unfortunately, I couldn't quite figure out what scenario you were describing. Could you please clarify it, or - if possible - provide a sketch/design of what you are trying to achieve?

All the best,
Alex
the Telerik team

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

[Ted]

Alex,

The kb article How to show all appointments in Month View solved my problem. 

Thanks,

Ted

[Nina]

I'm getting the following run-time error when I try to use the sample code for dynamically displaying monthly appointments....


Data properties on data control 'RadScheduler1' such as DataSource, DataSourceID, and DataMember cannot be changed during the databinding phase of the control.

on this line in the databound procedure: 

RadScheduler1.MonthView.VisibleAppointmentsPerDay = MaxCount[AppMonth - 1];