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

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 thoughts on “Using Yahoo.UI.Calendar in PageTemplate and Master Page – Part II

  1. Reply Ashish C. Dec 1,2006 12:23 pm

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

  2. Reply Michael Sync Dec 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. Reply Ashish C. Dec 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. Reply Joe R Jan 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. Reply Michael Sync Jan 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. Pingback: Custom Javascript Dialog « Michael Sync

  7. Reply saravana Aug 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. Reply Michael Sync Aug 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. Reply saravana Aug 19,2007 6:13 pm

    Thanks a lot Michael , its working.

  10. Reply Nelson Sep 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. Reply Michael Sync Sep 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. Pingback: ASP.NET Calendar Control and Yahoo.UI.Calendar « Michael Sync

  13. Reply Nelson Sep 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. Reply Nelson Sep 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. Reply Nelson Sep 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. Reply Nelson Sep 10,2007 6:53 pm

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

  17. Reply Nelson Sep 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.

  18. Reply Nelson Oct 2,2007 8:54 pm

    Any ideas?

  19. Reply marlo Oct 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?

  20. Reply Michael Sync Oct 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.

  21. Reply marlo Oct 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!

  22. Pingback: Michael Sync » Custom Javascript Dialog

  23. Pingback: Michael Sync » ASP.NET Calendar Control and Yahoo.UI.Calendar

  24. Reply Madhu Oct 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

  25. Reply cecilia Oct 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

  26. Reply Mudiya Mar 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

  27. Reply Michael Sync Mar 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.

  28. Reply Hrushikesh Jun 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.

  29. Reply Jitendra Jun 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

  30. Reply heru winarno Sep 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

Leave a Reply