Using Yahoo.UI.Calendar in PageTemplate and Master Page - Part II

30 Nov, 2006  ASP.NET

Downloads ~ Using YU.Calendar in BasePage (ASP.NET 1.1)
Using Yahoo.UI.Calendar in MasterPage (ASP.NET 2.0)

UPDATE: Using Popup ASP.NET Calendar in MasterPage (ASP.NET 2.0)

Yahoo.UI.Calendar in BasePage and MasterPage

Introduction

This article is a part II of my previous article “Using ASP.NET Calendar and Yahoo.UI.Calendar in ASP.NET 1.1“.As you all know, I have shown very simple way of using those calendar controls in ASP.NET 1.1 Project in my previous article. However, I got some mails that they has some problems in using Yahoo.UI.Calendar from Master Page or Base Page in their project. So, I started writing this part II for those who has problems.

In this article, I’m gonna show you how to use Yahoo.UI.Calendar in BasePage (ASP.NET 1.1) and Master Page (ASP.NET). I’d suggest you to download the sample projects before start reading the rest of this article.

NOTE: I won’t cover anything about using ASP.NET Calender in BasePage since no one seems like no interest for using this control in their project. UPDATE I have uploaded a sample for using Popup ASP.NET Calendar in Master Page. So, You may download it from here and Also, I assume that you already know what BasePage/Master Page is and how it does.

Using Yahoo.UI.Calendar in BasePage (Page Template) (ASP.NET 1.1)

Let’s take a look ASP.NET 1.1 Project firstly.

The following files will be included in that project.

  • [Controls]
    • WebForm1Control.ascx
  • [CSS]
    • [CSS files.....]
  • [Images]
  • [JS]
  • BasePage.cs
  • WebForm1.aspx
CSS, Images and JS No modification required except pdate.gif under Images Folder.
BasePage.cs
 Master Page. This class is inherited from System.Web.UI.Page. (As there is no master
page in ASP.NET 1.1, the custom class need to be created to act like Master
Page.)
WebForm1.aspx
 a web page which is inherited from BasePage
WebForm1Control.ascx
 a User Control that support to be attached to the placeholder of BasePage.

As we all know that there is no master page in ASP.NET 1.1, we have to create a custom class called BasePage that can be inherited from other content pages. If you take a look at Basepage, you will see a public function called AddCalendar. In this function, I wrote the same code that we used in my previous article.

Lab1: How to add this code in your owned project.

Note: As there are a lot of way to create BasePage or Page Template in ASP.NET 1.1, I can’t say that the way that I used to create a basepage will be as same as yours. So, It’s better if you check whether we are in the way or not. If it’s the same, free free you can see my coding without any modification. If not, you might need to modify a lit bit. In case you are not able to modify the coding to match with your basepage, leave a comment what problem you are getting. I will try to help you as much as I can. but I won’t say that would be so quick because I have so much troubles in internet. Anyway, All I can say now is that I will reply as soon as possible.

1. Copy CSS files, Javascript files and Images to your project

2. Copy the required coding from BasePage. eg: AddCalendar Functions. Here again. I can’t say that which coding you should copy from my basepage because I’m not sure about your existing coding for base page.

3. Add the following coding in your WebForm.

base.AddCalendar();

4. Add the following coding in your Child Page..

<asp:TextBox id="txtDateOfBirth" runat="server"></asp:TextBox>
<A onclick="showCalendar1('<% =txtDateOfBirth.ClientID %>','dateLink1')"
href="javascript:void(null)">
<IMG id="dateLink1" style="MARGIN: 5px; VERTICAL-ALIGN: middle"
src="./Images/pdate.gif" border="0">
</A>

That’s all. How easy it is! :)

Okay. Let’s move on to ASP.NET 2.0 Project.

Using Yahoo.UI.Calendar in Master Page(ASP.NET 2.0)

1. Copy CSS files, Javascript files and Images to your project

2. Add Javascript coding in MasterPage and link to the required CSS and Javascript.

Note:
I would suggest you to double check whether the path of CSS files and Javascript is correct or not. Otherwise, the calendar wont’ be shown in your page. The best way to test is that you can add “alert(’aa’);” in init() function. This alert should be shown as soon as your page is loaded.

3. Add a DIV called cal1Container in your Master Page. This DIV is a placeholder where Yahoo.UI.Calendar suppose to be attached. You should also note that you can set higher value to Z-ORDER in case this calendar is showing behind the other controls.

<div id="cal1Container" style="position: absolute; display: none;"/>

4. Add the following coding in your User Control.

<asp:TextBox id="txtDateOfBirth" runat="server"></asp:TextBox>
<A onclick="showCalendar1('<% =txtDateOfBirth.ClientID %>','dateLink1')"
href="javascript:void(null)">
<IMG id="dateLink1" style="MARGIN: 5px; VERTICAL-ALIGN: middle"
src="./Images/pdate.gif" border="0">
</A>

That’s. Now, you can start running your project and check whether Yahoo.UI.Calendar shows properly in your page or not.

