Click here to Skip to main content
Click here to Skip to main content

JSCalendar Custom Control for Visual Studio .NET

, 2 Oct 2005 CPOL
Rate this:
Please Sign up or sign in to vote.
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. From the Customize Tool Box window, click Browse, and select the DLL file (Calendar.Dll)
  6. The control will be added to your toolbox:
  7. Sample Image - jscalendar.jpg

  8. Create a new ASP.NET project, then drag and drop the calendar control to your form.
  9. 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/).
  10. 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)

Share

About the Author

Hazem Torab
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.
Follow on   Twitter   LinkedIn

Comments and Discussions

 
QuestionHow to use in grid view rows Pinmembersoh_sid24-Aug-09 20:42 
QuestionCan i use it for free? Pinmemberorhankemal20-Aug-07 4:23 
AnswerRe: Can i use it for free? PinmemberHazem Torab23-Jan-08 9:00 
QuestionStack overflow error PinmemberNyNiru27-Jun-07 6:28 
Generalinput file validation(picture width and height should be less then 300 pixels.) Pinmemberjayvaishnav8216-Mar-07 19:54 
QuestionHow to Make Scedular using JSCalander PinmemberMember #345857016-Mar-07 19:44 
GeneralModification to Use Embedded Resources PinmemberOtisAardvark4-Jan-07 4:18 
Nice work, this saved me a considerable amount of time.
 
I made a couple of tweaks to help in portability between projects. Specifically, I didn't want to have a Server Control that required the Javascript and CSS files to be copied into each project sepearately.
 
BTW - I also ported the code to VB, so the detail below will not match perfectly Smile | :)
 
To address this I put the files the Javascript files (from the Sourceforge project) into subdirectories alongside the server control. Each of these is set to be an "Embedded Resource" at compile time.
 
Next up I modified the AssemblyInfo.vb file to include these resource as follows: -
 

<Assembly: WebResource("Aardware.Impact.ControlLibrary.Calendar.js", "text/javascript")>
<Assembly: WebResource("Aardware.Impact.ControlLibrary.Calendar-Setup.js", "text/javascript")>
<Assembly: WebResource("Aardware.Impact.ControlLibrary.Calendar-EN.js", "text/javascript")>
<Assembly: WebResource("Aardware.Impact.ControlLibrary.calendar-Blue.css", "text/css")>
<Assembly: WebResource("Aardware.Impact.ControlLibrary.calendar-Brown.css", "text/css")>
<Assembly: WebResource("Aardware.Impact.ControlLibrary.calendar-Green.css", "text/css")>
<Assembly: WebResource("Aardware.Impact.ControlLibrary.calendar-System.css", "text/css")>

 
Finally, I modified the the script registration code so that it uses WebResources rather than explicit include statements. Similarly, I moved the code into the OnLoad event of the control so that everything is placed on the page in a logical sequence and is there when required.
 
The OnLoad event code looks like this...
 

Private Sub JSCalendar_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
  ' Register the JAVASCRIPT blocks
  If (Not Me.Page.ClientScript.IsClientScriptIncludeRegistered("JSCalendarScript")) Then
    Dim scriptLocation As String = Page.ClientScript.GetWebResourceUrl(GetType(DateField), "Aardware.ControlLibrary.Calendar.js")
    Me.Page.ClientScript.RegisterClientScriptInclude("JSCalendarScript", scriptLocation)
  End If
  If (Not Me.Page.ClientScript.IsClientScriptIncludeRegistered("JSCalendarLang")) Then
    Dim resourceName As String = String.Format("Aardware.ControlLibrary.Calendar-{0}.js", Me.Language)
    Dim scriptLocation As String = Page.ClientScript.GetWebResourceUrl(GetType(DateField), resourceName)
    Me.Page.ClientScript.RegisterClientScriptInclude("JSCalendarLang", scriptLocation)
  End If
  If (Not Me.Page.ClientScript.IsClientScriptIncludeRegistered("JSCalendarSetup")) Then
    Dim scriptLocation As String = Page.ClientScript.GetWebResourceUrl(GetType(DateField), "Aardware.ControlLibrary.Calendar-Setup.js")
    Me.Page.ClientScript.RegisterClientScriptInclude("JSCalendarSetup", scriptLocation)
  End If
 
  ' Register the CSS theme with the page
  If (Not Me.Page.ClientScript.IsClientScriptBlockRegistered("JSCalendarTheme")) Then
    Dim resourceName As String = String.Format("Aardware.ControlLibrary.{0}.css", Me.Theme)
    Dim includeTemplate As String = "<link rel='stylesheet' text='text/css' href='{0}' />"
    Dim includeLocation As String = Page.ClientScript.GetWebResourceUrl(GetType(DateField), resourceName)
    Dim include As LiteralControl = New LiteralControl(String.Format(includeTemplate, includeLocation))
    Me.Page.Header.Controls.Add(include)
    Me.Page.ClientScript.RegisterClientScriptBlock(GetType(DateField), "JSCalendarTheme", "")
  End If
 
End Sub 'DateField_Load

 
This removes the need for the ScriptsBasePath property and make portability easier - I only need to reference the library now, rather than worry about the scripts and style sheets.
 
The solutions works nicely for me and I can live the the small loss of flexibility in not being able to modify the Javascript and CSS files on a project be project basis.

 
OtisAardvark

QuestionHow to call a post back [modified] PinmemberTristy9-Aug-06 11:07 
GeneralJSCalendar Custom Control and Atlas Pinmemberquocvuong20052-Jul-06 17:27 
GeneralRe: JSCalendar Custom Control and Atlas Pinmemberjcm123426-Apr-07 1:12 
QuestionHow to add design time support Pinmemberfpw23771-Jul-06 12:06 
AnswerRe: How to add design time support PinmemberTristy3-Aug-06 8:23 
AnswerRe: How to add design time support Pinmemberxsoftdev15-Jun-07 8:09 
GeneralProblems with display on design surface Pinmemberbraditude20-Jun-06 23:01 
GeneralLittle Tweaks and VB.NET Source Code PinmemberTrickUK14-May-06 22:43 
GeneralError Creation Control PinmemberAsif solkar11-Jan-06 8:54 
Questionstand-alone control Pinmembergenxer28-Dec-05 12:15 
AnswerRe: stand-alone control PinmemberHazem Torab29-Dec-05 10:17 
GeneralRe: stand-alone control Pinmembergenxer5-Jan-06 5:36 
Questionsetting javascipt path PinmemberPrabakar Devarajan21-Sep-05 22:29 
AnswerRe: setting javascipt path PinmemberHazem Torab2-Oct-05 0:13 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.141022.2 | Last Updated 2 Oct 2005
Article Copyright 2005 by Hazem Torab
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid