How to create a month-view control in Silverlight

Question

I need to create a outlook like monthview-control for showing appointments. (a grid showing all days in a month, with the weekdays aligned vertically. Day number and dayofweek should be shown for every day, and the appointments should be shown in a listview inside the correct day)

And I need some input on where to start.

Say the ViewModel would look something like this:

    public class MonthViewModel
{
    public List<DateTime> DaysInMonth { get; set; }
    public List<Appointment> Appointments { get; set; }
}
    public class Appointment
{
    public string Title { get; set; }
    public DateTime Start { get; set; }
    public string Description { get; set; }

}

Do I need to manually lay out the days, and place the appointments, or can I do it more elegant?

I've tried several apporoches with binding but all unsuccessful. Any hints on what to do?

Regards Larsi

From the pain of trying it early in SL3 beta and getting it to just about work - I wouldn't hesitate in buying a commercially available control to do it instead. It is a lot harder than it looks, especially laying out multi day appointments in a compact but rule based manner. — Andrew, Dec 08 '09 at 20:33
Andrew, agree - I find this task to be a lot harder than I tought it would. I'll post an update if I find a good way to do it — Larsi, Dec 10 '09 at 14:15

score 0 · Accepted Answer · answered Dec 08 '09 at 21:57

I did this exact thing a few weeks ago. What I did was create two silverlight user controls, one for the day and one for the month.

The month controls fills a stackpanel named MonthRows with day controls like this:

        ViewStartDate = new DateTime(CurrentDate.Year, CurrentDate.Month, 1);
        ViewEndDate = ViewStartDate.AddMonths(1).AddDays(-1);

        while (ViewStartDate.DayOfWeek != System.DayOfWeek.Sunday)
        {
            ViewStartDate = ViewStartDate.AddDays(-1);
        }
        while (ViewEndDate.DayOfWeek != System.DayOfWeek.Saturday)
        {
            ViewEndDate = ViewEndDate.AddDays(1);
        }

        DateTime tmpDate = ViewStartDate;
        while (tmpDate <= ViewEndDate)
        {
            StackPanel stack = new StackPanel()
            {
                Orientation = Orientation.Horizontal
            };

            for (int i = 0; i < 7; i++)
            {
                stack.Children.Add(new ucDay(tmpDate.Year, tmpDate.Month, tmpDate.Day, EventFunc, CurrentDate));
                tmpDate = tmpDate.AddDays(1);
            }
            MonthRows.Children.Add(stack);
        }

The ucDay constructor takes in the Year, Month, Day, delegate function pointer (to handle click-events) and the current selected date as parameters.

How to create a month-view control in Silverlight

1 Answers1