JSCalendar Custom Control for Visual Studio .NET

I want to use it as a calender control under Grid view's template column.
I am done all the things setup but after selecting date it is not being set to input field that is a text box in grid view row.

Hello, i want to use your component with my application but this app belongs
to my company can i use it for free?

Yes Sure

Hazem Torab

When I am dragging more than one JSCalendar on to the webform ,
The date selection pops up the Stack overflow error. How can this be resolved? Please help.
It work sfine with one instance of the JSCalendar.
Thanks a lot.

nyniru

How can i validate the input updoaded picture with width and height should be less then 300 pixels using validation control.

send me code for the schedular if you any one can because if it posiible then ican understand this tool.

sunny

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: -

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

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...

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

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

Hi,
I seem to have a Flat Calendar working on my page

asp:Label ID="Container" runat="server" Width="200">
asp:HiddenField ID="TextBox1" runat="server" />
asp:Label ID="Label1" runat="server" Text="">

function dateChanged(calendar) {
// Beware that this function is called even if the end-user only
// changed the month/year. In order to determine if a date was
// clicked you can use the dateClicked property of the calendar:

if (calendar.dateClicked) {
var MyD = calendar.date;
var MyTxt = document.getElementById("TextBox1");
MyTxt.value = MyD.print("%d/%m/%Y");
Label1.innerHTML = MyD.print("%d/%m/%Y");

//window.location = "Default.aspx";
}
};

Calendar.setup({
//displayArea : "TextBox1", //*
daFormat : "%d/%m/%Y",
//date : "09/08/2006",
showsTime : false,
weekNumbers : false,
range : [2006, 2009],
flat : "Container",
flatCallback : dateChanged,
//button : "MyButton", //*
step : 1
});

MyCode behind is

protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false)
{
DateTime MyStartDate = DateTime.Now.AddDays(2);
Label1.Text = MyStartDate.ToShortDateString();
}

}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Value.ToString();
}

But i want to be able to call a postback when the user changes the date
- if (calendar.dateClicked)
do post back here!!!

And i want to be able to dynamically load the date + 2 days on page load
and then each time the page post back to hold the changed date

I hope that makes sense

Can anyone help Please Please!!!!!!!!

-- modified at 17:08 Wednesday 9th August, 2006

Hello ! I used library Calendar.dll and it works fine . But it try to use it with Atlas, it don't work with UpdatePanel control of Atlas . I don't understand what problem . I hope that anyone will help me . Thanks !

i am also facing same problem . plz help

gyui

This contorl is nice but it is missing a designer class. A designer class is what VS.Net calls when you drop it on a web form. To get rid of the "Error Creating Control" add this class:

class JSCalendarDesigner : System.Web.UI.Design.ControlDesigner
{

public override string GetDesignTimeHtml()
{
StringWriter sw = new StringWriter();
HtmlTextWriter tw = new HtmlTextWriter(sw);
HtmlGenericControl gc = new HtmlGenericControl();

gc.InnerText = "[JSCalendar]";

gc.RenderControl(tw);

return sw.ToString();

}
}

then add an attribute like this to the main class:

[DefaultProperty("Value"),
ToolboxData("<{0}:JSCalendar runat=server></{0}:JSCalendar>"),
Designer("CalendarControl.JSCalendarDesigner")]

recomplie then drop it on a form and it will look like a regular control.

Frank

Hi i dont understand where this bit goes.
I have copied dll correctly and have in toolbox i have scripts in same project i can drag and drop and get error rendering control when i compile i get text box and i have image button which i set from scripts folder
but i still have error rendering
please help - am i being stupid - sorry
many thanks

Thanks for the designer code.

Hi there -

In general, I am happy with this control. However i in the HTML design surface in 2005 (and i thin also in 2003) i get

"Error Rendering Control"
An unhandled exception has occured. Object refernce not set to an instance of an object"

This doesnt affect the actual use of the control at runtime, only at design time. Any idea why this might be?

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(" <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.

I Set the Paths as given in ur instructions Copied the Dll to Bin Folder addded component on Tool Box the Moment i Drag

It gives this Error : Error Rendering Control -JsCalendar1 . An Unhandled Exception has occoured:

I am using Vs2005

Asif

I have found that the control can't be stand alone in the web forms. It has to be in either placeholders or div tags. Is this a bug with JSCalendar or the dll?
Thanks

I tried it and it's working standalone... please give me more details about the error ..
thanks
Hazem Torab
http://www.ajaxprojects.com

It's not an error. If you drag and drop the control anywhere in the web form the image shows up at the top of the page and the textbox shows up where the control used to be. Looks like position properties of JScalendar are inherited by textbox but not by the image. Does the image have to be an web form image to inherit the properties?

Thanks

It could be better if you have told how to setup the javascript file paths and image file paths.

Power your brain
Prabakar.

Thank you for your comment
I've added it to the article

Hazem Torab

JSCalendar Custom Control for Visual Studio .NET

Introduction

How to use the control

Setting up the scripts

License

Comments and Discussions