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" %>
  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;
  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;
  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. }
  47. /*
  48. Common style declaration for hyper linked text
  49. */
  50. .myCalendar a {
  51. text-decoration: none;
  52. }
  54. /*
  55. Styles declaration for top title
  56. [TitleStyle] [CssClass] = myCalendarTitle
  57. */
  58. .myCalendar .myCalendarTitle {
  59. font-weight: bold;
  60. }
  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. }
  72. /*
  73. Styles declaration for next/previous month links
  74. [NextPrevStyle] [CssClass] = myCalendarNextPrev
  75. */
  76. .myCalendar .myCalendarNextPrev {
  77. text-align: center;
  78. }
  80. /*
  81. Styles declaration for Week/Month selector links cells
  82. [SelectorStyle] [CssClass] = myCalendarSelector
  83. */
  84. .myCalendar td.myCalendarSelector {
  85. background-color: #dddddd;
  86. }
  88. .myCalendar .myCalendarDay a,
  89. .myCalendar .myCalendarSelector a,
  90. .myCalendar .myCalendarNextPrev a {
  91. display: block ;
  92. line-height: 15px;
  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. }
  104. .myCalendar .myCalendarNextPrev a:hover {
  105. background-color: #fff;
  106. }
  107. #noti_Container {
  108. position:relative;
  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;
  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>
  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 />
  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 />
  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">
  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>
  265. <tr>
  266. <td>
  267. Event Name
  268. </td>
  269. <td>
  270. <asp:TextBox ID="txtEventName" runat="server"></asp:TextBox>
  271. </td>
  273. </tr>
  274. <tr>
  275. <td>
  276. Location
  277. </td>
  278. <td>
  279. <asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
  280. </td>
  282. </tr>
  283. <tr>
  284. <td>
  285. Category
  286. </td>
  287. <td>
  288. <asp:DropDownList ID="ddlCategory" runat="server">
  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>
  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;
  11. public partial class EventCalender : System.Web.UI.Page
  12. {
  15. private LinkButton lb ;
  16. protected void Page_Load(object sender, EventArgs e)
  17. {
  19. if (!IsPostBack)
  20. {
  21. gridbind();
  22. }
  23. }
  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. }
  34. }
  36. protected void CategoryGridbind(DataTable dt)
  37. {
  40. GridView2.DataSource = dt;
  41. GridView2.DataBind();
  44. }
  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);
  60. span.Controls.Add(lb);
  61. span.ID = "noti_Container";
  63. e.Cell.Controls.Add(span);
  67. }
  68. }
  69. }
  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);
  82. }
  83. protected void Calendar1_SelectionChanged(object sender, EventArgs e)
  84. {
  85. string date = Calendar1.SelectedDate.ToShortDateString();
  86. hdnlink_Click(null, null);
  88. }
  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. {
  123. DataTable events = new DataTable();
  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));
  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();
  143. events.Rows.Add(dr);
  144. Session["Events"] = events;
  145. }
  146. txtDesc.Text = string.Empty; txtEventName.Text = string.Empty; txtLocation.Text = string.Empty;
  147. }
  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. }