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

Answer 1

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.