Adding A Popup Calendar to Your DNN Module
Recently when working on modules for clients and enhancements for my own modules
I have been looking for better ways to utilize core DotNetNuke functionaltiy.
This article is the first in a long series of articles that I will be posting regarding
using DotNetNuke core functions and controls in custom modules. This first
article will walk you through the process to add a simple popup calendar as an option
for a user that is being prompted for a date. Many people do not know that
DotNetNuke provides a very nifty interface that handles all the hard work.
This article will walk you through this step by step, first with the .ascx code,
then the .cs or .vb code, the lastly with a screencapture of the component in action.
The User Control Code (.ascx)
Nothing special is needed to accomplish this effect, for this example we simply
create a textbox called StartDate and an image called CalendarImage. If you
notice the source for the calendar image references a calendar icon that is provided
by the DotNetNuke core. You can put your own image in if you desire by including
it in your module package.
<asp:TextBox ID="StartDate" runat="server" MaxLength="10" />
<asp:Image ID="CalendarImage" runat="server" ImageUrl="~/Images/Calendar.png" />
This is it for the front end of the interface, next we will move on to the codebehind
The Code Behind (.cs or .vb)
The code needed to complete the process is very simple. I broke the below
examples into two parts to make it easier for you to read here in the blog, but
you could actually accomplish the entire task on one line of code. We call
a DotNetNuke method to get an invoke URL to show the calendar, then we add an OnClick
action for our image to call that url. When the window is closed inside the
calendar, the date value selected will be returned to the page and put in the proper
textbox.
C#
string path = DotNetNuke.Common.Utilities.Calendar.InvokePopupCal(StartDate);
CalendarImage.Attributes.Add("OnClick", path);
VB
Dim path As String = DotNetNuke.Common.Utilities.Calendar.InvokePopupCal(StartDate)
CalendarImage.Attributes.Add("OnClick", path)
This code should be added to your modules Page_Load event and only needs to be executed
for the first load of a page. This completes the process.
Action Shot
Below is a screen capture of the above demo in action!
Conclusion
I hope this quick overview of adding a popup calendar to your DotNetNuke module has been helpful. Please share your comments below, also I am taking requests for
the next DotNetNuke function/control to go over in a similar fashion.
Posted by Mitchel on Monday, May 12, 2008
Click here to post a comment