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

November 30, 2006 · by · in
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.