Hopefully, you may find it useful.
Thanks.

33 Comments so far »

  1. Ashish C. said

    am December 1 2006 @ 12:23 pm

    You finally managed to get the code in. :-) How did you do it?

  2. Michael Sync said

    am December 2 2006 @ 4:27 am

    I did it manually… man..

    actually, i did like that in my previous also…
    Adding Custom Tab into Toolbox of VS 2003 or 2005 at runtime

    SendMessage - C#

    C# - Enums

    But I dont wanna do like that . man. cuz it takes a lot of time if we hav a lot of code to post..

    In codeproject, it’s not like that.. all we need to do is that we just need to put our code in p tag.. then coloring engine will add the required color automatically..

    u know.. i hav mailed to support about plug-in that Alex suggested but i dont get any reply from their site.. :(

  3. Ashish C. said

    am December 5 2006 @ 11:41 am

    How about commenting on http://www.mark.wordpress.com or http://www.matt.wordpress.com and telling him? Commenting definetly gets more noticed.

  4. Joe R said

    am January 17 2007 @ 8:40 pm

    This is a pretty cool tool, thanks for posting this. I haven’t been able to have it populate my input box. Everything works except that. I tried loading the VS2005 solution in the download file and it wouldn’t load.

  5. Michael Sync said

    am January 18 2007 @ 2:55 am

    Thanks for visiting my blog.

    I tried loading the VS2005 solution in the download file and it wouldn’t load.

    PopUpCalendarTestinMasterpage.zip ??
    Which error are you getting?

    I haven’t been able to have it populate my input box

    It would be great if you give me more details.

  6. Custom Javascript Dialog « Michael Sync said

    am March 15 2007 @ 1:09 pm

    [...] Let’s start coding! (I’m gonna use the basepage class that I have used in this sample (zip file no #1).) Firstly, we write a Javascript function called [...]

  7. saravana said

    am August 17 2007 @ 4:50 am

    hi Michael Sync ,

    i am using UsingYUCalinMasterPage calden in my project.By default dd/mm/yyy format is coming instead of MM/DD/YYY. how to change it.please tell me.

  8. Michael Sync said

    am August 19 2007 @ 2:30 am

    Hi Saravana,

    Sorry for late reply.

    There is one javascript function called setDate1() in MasterPage or BasePage. Check this function. You will see the following line.

    oTxtDate.value = formattedDate.getDate()+’/'+ (formattedDate.getMonth() +1) +’/'+ formattedDate.getFullYear();

    So, change like that..

    oTxtDate.value = (formattedDate.getMonth() +1) +’/'+ formattedDate.getDate()+’/'+ formattedDate.getFullYear();

  9. saravana said

    am August 19 2007 @ 6:13 pm

    Thanks a lot Michael , its working.

  10. Nelson said

    am September 6 2007 @ 3:54 pm

    Hi, I’m trying to use the calendar (very good by the way)on my existing project. I have my master page and my webpages and webcontrols. I followed the steps that you described in the section (Using Yahoo.UI.Calendar in Master Page(ASP.NET 2.0)) and everytime I run the page I receive the script error:
    ‘YAHOO’ is undefined. What I’ve done is create a webcontrol called ‘Calendar.ascx’. I included my control on a web page and the scripts and the div with the container on my master page. Do you have any idea what can be happening?

  11. Michael Sync said

    am September 6 2007 @ 5:25 pm

    The link to Yahoo core Javascript file should be in HEAD of Master page..
    Where did you put those links??

  12. ASP.NET Calendar Control and Yahoo.UI.Calendar « Michael Sync said

    am September 8 2007 @ 3:52 pm

    [...] Using Yahoo.UI.Calendar in PageTemplate and Master Page - Part II [...]

  13. Nelson said

    am September 10 2007 @ 6:49 pm

    Thanks, I think the problem was on the div container on the master page. Now I’m trying to put the calendar on a column on my gridview.

    <a href=”javascript:void(null)” onclick=”showCalendar1(”,’dateLink2′)”>

    I always receive “Error 1 The name ‘calDateRappel’ does not exist in the current context C:\MyApp\Pages\Journal\Journals.aspx 65 ”
    That just happens when I put it in any template. If I use it outside the grid view it works perfectly.
    Thanks,

  14. Nelson said

    am September 10 2007 @ 6:50 pm

    Sorry, the code was not correct. The correct code is:

    <asp:TextBox ID=”calDateRappel” runat=”server” Text=”>
    <a href=”javascript:void(null)” onclick=”showCalendar1(”,’dateLink2′)”>

  15. Nelson said

    am September 10 2007 @ 6:52 pm

    Hmm, I dont know why the its not allowed to be pasted. Thats what I have on the showcalendar function.

  16. Nelson said

    am September 10 2007 @ 6:53 pm

    I found it, its because the per cent character. calDateRappel.ClientID is the parameter of the function showcalendar1

  17. Michael Sync said

    am September 11 2007 @ 1:22 am

    Okay. Nelson. :)

  18. Nelson said

    am September 13 2007 @ 9:19 pm

    lol. Ok, what I fixed was the problem of posting the code here in the forum. My problem trying to use the calendar in a gridview column as a template still exists. Do you have any idea why I always receive “Error 1 The name ‘calDateRappel’ does not exist in the current context C:\MyApp\Pages\Journal\Journals.aspx 65 ” ? Thanks, Nelson.

  19. Nelson said

    am October 2 2007 @ 8:54 pm

    Any ideas?

  20. Michael Sync said

    am October 3 2007 @ 10:46 am

    >>Any Idea?

    For what??

  21. Nelson said

    am October 3 2007 @ 9:03 pm

    I’m trying to put the calendar on a column on my gridview.

    I always receive “Error 1 The name ‘calDateRappel’ does not exist in the current context C:\MyApp\Pages\Journal\Journals.aspx 65 ”
    That just happens when I put it in any template. If I use it out of the grid view it works perfectly.
    Thanks,

    Nelson

  22. marlo said

    am October 9 2007 @ 1:44 am

    hi, just got the code and it runs ok on my desktop. But when i deploy it and run it as in client browser, there’s an error messages like ‘ YAHOO’ is undefined.. how do i fix this?

  23. Michael Sync said

    am October 9 2007 @ 2:08 am

    You need

    1. to ensure whether the js file has been deployed on the server or not.
    2. the path of js files should be corrected.. (I know you may already did that but just double check to ensure all basic things are all right. )
    3. the sequence of scripts file links should be corrected.

  24. marlo said

    am October 9 2007 @ 5:53 pm

    your right! the problem is the path of the js files , the server recognize this settings -

    NOT THIS ONE -

    hope this will help.. Thanks again!! Your the Man!

  25. Michael Sync » Custom Javascript Dialog said

    am October 13 2007 @ 12:13 pm

    [...] Let’s start coding! (I’m gonna use the basepage class that I have used in this sample (zip file no #1).) Firstly, we write a Javascript function called [...]

  26. Michael Sync » ASP.NET Calendar Control and Yahoo.UI.Calendar said

    am October 13 2007 @ 12:50 pm

    [...] Using Yahoo.UI.Calendar in PageTemplate and Master Page - Part II [...]

  27. Madhu said

    am October 21 2007 @ 3:57 am

    Hi i am facing the below error on IE status bar. Please let me know what changes i need to do in the code.

    ‘this.oDomContainer’ is null or not an object.

    thanks and regards
    Madhu

  28. cecilia said

    am October 29 2007 @ 2:53 pm

    hi Michael

    how can i change the format to use “DD/MM/YYYY”??

    i look up the line oTxtDate.value = formattedDate.getDate() ’/’ (formattedDate.getMonth() 1) ’/’ formattedDate.getFullYear(); in the master page, but i can’ find it.

    thanks and regards
    Cecy

  29. Mudiya said

    am March 14 2008 @ 6:49 am

    Hi, I’m getting the same error. Can anyone help ?

    Madhu said
    am October 21 2007 @ 3:57 am

    Hi i am facing the below error on IE status bar. Please let me know what changes i need to do in the code.

    ‘this.oDomContainer’ is null or not an object.

    thanks and regards
    Madhu

  30. Michael Sync said

    am March 14 2008 @ 7:18 am

    >>‘this.oDomContainer’ is null or not an object.

    This is because you missed to reference the Javascript file or you referenced them in wrong sequence.

    >>how can i change the format to use “DD/MM/YYYY”??

    Find (control+F) “showCalander1″ function in the entire solution file.

  31. Hrushikesh said

    am June 17 2008 @ 5:15 am

    Hello,
    I Have a problem when trying to use the calendar in a gridview column as a template still exists. Do you have any solution why I always find the Error The name “txtDateOfBirth” does not exist in the current context “C:\test\placeholder.aspx”
    Thanks,
    Nelson.

  32. Jitendra said

    am June 17 2008 @ 5:20 am

    Hello,
    I Have a problem when trying to use the calendar in a gridview column as a template still exists. Do you have any solution why I always find the Error The name “txtDateOfBirth” does not exist in the current context “C:\test\placeholder.aspx”
    Thanks,
    jitendra

  33. heru winarno said

    am September 17 2008 @ 9:48 pm

    From heru1703
    To Admin,
    Hi,
    I still find error for YAHOO UI Calendar. That’s cause “YAHOO is not define”. My directory like this,

    /
    /Modules/CalendarModule
    /Modules/CalendarModule/CSS with their file
    /Modules/CalendarModule/Images with their file
    /Modules/CalendarModule/JS with their file
    MasterPages.master
    /Template
    /Template/MySite (this error pages using YAHOO.UI.Calendar)

    Some body help me, please…
    Thanks

Comment RSS · TrackBack URI

Leave a comment

Name: (Required)

eMail: (Required)

Website:

Comment: