Community Pick: Many members of our community have endorsed this article.

Calendar Control with Database Access and Lightbox popup

Mark FranzProject Manager
Even though I am no longer writing code for a living, I still write apps for fun and to keep my skills sharp.
I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this was a daunting task since controlling the rendered dates with a link to the event seemed out of reach, well, once I sat down and started working, it was actually a simple task. There are a few examples of using a database to create event dates, but I never found one that created a pop-up of the events.  Lets quickly walk through it.

First, lets create a database of the necessary data.  I used Access in this example but can be easily migrated to your preferred database.  Create a table with the following columns and  data-types, (sample data included);

ID      eventDate      eventName      EventData      eventLink
2      10/21/2010      New Event      Testing a new event

ID: AutoNumber
eventDate: Date/Number
eventName: Text
eventData: Memo
eventLink: Text

Once the database has been created and saved in the appropriate directory, (I'll use _database in this example), lets create a page with the Calendar Control embedded and the required CSS and JavaScript calls.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
                      <html xmlns="">
                      <head runat="server">
                      <link rel="stylesheet" href="../css/mediaboxAdvBlack21.css" type="text/css" media="screen" /> 
                      <script src="../js/mootools.js" type="text/javascript"></script> 
                      <script src="../js/mediaboxAdv-1.3.4.js" type="text/javascript"></script>
                      <script type="text/javascript" src="../js/wz_tooltip.js"></script>
                      <script type="text/javascript" src="../js/tip_balloon.js"></script>
                          <form id="form1" runat="server">
                              <asp:Calendar ID="Calendar1" runat="server" BackColor="White" 
                                  BorderColor="Black" BorderWidth="1px" Font-Names="Segoe UI" Font-Size="9pt" 
                                  ForeColor="Black" Height="180px" NextPrevFormat="FullMonth" Width="260px" 
                                  SelectionMode="None" BorderStyle="Solid" 
                                  Caption="Calendar of Events" CaptionAlign="Top" ToolTip=" ">
                                  <SelectedDayStyle BackColor="White" ForeColor="White" />
                                  <SelectorStyle Font-Bold="False" />
                                  <TodayDayStyle BackColor="White" Font-Bold="True" 
                                      Font-Names="Segoe UI" Font-Size="14px" />
                                  <OtherMonthDayStyle ForeColor="#999999" />
                                  <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#F9F9D2" 
                                      VerticalAlign="Bottom" />
                                  <DayHeaderStyle Font-Bold="True" Font-Size="8pt" BackColor="#F9F9D2" 
                                      BorderStyle="Solid" BorderWidth="0px" />
                                  <TitleStyle BackColor="#931D1D" BorderColor="Black" BorderWidth="1px" 
                                      Font-Bold="True" Font-Size="13pt" ForeColor="White" 
                                      BorderStyle="Ridge" />

Open in new window

There are a number of styles set in the above .aspx page that are not necessary in your control, I used them to show the possible customization available.  You will also notice that the file "Default.aspx.vb" is called as the CodeFile, this is where all the work takes place to connect to the database and creating the necessary HREF tags using the DayRender event.  Some of this code comes from Microsoft.  Lets take a look at this vb;

Imports System.Data
                      Imports System.Data.OleDb
                      Partial Class _Default
                          Inherits System.Web.UI.Page
                          Protected dsEvents As DataSet
                          Protected Sub Page_Load(ByVal sender As Object, _
                                  ByVal e As System.EventArgs) Handles Me.Load
                              If Not IsPostBack Then
                                  Calendar1.VisibleDate = DateTime.Today
                              End If
                          End Sub
                          Protected Sub FillDataset()
                              Dim firstDate As New DateTime(Calendar1.VisibleDate.Year, Calendar1.VisibleDate.Month, 1)
                              Dim lastDate As DateTime = GetFirstDayOfNextMonth()
                              dsEvents = GetCurrentMonthData(firstDate, lastDate)
                          End Sub
                          Protected Function GetFirstDayOfNextMonth() As DateTime
                              Dim monthNumber, yearNumber As Integer
                              If Calendar1.VisibleDate.Month = 12 Then
                                  monthNumber = 1
                                  yearNumber = Calendar1.VisibleDate.Year + 1
                                  monthNumber = Calendar1.VisibleDate.Month + 1
                                  yearNumber = Calendar1.VisibleDate.Year
                              End If
                              Dim lastDate As New DateTime(yearNumber, monthNumber, 1)
                              Return lastDate
                          End Function
                          Protected Sub Calendar1_VisibleMonthChanged(ByVal sender As Object, _
                                  ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) _
                                  Handles Calendar1.VisibleMonthChanged
                          End Sub
                          Function GetCurrentMonthData(ByVal firstDate As DateTime, ByVal lastDate As DateTime) As DataSet
                              Dim sConnectionString, sSQL As String
                              'SQL Connection String
                              sConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/_database/CalendarDb.mdb") & ";User Id=admin;Password=;"
                              Dim objConnection As New OleDbConnection(sConnectionString)
                              'SQL parameters
                              sSQL = "SELECT * FROM tblEvents WHERE eventDate >= #" & firstDate & "# And eventDate < #" & lastDate & "#"
                              Dim Table As New DataSet
                              Dim Adpt As New OleDbDataAdapter(sSQL, objConnection)
                              End Try
                              ' return the recordset as an array
                              Return Table
                          End Function
                          Protected Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender
                              Dim nextDate As DateTime
                              ' Checks to see if there are any dates that need to be returned
                              If Not dsEvents Is Nothing Then
                                  ' if there is, then draw them
                                  For Each dr As DataRow In dsEvents.Tables(0).Rows ' this array will be full of your db data
                                      nextDate = CType(dr("eventDate"), DateTime)
                                      If nextDate = e.Day.Date Then
                                          'e.Cell.BackColor = System.Drawing.Color.Pink  ' changes the background color
                                          e.Day.IsSelectable = True  ' makes the date selectable
                                          e.Cell.Font.Bold = True
                                          Dim iLink As New HyperLink() ' Create a hyperlink of the date
                                          iLink.Text = e.Day.Date.Day '& "<br>" & dr(2) ' sets the date as a link
                                          iLink.ForeColor = Drawing.ColorTranslator.FromHtml("#931D1D") ' give it a cool color
                                          iLink.Font.Underline = True ' underline it
                                          ' Here is where we create a nice ToolTip when the mouseOver event fires
                                          iLink.Attributes.Add("onmouseover", "Tip('" & dr(2) & "', BALLOON, true, ABOVE, true, OFFSETX, -20)")
                                          iLink.ToolTip = dr(2)
                                          ' Lets create the link to fire the Lightbox
                                          iLink.NavigateUrl = Server.UrlPathEncode("javascript:this.onclick('#mb_inline" & dr(0) & "', '" & dr(2) & "', '360 180'));") ' the URL
                                          e.Cell.Controls.Add(iLink) 'Add the link
                                          buildDivTags(dr(0), dr(2), dr(3), dr(4))
                                      End If
                              End If
                          End Sub
                      ' We need to create <Div> tags to control the output of the Lightbox contents
                          Private Sub buildDivTags(ByRef id As String, ByRef title As String, ByRef data As String, ByRef link As String)
                              Response.Write(vbCrLf & "<div id='mb_inline" & id & "' style='display: none;'>" & vbCrLf)
                              Response.Write("<span style='color: #fff; text-align: center;'><A href='" & link & "' target='_blank' id='mbTitleLink'>" & title & "</a><br/><br/>" & vbCrLf)
                              Response.Write(data & "<br/><br/>" & vbCrLf)
                              Response.Write("<a href='' style='color: #dcdcdc;' onclick='Mediabox.close();return false;'>Close</a></span></div>" & vbCrLf)
                          End Sub
                      End Class

Open in new window

It's important to note that this page uses MooTools and MediaBoxAdvanced as the Lightbox and the now difficult to find ToolTip by Walter Zorn, All the required .js files can be found here.  

If you want to see a working example of this code, you can CLICK HERE.

The entire code can be downloaded, including a sample database, the .aspx, the .vb, the .css and the .js files by clicking HERE.

If you have any problems with the code or any suggestions, please let me know.  I tested this code across FireFox and IE 7 and 8 with no issues.  Enjoy!
Mark FranzProject Manager
Even though I am no longer writing code for a living, I still write apps for fun and to keep my skills sharp.

Comments (2)

Mark FranzProject Manager


Apparently my hosting company is not allowing me to run certain JS pieces of code, please download the entire .zip package and test on your server.  It works on my LocalHost just fine and on a test server, but my hosting server IT guys are idiots.  Sorry.
Mark FranzProject Manager


I have changed hosting companies and no longer have any issues with the code and .js running.  Thank you!

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.