ASP.NET

Event Calendar in ASP.Net Using Calender Control

Here, I will use the ASP.NET Calender control to show events. I will be using the two events of the calendar control DayRender and SelectionChanged.

For showing events in the calender I will be adding a link in the DayRender method, but in doing so we will be able to get that link clicked in code behind. The reason is because the DayRender event is raised when the Calendar control is being rendered and you cannot add a control that can also raise an event, such as LinkButton. You can only add static controls, such as LiteralControl, Label, Image and HyperLink.

There is a workaround to get the value in code behind. For this I will add a static link button and make it hidden in the page and this button will handle all the events that are raised by the events that I add.

Now in the DayRender event I will add a Hyperlink control for all those dates that will have an event and in the navigate URL of the hyperlink I will call dopostback to hide the link button with the argument value. Here's the code for it.

 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EventCalender.aspx.cs" Inherits="EventCalender" %>  
  2.   
  3. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>  
  4. <!DOCTYPE html>  
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <style type="text/css">  
  9.     .modalBackground  
  10.     {  
  11.         background-color: Black;  
  12.         filter: alpha(opacity=90);  
  13.         opacity: 0.8;  
  14.     }  
  15.     .modalPopup  
  16.     {  
  17.         background-color: #FFFFFF;  
  18.         border-width: 3px;  
  19.         border-style: solid;  
  20.          
  21.         padding-top: 10px;  
  22.         padding-left: 10px;  
  23.         width: 500px;  
  24.         height: 300px; overflow-y:scroll; vertical-align:top;  
  25.     }  
  26.      .modalPopup1  
  27.     {  
  28.         background-color: #FFFFFF;  
  29.         border-width: 3px;  
  30.         border-style: solid;  
  31.          
  32.         padding-top: 10px;  
  33.         padding-left: 10px;  
  34.         width: 300px;  
  35.         height: 200px;overflow-y:scroll;vertical-align:top;  
  36.     }  
  37.  /* 
  38.     Set the Style for parent CSS Class 
  39.     of Calendar control 
  40.     Parent [CssClass] = myCalendar 
  41. */  
  42. .myCalendar {  
  43.     background-color: #efefef;  
  44.     width: 200px;  
  45. }  
  46.   
  47. /* 
  48.     Common style declaration for hyper linked text 
  49. */  
  50. .myCalendar a {  
  51.     text-decoration: none;  
  52. }  
  53.   
  54. /* 
  55.     Styles declaration for top title 
  56.     [TitleStyle] [CssClass] = myCalendarTitle 
  57. */  
  58. .myCalendar .myCalendarTitle {  
  59.     font-weight: bold;  
  60. }  
  61.   
  62. /* 
  63.     Styles declaration for date cells 
  64.     [DayStyle] [CssClass] = myCalendarDay 
  65. */  
  66. .myCalendar td.myCalendarDay {  
  67.     border: solid 2px #fff;  
  68.     border-left: 0;  
  69.     border-top: 0;  
  70. }  
  71.   
  72. /* 
  73.     Styles declaration for next/previous month links 
  74.     [NextPrevStyle] [CssClass] = myCalendarNextPrev 
  75. */  
  76. .myCalendar .myCalendarNextPrev {  
  77.     text-align: center;  
  78. }  
  79.   
  80. /* 
  81.     Styles declaration for Week/Month selector links cells 
  82.     [SelectorStyle] [CssClass] = myCalendarSelector 
  83. */  
  84. .myCalendar td.myCalendarSelector {  
  85.     background-color: #dddddd;  
  86. }  
  87.   
  88. .myCalendar .myCalendarDay a,   
  89. .myCalendar .myCalendarSelector a,  
  90. .myCalendar .myCalendarNextPrev a {  
  91.     display:  block ;  
  92.     line-height: 15px;  
  93.      
  94. }  
  95.         .myCalendarDay noti_Container a {  
  96.             display:  block ;  
  97.     line-height: 15px;  
  98.         }  
  99. .myCalendar .myCalendarDay a:hover,   
  100. .myCalendar .myCalendarSelector a:hover {  
  101.     background-color: #cccccc;  
  102. }  
  103.   
  104. .myCalendar .myCalendarNextPrev a:hover {  
  105.     background-color: #fff;  
  106. }  
  107. #noti_Container {  
  108.     position:relative;  
  109.       
  110.     width:16px;  
  111.     height:16px;  
  112.     float:right;  
  113.     top:-23px;  
  114. }  
  115. .noti_bubble {  
  116.     /*position:absolute;*/  
  117.     top: -6px;  
  118.     right:-6px;  
  119.     padding:1px 2px 1px 2px;  
  120.     background-color:red;  
  121.     color:white;  
  122.     font-weight:bold;  
  123.     font-size:0.55em;  
  124.       
  125.     border-radius:30px;  
  126.     box-shadow:1px 1px 1px gray;  
  127. }  
  128. .button-link {  
  129.     padding: 2px 5px;  
  130.     background: #4479BA;  
  131.     color: #FFF;  
  132.     -webkit-border-radius: 4px;  
  133.     -moz-border-radius: 4px;  
  134.     border-radius: 4px;  
  135.     border: solid 1px #20538D;  
  136.     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);  
  137.     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);  
  138.     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);  
  139.     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);  
  140.     -webkit-transition-duration: 0.2s;  
  141.     -moz-transition-duration: 0.2s;  
  142.     transition-duration: 0.2s;  
  143.     -webkit-user-select:none;  
  144.     -moz-user-select:none;  
  145.     -ms-user-select:none;  
  146.     user-select:none;  
  147. }  
  148. .button-link:hover {  
  149.     background: #356094;  
  150.     border: solid 1px #2A4E77;  
  151.     text-decoration: none;  
  152. }  
  153. </style>  
  154. </head>  
  155. <body>  
  156.     <form id="form1" runat="server">  
  157.         <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>  
  158.       
  159.         <asp:Calendar ID="Calendar1"   
  160.     runat="server"   
  161.     DayNameFormat="FirstLetter"  
  162.     Font-Names="Arial"   
  163.     Font-Size="11px"   
  164.     NextMonthText="»"   
  165.     PrevMonthText="«"  
  166.     SelectMonthText="»"   
  167.     SelectWeekText="›"  
  168.     CssClass="myCalendar"  
  169.     BorderStyle="None"  Width="350" Height="300"   
  170.     CellPadding="1" OnSelectionChanged="Calendar1_SelectionChanged" OnVisibleMonthChanged="Calendar1_VisibleMonthChanged" OnDayRender="Calendar1_DayRender">  
  171.     <OtherMonthDayStyle ForeColor="Gray" />  
  172.     <DayStyle CssClass="myCalendarDay" />  
  173.     <SelectedDayStyle Font-Bold="True" Font-Size="12px" />  
  174.     <SelectorStyle CssClass="myCalendarSelector" />  
  175.     <NextPrevStyle CssClass="myCalendarNextPrev" />  
  176.     <TitleStyle CssClass="myCalendarTitle" />  
  177. </asp:Calendar>  
  178.          <asp:LinkButton ID="lnkButton" runat="server" CssClass="hide"   
  179.      OnClick="lnkButton_Click"></asp:LinkButton>  
  180.         <asp:ModalPopupExtender ID="Calendar1_ModalPopupExtender" BackgroundCssClass="modalBackground" PopupControlID="Panel1"  runat="server" DynamicServicePath="" Enabled="True"  TargetControlID="hdnlink"></asp:ModalPopupExtender>  
  181.          <asp:LinkButton ID="hdnlink" style="display:none;"  runat="server" OnClick="hdnlink_Click">Submit</asp:LinkButton>  
  182.         <br />  
  183.         <asp:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="modalBackground" PopupControlID="Panel2"  runat="server" DynamicServicePath="" Enabled="True"  TargetControlID="hdnlnk2"></asp:ModalPopupExtender>  
  184.          <asp:LinkButton ID="hdnlnk2" style="display:none;"  runat="server" OnClick="hdnlnk2_Click">Submit</asp:LinkButton>  
  185.         <br />  
  186.   
  187.         <asp:ModalPopupExtender ID="ModalPopupExtender2" BackgroundCssClass="modalBackground" PopupControlID="Panel3"  runat="server" DynamicServicePath="" Enabled="True"  TargetControlID="hdnlnk3"></asp:ModalPopupExtender>  
  188.          <asp:LinkButton ID="hdnlnk3" style="display:none;"  runat="server" OnClick="hdnlnk3_Click">Submit</asp:LinkButton>  
  189.         <br />  
  190.   
  191.         <asp:Panel ID="Panel3" runat="server" CssClass="modalPopup" align="center" style = "display:none" >  
  192.             <table style="width:95%;">  
  193.             <tr>  
  194.                     <td></td>  
  195.                     <td> <asp:LinkButton ID="LinkButton2" runat="server" Font-Size="Small"  Style="float:right;" >Close</asp:LinkButton></td>  
  196.                 </tr>  
  197.                 </table>  
  198.         <asp:GridView ID="GridView2" runat="server" Width="95%" CellPadding="4" AutoGenerateColumns="false" ForeColor="#333333" GridLines="None" OnRowCommand="GridView2_RowCommand">  
  199.   
  200.             <AlternatingRowStyle BackColor="White" ForeColor="#284775" />  
  201.             <EditRowStyle BackColor="#999999" />  
  202.             <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
  203.             <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
  204.             <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />  
  205.             <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />  
  206.             <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />  
  207.             <SortedAscendingCellStyle BackColor="#E9E7E2" />  
  208.             <SortedAscendingHeaderStyle BackColor="#506C8C" />  
  209.             <SortedDescendingCellStyle BackColor="#FFFDF8" />  
  210.             <SortedDescendingHeaderStyle BackColor="#6F8DAE" />  
  211.             <Columns>  
  212.                 <asp:TemplateField HeaderText="Category" ShowHeader="true">  
  213.                     <ItemTemplate>  
  214.                         <asp:LinkButton ID="lnkCategory" runat="server" CausesValidation="False" Text='<%# Eval("Category") %>' CommandName="Category" CommandArgument='<%#Eval("Category") + ";" +Eval("Date")%>'></asp:LinkButton>  
  215.                     </ItemTemplate>  
  216.                 </asp:TemplateField>  
  217.             </Columns>  
  218.         </asp:GridView>  
  219.             </asp:Panel>  
  220.         <asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" align="center" style = "display:none" >  
  221.           <table style="width:95%;">  <tr>  
  222.                     <td></td>  
  223.                     <td> <asp:LinkButton ID="LinkButton1" runat="server" Font-Size="Small"  Style="float:right;" >Close</asp:LinkButton></td>  
  224.                 </tr>  
  225.               </table>  
  226.         <asp:GridView ID="GridView1" runat="server" Width="95%" Height="250"  ShowHeader="false" CellPadding="4" ForeColor="#333333" AutoGenerateColumns="false" GridLines="None">  
  227.             <AlternatingRowStyle BackColor="White" ForeColor="#284775" />  
  228.             <EditRowStyle BackColor="#999999" />  
  229.             <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
  230.             <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
  231.             <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />  
  232.             <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />  
  233.             <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />  
  234.             <SortedAscendingCellStyle BackColor="#E9E7E2" />  
  235.             <SortedAscendingHeaderStyle BackColor="#506C8C" />  
  236.             <SortedDescendingCellStyle BackColor="#FFFDF8" />  
  237.             <SortedDescendingHeaderStyle BackColor="#6F8DAE" />  
  238.             <Columns>  
  239.                 <asp:TemplateField ShowHeader="false">  
  240.                     <ItemTemplate>  
  241.                         <div style="color:White;background-color:#5D7B9D;font-weight:bold;padding:5px;" >  
  242.                             <%# Eval("Event Name") %>    
  243.                             <div style="float:right;">  
  244.                             <%# Eval("Date") %>  
  245.                         </div>  
  246.                         </div>  
  247.                           <div>  
  248.                             <%# Eval("Description") %>  
  249.                         </div>  
  250.                          <div>  
  251.                             <%# Eval("Category") %>  
  252.                         </div>  
  253.                     </ItemTemplate>  
  254.                 </asp:TemplateField>  
  255.                  </Columns>  
  256.         </asp:GridView>  
  257.             </asp:Panel>  
  258.         <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup1" align="center" style = "display:none" >  
  259.             <table>  
  260.                 <tr>  
  261.                     <td></td>  
  262.                     <td> <asp:LinkButton ID="lnkCancel" runat="server" Font-Size="Small"  Style="float:right;" >Close</asp:LinkButton></td>  
  263.                 </tr>  
  264.                   
  265.                 <tr>  
  266.                     <td>  
  267. Event Name  
  268.                     </td>  
  269.                     <td>  
  270.                         <asp:TextBox ID="txtEventName" runat="server"></asp:TextBox>  
  271.                     </td>  
  272.   
  273.                 </tr>  
  274.                 <tr>  
  275.                     <td>  
  276. Location  
  277.                     </td>  
  278.                     <td>  
  279. <asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>  
  280.                     </td>  
  281.   
  282.                 </tr>  
  283.                 <tr>  
  284.                     <td>  
  285. Category  
  286.                     </td>  
  287.                     <td>  
  288.                         <asp:DropDownList ID="ddlCategory" runat="server">  
  289.                              
  290.                              <asp:ListItem Text="Concerts" Value="Concerts"></asp:ListItem>  
  291.                              <asp:ListItem Text="Festivals" Value="Festivals"></asp:ListItem>  
  292.                              <asp:ListItem Text="Kids & Family" Value="Kids & Family"></asp:ListItem>  
  293.                              <asp:ListItem Text="Performing Arts" Value="Performing Arts"></asp:ListItem>  
  294.                              <asp:ListItem Text="Food" Value="Food"></asp:ListItem>  
  295.                              <asp:ListItem Text="Sports" Value="Sports"></asp:ListItem>  
  296.                              <asp:ListItem Text="Conferences" Value="Conferences"></asp:ListItem>  
  297.                              <asp:ListItem Text="Movies" Value="Movies"></asp:ListItem>  
  298.                         </asp:DropDownList>  
  299.                     </td>  
  300.   
  301.                 </tr>  
  302.                 <tr>  
  303.                     <td>  
  304. Description  
  305.                     </td>  
  306.                     <td>  
  307.                        <asp:TextBox ID="txtDesc" runat="server"  TextMode="MultiLine"></asp:TextBox>  
  308.                      </td>  
  309.                 </tr>  
  310.                 <tr>  
  311.                     <td></td>  
  312.                     <td>  
  313.                         <asp:LinkButton ID="lnkSubmit" runat="server" CssClass="button-link" OnClick="lnkSubmit_Click">Submit</asp:LinkButton><br />  
  314.                                            </td>  
  315.                 </tr>  
  316.             </table>  
  317.         </asp:Panel>  
  318.         </form>  
  319. </body>  
  320. </html>  
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. using System.Web.UI.HtmlControls;  
  10.   
  11. public partial class EventCalender : System.Web.UI.Page  
  12. {  
  13.   
  14.   
  15.   private  LinkButton lb ;  
  16.     protected void Page_Load(object sender, EventArgs e)  
  17.     {  
  18.          
  19.         if (!IsPostBack)  
  20.         {  
  21.             gridbind();  
  22.         }  
  23.     }  
  24.       
  25.     protected void gridbind()  
  26.     {  
  27.         if (Session["Events"] != null)  
  28.         {  
  29.             DataTable dt = (DataTable)Session["Events"];  
  30.             GridView1.DataSource = dt;  
  31.             GridView1.DataBind();  
  32.         }  
  33.   
  34.     }  
  35.   
  36.     protected void CategoryGridbind(DataTable dt)  
  37.     {  
  38.         
  39.               
  40.             GridView2.DataSource = dt;  
  41.             GridView2.DataBind();  
  42.           
  43.   
  44.     }  
  45.      
  46.     protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)  
  47.     {  
  48.         if (Session["Events"] != null)  
  49.         {  
  50.             DataTable dt = (DataTable)Session["Events"];  
  51.             var count = (from events in dt.AsEnumerable() where events.Field("Date").Contains(e.Day.Date.ToShortDateString()) select events).Count();  
  52.             if (Convert.ToInt32(count)>0)  
  53.             {  
  54.                var span = new HtmlGenericControl("div");  
  55.                HyperLink lb = new HyperLink();  
  56.                 lb.Text = count.ToString();  
  57.                 lb.CssClass = "noti_bubble";  
  58.                 lb.NavigateUrl = Page.ClientScript.GetPostBackClientHyperlink(lnkButton, e.Day.Date.ToShortDateString(), true);  
  59.   
  60.                 span.Controls.Add(lb);  
  61.                 span.ID = "noti_Container";  
  62.   
  63.                 e.Cell.Controls.Add(span);  
  64.                  
  65.                   
  66.                 
  67.             }  
  68.         }  
  69.     }  
  70.      
  71.     protected void lnkButton_Click(object sender, EventArgs e)  
  72.     {  
  73.         string date = Request.Form["__EVENTARGUMENT"].ToString();  
  74.         if (Session["Events"] != null)  
  75.         {  
  76.             DataTable dt = (DataTable)Session["Events"];  
  77.             DataTable catdt = (from events in dt.AsEnumerable() where events.Field("Date").Contains(date) group events by events.Field("Category") into groups select groups.First()).CopyToDataTable();  
  78.             CategoryGridbind(catdt);  
  79.         }  
  80.         hdnlnk3_Click(null, null);  
  81.   
  82.     }  
  83.     protected void Calendar1_SelectionChanged(object sender, EventArgs e)  
  84.     {  
  85.         string date = Calendar1.SelectedDate.ToShortDateString();  
  86.         hdnlink_Click(null, null);  
  87.         
  88.     }  
  89.   
  90.     protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)  
  91.     {  
  92.         Calendar1_ModalPopupExtender.Hide();  
  93.     }  
  94.     protected void hdnlink_Click(object sender, EventArgs e)  
  95.     {  
  96.         Calendar1_ModalPopupExtender.Show();  
  97.     }  
  98.     protected void hdnlnk2_Click(object sender, EventArgs e)  
  99.     {  
  100.         ModalPopupExtender1.Show();  
  101.     }  
  102.     protected void hdnlnk3_Click(object sender, EventArgs e)  
  103.     {  
  104.         ModalPopupExtender2.Show();  
  105.     }  
  106.     protected void lnkSubmit_Click(object sender, EventArgs e)  
  107.     {  
  108.         if (Session["Events"] != null)  
  109.         {  
  110.             DataTable dt = (DataTable)Session["Events"];  
  111.             DataRow dr=dt.NewRow();  
  112.             dr[0]=txtEventName.Text.Trim();  
  113.             dr[1]=txtLocation.Text.Trim();  
  114.             dr[2]=Calendar1.SelectedDate.ToShortDateString();  
  115.             dr[3] = txtDesc.Text.Trim();  
  116.             dr[4] = ddlCategory.SelectedItem.Value.ToString();  
  117.             dt.Rows.Add(dr);  
  118.             Session["Events"] = dt;  
  119.         }  
  120.         else  
  121.         {  
  122.           
  123.         DataTable events = new DataTable();  
  124.          
  125.         DataColumn dc1 = new DataColumn("Event Name", typeof(String));  
  126.         DataColumn dc2 = new DataColumn("Location", typeof(String));  
  127.         DataColumn dc3 = new DataColumn("Date", typeof(String));  
  128.         DataColumn dc4 = new DataColumn("Description", typeof(String));  
  129.         DataColumn dc5 = new DataColumn("Category", typeof(String));  
  130.           
  131.         events.Columns.Add(dc1);  
  132.         events.Columns.Add(dc2);  
  133.         events.Columns.Add(dc3);  
  134.         events.Columns.Add(dc4);  
  135.         events.Columns.Add(dc5);  
  136.         DataRow dr = events.NewRow();  
  137.         dr[0] = txtEventName.Text.Trim();  
  138.         dr[1] = txtLocation.Text.Trim();  
  139.         dr[2] = Calendar1.SelectedDate.ToShortDateString();  
  140.         dr[3] = txtDesc.Text.Trim();  
  141.         dr[4] = ddlCategory.SelectedItem.Value.ToString();  
  142.   
  143.         events.Rows.Add(dr);  
  144.         Session["Events"] = events;  
  145.         }  
  146.         txtDesc.Text = string.Empty; txtEventName.Text = string.Empty; txtLocation.Text = string.Empty;  
  147.     }  
  148.   
  149.     protected void GridView2_RowCommand(object sender, GridViewCommandEventArgs e)  
  150.     {  
  151.         if (e.CommandName == "Category")  
  152.         {  
  153.             if (Session["Events"] != null)  
  154.             {  
  155.                 DataTable dt = (DataTable)Session["Events"];  
  156.                 string[] arg = new string[2];  
  157.                 arg = e.CommandArgument.ToString().Split(';');  
  158.                 DataTable eventscategorywise = (from events in dt.AsEnumerable() where events.Field("Date").Contains(arg[1]) && events.Field("Category")==arg[0].ToString() select events).CopyToDataTable();  
  159.                 GridView1.DataSource = eventscategorywise;  
  160.                 GridView1.DataBind();  
  161.                 hdnlnk2_Click(null, null);  
  162.             }  
  163.         }  
  164.     }  
  165. }   

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs