May 12, 2008

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.


string path DotNetNuke.Common.Utilities.Calendar.InvokePopupCal(StartDate);
CalendarImage.Attributes.Add("OnClick", path);


Dim path As String = DotNetNuke.Common.Utilities.Calendar.InvokePopupCal(StartDate)
"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!

In Action


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.

tags: DNN, Tutorials
comments powered by Disqus

Content provided in this blog is provided "AS-IS" and the information should be used at your own discretion.  The thoughts and opinions expressed are the personal thoughts of Mitchel Sellers and do not reflect the opinions of his employer.

Content Copyright

Content in this blog is copyright protected.  Re-publishing on other websites is allowed as long as proper credit and backlink to the article is provided.  Any other re-publishing or distribution of this content is prohibited without written permission from Mitchel Sellers.