How to Create Runtime Dynamic Event Calendar using ASP.NET Calendar Control in C# VB.Net

Event management is a necessary part in our life. For tracking different events we need to develop Event Calendar. As we know that Asp.Net provides us in built Calendar Control. By using this control we can easily create an event calendar. Asp.net Calendar Control provides us DayRender event. Using this event we can modify corresponding date cell through CSS. Please note that the DayRender event always render the control in each postback. Here in this article I will show “How we can Develop an Event Calendar using Asp.Net Calendar Control“. You can easily develop the event calendar by using database but for simplicity here I have used DataTable.

More sophisticated Event Calendar:
Building Database Driven Event Calendar using Asp.Net C# VB.Net

Objective/Outcome:
How to Create Runtime Dynamic Event Calendar using ASP.NET Calendar Control in C# VB.Net

Prepare the HTML like below:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <b>Event ID:</b><br />
    <asp:TextBox ID="txtEventID" runat="server"></asp:TextBox><br />
    <b>Event Date:</b><br />
    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox><br />
    <b>Event Title:</b><br />
    <asp:TextBox ID="txtEvent" runat="server"></asp:TextBox><br />
    <b>Event Description:</b><br />
    <asp:TextBox ID="txtEventDescription" runat="server"></asp:TextBox><br />

    <asp:Button ID="cmdCreate" runat="server" Text="Create Event" 
        onclick="cmdCreate_Click" /><br />
    <hr />
    <asp:Calendar ID="Calendar1" runat="server" Height="300px" 
        ondayrender="Calendar1_DayRender" Width="700px"></asp:Calendar>
</asp:Content>

Prepare an Event List under Page_Load Event:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dtEvents = new DataTable();
            dtEvents.Columns.Add(new DataColumn("ID", typeof(System.Int32)));
            dtEvents.Columns.Add(new DataColumn("EventDate", typeof(System.DateTime)));
            dtEvents.Columns.Add(new DataColumn("EventTitle"));
            dtEvents.Columns.Add(new DataColumn("EventDescription"));

            dtEvents.Rows.Add(1,DateTime.Now.AddDays(10), "Lunch Party", "Address: Mitali Restaurent, 10 New eskaton, Dhaka");
            dtEvents.Rows.Add(2, DateTime.Now.AddDays(7), "Dance Party", "Address: Hotel Purbani, 10 New eskaton, Dhaka");
            dtEvents.Rows.Add(3, DateTime.Now.AddDays(2), "Dinner Party", "Address: Seraton, 10 New eskaton, Dhaka");

            ViewState["dtEvents"] = dtEvents;
        }
    }

Note: Don’t forget to add “System.Data” namespace.

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim dtEvents As New DataTable()
            dtEvents.Columns.Add(New DataColumn("ID", GetType(System.Int32)))
            dtEvents.Columns.Add(New DataColumn("EventDate", GetType(System.DateTime)))
            dtEvents.Columns.Add(New DataColumn("EventTitle"))
            dtEvents.Columns.Add(New DataColumn("EventDescription"))

            dtEvents.Rows.Add(1, DateTime.Now.AddDays(10), "Lunch Party", "Address: Mitali Restaurent, 10 New eskaton, Dhaka")
            dtEvents.Rows.Add(2, DateTime.Now.AddDays(7), "Dance Party", "Address: Hotel Purbani, 10 New eskaton, Dhaka")
            dtEvents.Rows.Add(3, DateTime.Now.AddDays(2), "Dinner Party", "Address: Seraton, 10 New eskaton, Dhaka")

            ViewState("dtEvents") = dtEvents
        End If
    End Sub

Note: Don’t forget to add “System.Data” namespace.

Page_Load Event Code Explanation:
For simplicity we have used Datatable as an event source to feed to the Calendar Control. Since we did not use Database, we have to keep events in each postback. That’s why we used ViewState for our state management. At first we populate a DataTable with some events. After that we kept the DataTable into a View State for future need.

Feed Events into the Asp.Net Calendar Control:
C# Code:

    protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
    {
        if (e.Day.IsToday)
        {
            e.Cell.BorderColor = System.Drawing.Color.Silver;
            e.Cell.BackColor = System.Drawing.Color.Bisque;
            e.Cell.BorderStyle = BorderStyle.Solid;
            e.Cell.BorderWidth = 2;
        }

        if (ViewState["dtEvents"] != null)
        {
            DataTable dtEvents = (DataTable)ViewState["dtEvents"];
            foreach (DataRow oItem in dtEvents.Rows)
            {
                if (Convert.ToDateTime(oItem["EventDate"]).ToString("dd-MM-yyyy") == e.Day.Date.ToString("dd-MM-yyyy"))
                {
                    Literal ltrl = new Literal();
                    ltrl.Text = "<BR />";
                    e.Cell.Controls.Add(ltrl);

                    e.Cell.BorderColor = System.Drawing.Color.Aqua;
                    e.Cell.BackColor = System.Drawing.Color.Bisque;
                    e.Cell.BorderStyle = BorderStyle.Solid;
                    e.Cell.BorderWidth = 2;

                    Label b = new Label();
                    b.Font.Size = 8;
                    b.Font.Bold = true;
                    b.ForeColor = System.Drawing.ColorTranslator.FromHtml("#336699");
                    b.Text = oItem["EventTitle"].ToString();
                    e.Cell.Controls.Add(b);

                    Literal ltrl2 = new Literal();
                    ltrl2.Text = "<BR /><a style='font-size:0.9em' href='About.aspx?ID="+oItem["ID"].ToString()+"'>View Address</a>";
                    e.Cell.Controls.Add(ltrl2);
                }
            }
        }
    }

