How to Remove the Last Week Of a Calendar

Question

I am not sure why other people have not asked this before. But have you notice that the asp:Calendar shows an extra week at the end?

For example if the VisibleMonth is set to 2010-03-01 and FirstDayOfWeek to Sunday: It will show 6 weeks.

1. Feb 28 to March 6
2. March 7 to March 13
3. March 14 to March 20
4. March 21 to March 27
5. March 28 to April 3
6. April 4 to April 10

I was wondering why Microsoft shows the last Row which is entirely on April. I tried to search the net for a property but it does not seem to be existing.

The only solution that I could think of is to override the Pre_Render and check all individual date if they are still within the week of the VisibleDate. But of course that is an extreme checking since each rendering of the control shows it.

Here is my work around.

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
    int dayOfWeek = Convert.ToInt16(e.Day.Date.DayOfWeek);
    int compensate = dayOfWeek - Convert.ToInt16(DayOfWeek.Sunday);
    DateTime WeekStart = e.Day.Date.AddDays(-1 * compensate);
    DateTime WeekEnd = WeekStart.AddDays(6);

    // If the start and end of the week does not have relevance to the current month
    if (WeekStart.Month != Calendar1.VisibleDate.Month &&
        WeekEnd .Month != Calendar1.VisibleDate.Month)
    {
        e.Cell.Text = "";
        e.Cell.Height = 0;
        e.Cell.Visible = false;
    }
}

Answer 1

very nice. Works with most browsers but is fugly with Chrome 11.0.696.71 And Safari for windows (havn't tested on mac)

For some months the calendar control displays the extra week at the start of the month. (when the 1st of the month is the first day of the week.)

When you set e.cell.Visible=false it doesn't render elements . So in chrome you end up with a row <tr></tr> . Chrome renders this as a blank row. And since i don't think there's a way to set the TR element height/style via the calendar control, you end up with an ugly looking calendar that's missing it's first row for certain months.

Also setitng height to 0 does nothing when you set Visible=false. If you don't set Visible=false and just put height =0 it still doesn't render correctly in chrome. So the solution is to set height to 1

Here's my modified solution.

the onrowrender

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e){
    hideExtraWeek(sender, e, (DayOfWeek)Calendar1.FirstDayOfWeek);
}

the function

    protected void hideExtraWeek(object sender, DayRenderEventArgs e, DayOfWeek dw){
        if (dw == (DayOfWeek)7) dw = (DayOfWeek)0; // FirstDayOfweek returns 7 when set to default, But it's zero based so valid values are 0 to 6
        Boolean blnBrowserDoesntSupportsEmptyRow= Request.Browser.Browser=="Chrome" ||
                                            Request.Browser.Browser=="Safari";

        int dayOfWeek = Convert.ToInt16(e.Day.Date.DayOfWeek);
        int compensate = dayOfWeek - Convert.ToInt16(dw);
        DateTime WeekStart = e.Day.Date.AddDays(-1 * compensate);
        DateTime WeekEnd = WeekStart.AddDays(6);

        // If the start and end of the week does not have relevance to the current month
        if (WeekStart.Month==WeekEnd.Month && e.Day.IsOtherMonth){
            e.Cell.Text = "";
            e.Cell.Height = 1; // fix for chrome. Visible=false leaves a blank row even when there are no <td>s in the <tr>
            e.Cell.Visible = blnBrowserDoesntSupportsEmptyRow;
        }
    }

Answer 2

If you have SelectWeekText and SelectionMode="DayWeek" or "DayWeekMonth", you'll have issues with the week selection markup still showing up for the hidden week. Here's how I did it with a little bit of JQuery.

 Sub cal_DayRender(ByVal sender As Object, ByVal e As DayRenderEventArgs)
      If HideExtraWeek(e, If(Cal.FirstDayOfWeek = WebControls.FirstDayOfWeek.Default, Threading.Thread.CurrentThread.CurrentUICulture.DateTimeFormat.FirstDayOfWeek, Cal.FirstDayOfWeek)) Then
          e.Cell.Style("display") = "none"
          e.Cell.CssClass = "hiddenWeek"
          Exit Sub
      End If
      'do other render stuff here
 End Sub

Private Function HideExtraWeek(ByVal e As DayRenderEventArgs, ByVal startOfWeekDay As Integer) As Boolean
    If e.Day.IsOtherMonth Then
        'hide empty weeks, logic credited to Robert
        Dim currDay As Integer = e.Day.Date.DayOfWeek
        Dim weekStart As DateTime = e.Day.Date.AddDays(startOfWeekDay - currDay) 'first day of the week
        Dim weekEnd As DateTime = weekStart.AddDays(6)

        Return (weekStart.Month = weekEnd.Month) 'the entire week is part of the other month
    End If
    Return False
End Function

<script type="text/javascript">
        $(document).ready(function() {
             $("td.hiddenWeek").parent().hide();
        }
</script>