Monday, February 15, 2010

creating week view calendar.

here is a very simple week view calendar in C#.net

<table cellspacing="0" cellpadding="2" border="0" style="border: 1px solid White;
    width: 640px; height: 390px; font-size: 9pt; font-family: Verdana; color: Black;
    background-color: White; border-collapse: collapse;" title="Calendar" id="ctl00_content_ctl00_fragment_2698_ctl00_Calendar1">
    <tbody>
        <tr>
            <td style="border: 4px solid Black; background-color: White;" colspan="7">
                <table cellspacing="0" border="0" style="color: rgb(51, 51, 153); font-family: Verdana;
                    font-size: 12pt; font-weight: bold; width: 100%; border-collapse: collapse;">
                    <tbody>
                        <tr>
                            <td valign="bottom" style="color: rgb(51, 51, 51); font-size: 8pt; font-weight: bold;
                                width: 15%;">
                                <asp:linkbutton id="lbtnPrev" runat="server" onclick="lbtnPrev_Click">Previous</asp:linkbutton>
                            </td>
                            <td align="center" style="width: 70%;">
                                <asp:literal runat="server" id="ltMomthYear"></asp:literal>
                            </td>
                            <td valign="bottom" align="right" style="color: rgb(51, 51, 51); font-size: 8pt;
                                font-weight: bold; width: 15%;">
                                <asp:linkbutton id="lbtnNext" runat="server" onclick="lbtnNext_Click">Next</asp:linkbutton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <th align="center" style="font-size: 8pt; font-weight: bold;" scope="col" abbr="Monday">
                Mon
            </th>
            <th align="center" style="font-size: 8pt; font-weight: bold;" scope="col" abbr="Tuesday">
                Tue
            </th>
            <th align="center" style="font-size: 8pt; font-weight: bold;" scope="col" abbr="Wednesday">
                Wed
            </th>
            <th align="center" style="font-size: 8pt; font-weight: bold;" scope="col" abbr="Thursday">
                Thu
            </th>
            <th align="center" style="font-size: 8pt; font-weight: bold;" scope="col" abbr="Friday">
                Fri
            </th>
            <th align="center" style="font-size: 8pt; font-weight: bold;" scope="col" abbr="Saturday">
                Sat
            </th>
            <th align="center" style="font-size: 8pt; font-weight: bold;" scope="col" abbr="Sunday">
                Sun
            </th>
        </tr>
        <tr>
            <asp:literal runat="server" id="ltDays"></asp:literal>
        </tr>
    </tbody>
</table>

Now for the srever side events

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            loadCurrentWeek(DateTime.Now);
    }

    private void loadCurrentWeek(DateTime dateofWeek)
    {
        StringBuilder sb = new StringBuilder();
        DayOfWeek day = dateofWeek.DayOfWeek;
        int days = day - DayOfWeek.Monday;
        DateTime start = dateofWeek.AddDays(-days);
        DateTime end = start.AddDays(6);
        ViewState["start"] = start;
        ViewState["end"] = end;
        ltMomthYear.Text = start.ToString("ddd dd MMM") + " to " + end.ToString("ddd dd MMM");

        for (int i = start.Day; i <= end.Day; i++)
        {
            sb.Append("<td align='center' style='color: Black; width: 14%;'>");
            sb.Append("<a href='javascript:void(0);'>");
            sb.Append(i);
            sb.Append("</a>");
            sb.Append("</td>");
        }
        ltDays.Text = sb.ToString();
    }
    protected void lbtnNext_Click(object sender, EventArgs e)
    {
        if (ViewState["end"] != null)
        {
            DateTime dt = Convert.ToDateTime(ViewState["end"]);
            DateTime next = dt.AddDays(1);
            loadCurrentWeek(next);
        }

    }
    protected void lbtnPrev_Click(object sender, EventArgs e)
    {
        if (ViewState["start"] != null)
        {
            DateTime dt = Convert.ToDateTime(ViewState["start"]);
            DateTime prev = dt.AddDays(-2);
            loadCurrentWeek(prev);
        }
    }


You are done with Weekly calendar :)

Happy coding.

1 comment:

Jeroen Koc said...

it doesn't work,
when a new month starts it doesn't show the week
example:

mo - su
18 - 24

and than the next week is supposed to be

mo - su
24 - 1

but the whole week is empty

please reply this is the only example i could find for this and i realy need it.