VB.Net Code:

    Protected Sub Calendar1_DayRender(sender As Object, e As DayRenderEventArgs)
        If e.Day.IsToday Then
            e.Cell.BorderColor = System.Drawing.Color.Silver
            e.Cell.BackColor = System.Drawing.Color.Bisque
            e.Cell.BorderStyle = BorderStyle.Solid
            e.Cell.BorderWidth = 2
        End If

        If ViewState("dtEvents") IsNot Nothing Then
            Dim dtEvents As DataTable = DirectCast(ViewState("dtEvents"), DataTable)
            For Each oItem As DataRow In dtEvents.Rows
                If Convert.ToDateTime(oItem("EventDate")).ToString("dd-MM-yyyy") = e.Day.[Date].ToString("dd-MM-yyyy") Then
                    Dim ltrl As New Literal()
                    ltrl.Text = "<BR />"
                    e.Cell.Controls.Add(ltrl)

                    e.Cell.BorderColor = System.Drawing.Color.Aqua
                    e.Cell.BackColor = System.Drawing.Color.Bisque
                    e.Cell.BorderStyle = BorderStyle.Solid
                    e.Cell.BorderWidth = 2

                    Dim b As New Label()
                    b.Font.Size = 8
                    b.Font.Bold = True
                    b.ForeColor = System.Drawing.ColorTranslator.FromHtml("#336699")
                    b.Text = oItem("EventTitle").ToString()
                    e.Cell.Controls.Add(b)

                    Dim ltrl2 As New Literal()
                    ltrl2.Text = "<BR /><a style='font-size:0.9em' href='About.aspx?ID=" & oItem("ID").ToString() & "'>View Address</a>"
                    e.Cell.Controls.Add(ltrl2)
                End If
            Next
        End If
    End Sub

Code explanation:
First we highlight the current date. Then from ViewState we collected the DataTable. Compare the DataTable elements date with calendar date. If matched then modify this date cell. The tricky part is, we have added a link control to point to another URL with corresponding event ID. So that in that page we can implement business logic as per requirement. Here in this example I have used About.aspx page as another URL.

Adding Events Dynamically into Event Calendar:
If we add a DataRow which is stored in ViewState & render the control then we will get the newly added event into the Asp.Net Calendar Control.

How to do:
C# Code:

    protected void cmdCreate_Click(object sender, EventArgs e)
    {
        if (ViewState["dtEvents"] != null)
        {
            DataTable dtEvents = (DataTable)ViewState["dtEvents"];
            dtEvents.Rows.Add(Convert.ToInt32(txtEventID.Text), Convert.ToDateTime(txtDate.Text), txtEvent.Text, txtEventDescription.Text);
            ViewState["dtEvents"] = dtEvents;
        }
    }

VB.Net Code:

    Protected Sub cmdCreate_Click(sender As Object, e As EventArgs)
        If ViewState("dtEvents") IsNot Nothing Then
            Dim dtEvents As DataTable = DirectCast(ViewState("dtEvents"), DataTable)
            dtEvents.Rows.Add(Convert.ToInt32(txtEventID.Text), Convert.ToDateTime(txtDate.Text), txtEvent.Text, txtEventDescription.Text)
            ViewState("dtEvents") = dtEvents
        End If
    End Sub

How to use Event ID in Another URL:
Add a Label Control in About.aspx page & Write the below code under page_load event:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Request.QueryString["ID"] != null)
                Label1.Text = "THE EVENT ID: " + Request.QueryString["ID"];
        }
    }

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            If Request.QueryString("ID") IsNot Nothing Then
                Label1.Text = "THE EVENT ID: " + Request.QueryString("ID")
            End If
        End If
    End Sub

Hope now you can dynamically build Database driven Event Calender. Happy coding!!

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, VB.Net
5 comments on “How to Create Runtime Dynamic Event Calendar using ASP.NET Calendar Control in C# VB.Net
  1. Dan B says:

    Great Article – I had this up and running in 5 minutes. No Bugs what so ever! Thanks and keep them coming!

  2. Semil T S says:

    I have saved some shifts in database with dates. When I select the month I want to display the Shift names of that month in calender. How can I achieve it?

    • Shawpnendu Bikash says:

      I think my post is clear to meet your requirement. Can you please pin point the portion where you stuck? So that it will be easier for me to make you understand.

  3. berlin says:

    Is any codes for the Calendar1_SelectionChanged event needed?

  4. Jerry says:

    How do I link this to a database? any hints please

Leave a Reply

Your email address will not be published. Required fields are marked *

     

*