Click here to Skip to main content
15,889,281 members
Articles / Web Development / ASP.NET

JSCalendar Custom Control for Visual Studio .NET

Rate me:
Please Sign up or sign in to vote.
2.52/5 (14 votes)
2 Oct 2005CPOL1 min read 92.6K   2.1K   33   21
Creating a custom control for JSCalendar.

Sample Image - jscalendar.jpg

Introduction

JSCalendar is one of the powerful JavaScript calendars, you can download it from http://sourceforge.net/projects/jscalendar/.

JSCalendar can be used to add to date input fields a button that lets the user choose a date using a pop-up calendar. The control will allow you to add this calendar to your ASP.NET pages without configuring the JavaScript code.

How to use the control

  1. Download the file DLL.Zip
  2. Unzip the file to Calendar.dll
  3. Open Visual Studio .NET
  4. Right click on the toolbox then click Add/Remove Item
  5. Image 2

  6. From the Customize Tool Box window, click Browse, and select the DLL file (Calendar.Dll)
  7. Image 3

  8. The control will be added to your toolbox:
  9. Sample Image - jscalendar.jpg

  10. Create a new ASP.NET project, then drag and drop the calendar control to your form.
  11. From the Properties window you can set the path of the scripts file (the scripts file must be included in the same project and you can download it from  http://sourceforge.net/projects/jscalendar/).
  12. Also you can specify the path of the calendar image and the format for date.

Setting up the scripts

Scripts files are downloadable from http://sourceforge.net/projects/jscalendar/

  • Download the zip file for the calendar
  • Unzip the file to folder /JSCalendar in your application
  • In the properties of your control, type “/jscalendar”

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
CEO Enozom Software
Egypt Egypt
Hazem Torab, founder & CEO at Enozom Software, a fast growing software company in Alexandria. Hazem has more than 6 years of experience in management and team leading, and 10+ years of professional experience in the software development field.

Hazem also is a co-founder and chairman of Ayaady for Investment and Agriculture, a crowd funded company and the first Egyptian online fresh meat shop directly from the farm to the consumers.

Before founding Enozom, Hazem was a co-founder & CEO of IRange Software. He also worked at ITWorx and Raya Software after his graduation in 2004 from Alexandria University, Faculty of Engineering, Computer and Systems Department.
https://www.enozom.com

Comments and Discussions

 
QuestionHow to use in grid view rows Pin
soh_sid24-Aug-09 20:42
soh_sid24-Aug-09 20:42 
QuestionCan i use it for free? Pin
orhankemal20-Aug-07 4:23
orhankemal20-Aug-07 4:23 
AnswerRe: Can i use it for free? Pin
Hazem Torab23-Jan-08 9:00
Hazem Torab23-Jan-08 9:00 
QuestionStack overflow error Pin
NyNiru27-Jun-07 6:28
NyNiru27-Jun-07 6:28 
Generalinput file validation(picture width and height should be less then 300 pixels.) Pin
jayvaishnav8216-Mar-07 19:54
jayvaishnav8216-Mar-07 19:54 
QuestionHow to Make Scedular using JSCalander Pin
gandhisunny_god16-Mar-07 19:44
gandhisunny_god16-Mar-07 19:44 
GeneralModification to Use Embedded Resources Pin
OtisAardvark4-Jan-07 4:18
OtisAardvark4-Jan-07 4:18 
QuestionHow to call a post back [modified] Pin
Tristy9-Aug-06 11:07
Tristy9-Aug-06 11:07 
GeneralJSCalendar Custom Control and Atlas Pin
quocvuong20052-Jul-06 17:27
quocvuong20052-Jul-06 17:27 
GeneralRe: JSCalendar Custom Control and Atlas Pin
jcm123426-Apr-07 1:12
jcm123426-Apr-07 1:12 
QuestionHow to add design time support Pin
fpw23771-Jul-06 12:06
fpw23771-Jul-06 12:06 
AnswerRe: How to add design time support Pin
Tristy3-Aug-06 8:23
Tristy3-Aug-06 8:23 
AnswerRe: How to add design time support Pin
xsoftdev15-Jun-07 8:09
xsoftdev15-Jun-07 8:09 
GeneralProblems with display on design surface Pin
braditude20-Jun-06 23:01
braditude20-Jun-06 23:01 
GeneralLittle Tweaks and VB.NET Source Code Pin
TrickUK14-May-06 22:43
TrickUK14-May-06 22:43 
Hi Hazem,

Nice work, saved me some time. I've converted your source code to VB.NET (see below) and added a couple of tweaks. I prefer to use System.IO.StringWriter when concatenating strings as the code looks less cluttered and easier to debug IMO (also means you don't need to be using the VisualBasic namespace when coding C# Smile | :) )

The only other notable alteration is when setting the ScriptPath property, where I simply added a check to ensure there's a trailing slash so the tags are rendered properly. Caught me out on the first execution Wink | ;) .

Anyway, here goes;

Imports System.IO
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.ComponentModel

<DefaultProperty("Value"), ToolboxData("<{0}:calendarselect runat=server></{0}:calendarselect>")> _
Public Class CalendarSelect
Inherits System.Web.UI.WebControls.TextBox

Public Event Change As EventHandler

Private myImageURL As String = String.Empty
Private myScriptsPath As String = String.Empty
Private myDateFormat As String = "dd/MM/yyyy"
Private myTheme As String = "calendar-Blue"
Private myLanguage As String = "en"
Private imgCalendar As New Image

#Region " Property Declarations "
<Bindable(True), Category("Appearance"), DefaultValue("en")> _
Public Property Language() As String
Get
Return myLanguage
End Get
Set(ByVal Value As String)
myLanguage = Value
End Set
End Property

<Bindable(True), Category("Appearance"), DefaultValue("calendar-Blue")> _
Public Property Theme() As String
Get
Return myTheme
End Get
Set(ByVal Value As String)
myTheme = Value
End Set
End Property

<Bindable(True), Category("Appearance"), DefaultValue("dd/MM/yyyy")> _
Public Property DateFormat() As String
Get
Return myDateFormat
End Get
Set(ByVal Value As String)
myDateFormat = Value
End Set
End Property

<Bindable(True), Category("Appearance"), DefaultValue("")> _
Public Property ScriptsBasePath() As String
Get
Return myScriptsPath
End Get
Set(ByVal Value As String)
myScriptsPath = Value
If Not myScriptsPath.EndsWith("/") Then myScriptsPath &= "/"
End Set
End Property

<Bindable(True), Category("Appearance"), DefaultValue("")> _
Public Property ImageURL() As String
Get
Return myImageURL
End Get
Set(ByVal Value As String)
myImageURL = Value
End Set
End Property
#End Region

Protected Overloads Overrides Sub Render(ByVal output As HtmlTextWriter)
EnsureChildControls()
Dim _page As Page = CType(System.Web.HttpContext.Current.Handler, Page)

If Not _page.IsClientScriptBlockRegistered("Calendar") Then
With New StringWriter
.WriteLine("<link title=""" & myTheme & """ media=""all"" href=""" & myScriptsPath & myTheme & ".css"" type=""text/css"" rel=""stylesheet"">")
.WriteLine("<script src=""" & myScriptsPath & "calendar.js"" type=""text/javascript""></script>")
.WriteLine("<script src=""" & myScriptsPath & "lang/calendar-" & myLanguage & ".js"" type=""text/javascript""></script>")
.WriteLine("<script src=""" & myScriptsPath & "calendar-setup.js"" type=""text/javascript""></script>")
.WriteLine("<script> var today = new Date(); </script> ")
_page.RegisterClientScriptBlock("Calendar", .ToString)
output.Write(.ToString)
End With
End If
MyBase.Render(output)
output.Write("&nbsp;<img src=""" + myImageURL + """ id=""" + Me.ClientID + "img"" border=""0"" style=""cursor:hand"" align=""absmiddle"">")

With New StringWriter
.WriteLine()
.WriteLine("<script>")
.WriteLine("Calendar.setup({")
.WriteLine("inputField : '" + Me.ClientID + "', ")
.WriteLine("ifFormat : '" + ConvertToJSDateFormate(myDateFormat) + "', ")
.WriteLine("button : '" + Me.ClientID + "img', ")
.WriteLine("align : 'B1', ")
.WriteLine("singleClick : true, ")
.WriteLine("dateStatusFunc : function (date) {")
.WriteLine("return false;")
.WriteLine("}")
.WriteLine("})")
.WriteLine("</script>")
output.Write(.ToString)
End With
End Sub

Private Function ConvertToJSDateFormate(ByVal f As String) As String
f = f.Replace("dd", "%d")
f = f.Replace("MM", "%m")
f = f.Replace("yyyy", "%Y")
Return f
End Function

Protected Overloads Overrides Sub CreateChildControls()
imgCalendar.ImageUrl = myImageURL
imgCalendar.ID = "img" + Me.ID
imgCalendar.EnableViewState = True
Controls.Add(imgCalendar)
End Sub

Public Sub RaisePostDataChangedEvent()
OnChange(EventArgs.Empty)
End Sub

Public Overridable Sub OnChange(ByVal e As EventArgs)
RaiseEvent Change(Me, e)
End Sub
End Class

HTH, Trick.
GeneralError Creation Control Pin
Asif solkar11-Jan-06 8:54
Asif solkar11-Jan-06 8:54 
Questionstand-alone control Pin
genxer28-Dec-05 12:15
genxer28-Dec-05 12:15 
AnswerRe: stand-alone control Pin
Hazem Torab29-Dec-05 10:17
Hazem Torab29-Dec-05 10:17 
GeneralRe: stand-alone control Pin
genxer5-Jan-06 5:36
genxer5-Jan-06 5:36 
Questionsetting javascipt path Pin
Prabakar Devarajan21-Sep-05 22:29
Prabakar Devarajan21-Sep-05 22:29 
AnswerRe: setting javascipt path Pin
Hazem Torab2-Oct-05 0:13
Hazem Torab2-Oct-05 0:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.