Click here to Skip to main content
15,910,980 members
Home / Discussions / ASP.NET
   

ASP.NET

 
GeneralRe: Null Reference Pin
N a v a n e e t h7-Dec-07 0:24
N a v a n e e t h7-Dec-07 0:24 
GeneralStored Procedure result in Aspx page Pin
Member 45999726-Dec-07 23:22
Member 45999726-Dec-07 23:22 
GeneralRe: Stored Procedure result in Aspx page Pin
coolestCoder6-Dec-07 23:48
coolestCoder6-Dec-07 23:48 
GeneralRe: Stored Procedure result in Aspx page Pin
neerubee26-Dec-07 22:21
neerubee26-Dec-07 22:21 
QuestionOpening a document file in a formatted way. Pin
Biswa Pujarini Mohapatra6-Dec-07 23:11
Biswa Pujarini Mohapatra6-Dec-07 23:11 
GeneralRe: Opening a document file in a formatted way. Pin
suyuan19846-Dec-07 23:21
suyuan19846-Dec-07 23:21 
QuestionWeb Parts Issue..its urgent Pin
rockz...6-Dec-07 22:50
rockz...6-Dec-07 22:50 
AnswerASP.NET javascript Calenter Control [modified] Pin
Member 22474306-Dec-07 22:43
Member 22474306-Dec-07 22:43 
ASP.NET Javascript Calander Contol You have easly create to webform..

I have given to code from here. Please read and following on Steps

Step 1: First You will create "Cal.js" from Javascripts file..
Step 2: Next You will create "Cal.css" from Style sheet file..
Step 3: after you will create from "Cal.ascx" in you ASP.NET User Contorl..
Step 4: Finally you have create from "Cal.aspx" in you ASP.NET WebForm..


Step 1:

First you have create one Javascript and save from "cal.js"

<br />
<br />
/*<br />
	Authors: Yesudas S, Raja Lingam<br />
	Company: IDenizen Smartware Pvt Ltd<br />
	Date:	07 Aug 2007<br />
*/<br />
<br />
var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");<br />
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);<br />
var days = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");<br />
var monthsArr = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");<br />
<br />
today = new getToday();	<br />
var element_id;<br />
<br />
//var selectedDay,selectedMonth,selectedYear;<br />
<br />
function getDays(month, year) <br />
{<br />
	// Test for leap year when February is selected.<br />
	if (1 == month)<br />
		return ((0 == year % 4) && (0 != (year % 100))) ||<br />
			(0 == year % 400) ? 29 : 28;<br />
	else<br />
		return daysInMonth[month];<br />
}<br />
<br />
function getToday()<br />
{<br />
	// Generate today's date.<br />
	this.now = new Date();<br />
	this.year = this.now.getFullYear() ; // Returned year XXXX<br />
	this.month = this.now.getMonth();<br />
	this.day = this.now.getDate();<br />
}<br />
<br />
 <br />
function newCalendar() <br />
{<br />
	var parseYear = parseInt(document.all.year  [document.all.year.selectedIndex].text);<br />
 <br />
	var newCal = new Date(parseYear , document.all.month.selectedIndex, 1);<br />
	var day = -1;<br />
	var startDay = newCal.getDay();<br />
	var daily = 0; <br />
<br />
	today = new getToday(); // 1st call<br />
	if ((today.year == newCal.getFullYear() ) &&   (today.month == newCal.getMonth()))<br />
	   day = today.day;<br />
	// Cache the calendar table's tBody section, dayList.<br />
	var tableCal = document.all.calendar.tBodies.dayList;<br />
<br />
	var intDaysInMonth =<br />
	   getDays(newCal.getMonth(), newCal.getFullYear() );<br />
<br />
	for (var intWeek = 0; intWeek < tableCal.rows.length;  intWeek++)<br />
		   for (var intDay = 0;<br />
			 intDay < tableCal.rows[intWeek].cells.length;<br />
			 intDay++)<br />
	 {<br />
		  var cell = tableCal.rows[intWeek].cells[intDay];<br />
<br />
		  <br />
		  	<br />
		  // Start counting days.<br />
		  if ((intDay == startDay) && (0 == daily))<br />
			 daily = 1;<br />
<br />
		  // Highlight the current day.<br />
		  cell.style.color = (day == daily) ? "red" : "";<br />
		 <br />
			 	      <br />
		  var newDate = new Date().getDate();<br />
		    if(today.day == daily)<br />
		  	cell.style.color = "red";<br />
		  if(day == daily)<br />
		  {<br />
				document.all.todayday.innerText= "Today: " +  day + "/" + <br />
					(newCal.getMonth()+1) + "/" + newCal.getFullYear() ;<br />
		  }<br />
		  // Output the day number into the cell.<br />
		  if ((daily > 0) && (daily <= intDaysInMonth))<br />
			 cell.innerText = daily++;<br />
		  else<br />
			 cell.innerText = "";<br />
			<br />
			if(intDay ==0 || intDay ==6)<br />
				cell.style.backgroundColor = "#C0C0C0";<br />
	   }<br />
<br />
}<br />
	  <br />
	 function getTodayDay()<br />
	 {<br />
							<br />
			    document.all[element_id].value = today.day + "/" + (monthsArr[today.month]) + <br />
					"/" + today.year; <br />
					//document.all[element_id].value = today.day + "/" + (monthsArr[document.all.month.selectedIndex]) + <br />
					//"/" + today.year; <br />
		        //document.all.calendar.style.visibility="hidden";<br />
				document.all.calendar.style.display="none";<br />
				//document.all.year.selectedIndex = today.year;<br />
	            document.all.month.selectedIndex = today.month; <br />
	            //document.all.year.selectedIndex = 107;<br />
					            <br />
	 }<br />
  <br />
        function getDate() <br />
		 {<br />
            // This code executes when the user clicks on a day<br />
            // in the calendar.<br />
            if ("TD" == event.srcElement.tagName)<br />
               // Test whether day is valid.<br />
               if ("" != event.srcElement.innerText)<br />
			   { <br />
				 //var mn = document.all.month.selectedIndex+1;<br />
    			 var Year = document.all.year [document.all.year.selectedIndex].text;<br />
				 document.all[element_id].value=event.srcElement.innerText+"/"+monthsArr[document.all.month.selectedIndex] +"/"  +Year;<br />
		         //document.all.calendar.style.visibility="hidden";<br />
				 document.all.calendar.style.display="none";<br />
			 }<br />
			 //selectedDay = event.srcElement.innerText;<br />
			 //selectedMonth = document.all.month.selectedIndex;<br />
			 //selectedYear = document.all.year [document.all.year.selectedIndex].text;<br />
		 }<br />
<br />
        function getDateMouseOver() <br />
		 {<br />
            // This code executes when the user clicks on a day<br />
            // in the calendar.<br />
            if ("TD" == event.srcElement.tagName)<br />
               // Test whether day is valid.<br />
               if ("" != event.srcElement.innerText)<br />
			   { <br />
				 //var mn = document.all.month.selectedIndex+1;<br />
    			 var Year = document.all.year [document.all.year.selectedIndex].text;<br />
				 document.all[element_id].value=event.srcElement.innerText+"/"+monthsArr[document.all.month.selectedIndex] +"/"  +Year;<br />
		         //document.all.calendar.style.visibility="hidden";<br />
				 //document.all.calendar.style.display="none";<br />
				 <br />
				 if (today.day == event.srcElement.innerHTML)<br />
				 	event.srcElement.style.color="red";<br />
				 else<br />
				 	event.srcElement.style.color="blue";<br />
				<br />
				 //alert('das');<br />
				 //alert(today.day);<br />
				 <br />
				 //cell.style.color="#FFFFFF"<br />
			 }<br />
		 }<br />
		 <br />
		 var MOUSE_OVER_COLOR = "BLUE";<br />
		 var MOUSE_OUT_COLOR = "BLACK";<br />
		 var TODAY_DATE_COLOR = "RED";<br />
<br />
        function getDateMouseOut() <br />
		 {<br />
            // This code executes when the user clicks on a day<br />
            // in the calendar.<br />
            if ("TD" == event.srcElement.tagName)<br />
               // Test whether day is valid.<br />
               if ("" != event.srcElement.innerText)<br />
			   { <br />
				 var mn = document.all.month.selectedIndex+1;<br />
    			 var Year = document.all.year [document.all.year.selectedIndex].text;<br />
				 document.all[element_id].value=event.srcElement.innerText+"/"+monthsArr[document.all.month.selectedIndex] +"/"  +Year;<br />
				 if (today.day == event.srcElement.innerHTML)<br />
				 	event.srcElement.style.color="red";<br />
				 else<br />
				 	event.srcElement.style.color="black";<br />
			 }<br />
		 }<br />
 <br />
function GetBodyOffsetX(el_name, shift)<br />
{<br />
	var x;<br />
	var y;<br />
	x = 0;<br />
	y = 0;<br />
<br />
	var elem = document.all[el_name];<br />
	do <br />
	{<br />
		x += elem.offsetLeft;<br />
		y += elem.offsetTop;<br />
		if (elem.tagName == "BODY")<br />
			break;<br />
		elem = elem.offsetParent; <br />
	} while  (1 > 0);<br />
<br />
	shift[0] = x;<br />
	shift[1] = y;<br />
	return  x;<br />
}	<br />
<br />
function SetCalendarOnElement(el_name)<br />
{<br />
	if (el_name=="") <br />
	el_name = element_id;<br />
	var shift = new Array(2);<br />
	GetBodyOffsetX(el_name, shift);<br />
	document.all.calendar.style.pixelLeft  = shift[0]; //  - document.all.calendar.offsetLeft;<br />
	document.all.calendar.style.pixelTop = shift[1] + 25 ;<br />
}<br />
	  <br />
 	  <br />
	           <br />
function ShowCalendar(elem_name)<br />
{<br />
		if (elem_name=="")<br />
		elem_name = element_id;<br />
<br />
		element_id	= elem_name; // element_id is global variable<br />
		newCalendar();<br />
		SetCalendarOnElement(element_id);<br />
		//document.all.calendar.style.visibility = "visible";<br />
		document.all.calendar.style.display="inline";<br />
}<br />
<br />
function HideCalendar()<br />
{<br />
	//document.all.calendar.style.visibility="hidden";<br />
	document.all.calendar.style.display="none";<br />
}<br />
function PreviewMonth()<br />
{<br />
	//document.all.calendar.style.visibility="hidden";<br />
	var monthpNumber = document.all.month.selectedIndex - 1;<br />
	if (monthpNumber == 0 )<br />
		document.all.month.selectedIndex = 11;<br />
	else<br />
		document.all.month.selectedIndex = document.all.month.selectedIndex - 1;<br />
	newCalendar();<br />
	//document.all.calendar.style.display="none";<br />
}<br />
function NextMonth()<br />
{<br />
	//document.all.calendar.style.visibility="hidden";<br />
	var monthnNumber = document.all.month.selectedIndex + 1;<br />
	if (monthnNumber == 12 )<br />
		document.all.month.selectedIndex = 0;<br />
	else<br />
		document.all.month.selectedIndex = document.all.month.selectedIndex + 1;<br />
	if(document.all.month.selectedIndex == 0)<br />
		document.all.year.selectedIndex = document.all.year.selectedIndex + 1;<br />
	newCalendar();<br />
	//document.all.calendar.style.display="none";<br />
}<br />
<br />
function toggleCalendar(elem_name)<br />
{<br />
	//if (document.all.calendar.style.visibility == "hidden")<br />
	if(document.all.calendar.style.display=="none")<br />
		ShowCalendar(elem_name);<br />
	else <br />
		HideCalendar();<br />
}<br />
<br />
		function compareDateWithToday(selectedDate,message,dateSeperator){		<br />
			var currentTime = new Date()<br />
			var month1,date1,year1;<br />
			var firstIndex = selectedDate.indexOf (dateSeperator);<br />
			var lastIndex = selectedDate.lastIndexOf (dateSeperator);<br />
			var result = true;<br />
			<br />
			date1 = selectedDate.substring (0, firstIndex);<br />
			month1 = selectedDate.substring (firstIndex+1, lastIndex);<br />
			year1 = selectedDate.substring (lastIndex+1, selectedDate.length);		<br />
			<br />
			//alert("Selected Date :\n"+"date1:"+date1+"\nmonth:"+month1+"\nyear1:"+year1+"\nToday Date :\n"+"date1:"+currentTime.getDate()+"\nmonth:"+currentTime.getMonth()+"\nyear1:"+currentTime.getFullYear());<br />
			<br />
			if(parseInt(currentTime.getFullYear())<parseInt(year1))<br />
				result = false;<br />
			if(parseInt(currentTime.getMonth())<parseInt(getMonthIndex(month1,monthsArr)))<br />
				result = false;<br />
			if(parseInt(currentTime.getDate())<parseInt(date1))<br />
				result = false;<br />
			if(!result)<br />
				alert(message);<br />
			return result;<br />
		}<br />
		<br />
		function getMonthIndex(monthName,monthArray){<br />
			for(var i=0;i<monthArray.length;i++){<br />
				if(monthName == monthArray[i])<br />
					return i;<br />
			}<br />
		}<br />
<br />



Step 2

Second you have create Style Sheet and save on "Cal.css"

<br />
.tabelbody {<br />
	BORDER-RIGHT: #000000 1px; <br />
	BORDER-TOP: #000000 1px; <br />
	DISPLAY:none;<br />
	Z-INDEX: 4; <br />
	BORDER-LEFT: #000000 1px; <br />
	BORDER-BOTTOM: #000000 1px; <br />
	POSITION: absolute; <br />
	BACKGROUND-COLOR: #cccccc;<br />
	text-align: center<br />
}<br />
<br />
.header {<br />
	FONT-FAMILY: Arial; <br />
	TEXT-ALIGN: center;<br />
	FONT-SIZE: 85%;<br />
	COLOR: #FFFFFF;<br />
}<br />
.hyperlinktext {<br />
	color: #FFFFFF;<br />
	FONT-SIZE: 70%;<br />
	text-align: center<br />
}<br />
.todayday {<br />
	FONT-SIZE: 75%;<br />
	COLOR:White; <br />
	font-family:Arial;<br />
}<br />
.month {<br />
	FONT-SIZE: 110%;<br />
	COLOR: #FFFFFF; <br />
	text-align: center;<br />
}<br />
.intdays {<br />
	FONT-SIZE: 70%;<br />
	font-family:Arial;<br />
	COLOR: #627573; <br />
	BACKGROUND-COLOR: #D3D3D1;<br />
	text-align: center;<br />
}<br />
.week {<br />
	FONT-SIZE: 70%;<br />
	font-family:Arial;<br />
	text-align: center;<br />
}<br />
.TrbgGraycolor {<br />
	BACKGROUND-COLOR:Gray;<br />
}<br />
.TrbgDarkGraycolor {<br />
	BACKGROUND-COLOR:DarkGray;<br />
}<br />




Step 3

Third you have create from UserControl and save on "cal.ascx"

<br />
<TABLE border="0" class="tabelbody" cellPadding="1" cellSpacing="0" id="calendar" ><br />
	<TBODY><br />
		<tr class="TrbgDarkGraycolor"><br />
			<td colspan="7" class="header">Calendar</td><br />
		</tr><br />
		<TR class="TrbgGraycolor"><br />
			<td onclick="javascript:PreviewMonth();" class="month">&lt;</td><br />
			<TD colSpan="5" valign="middle"><br />
				<!-- Month combo box --><br />
				<SELECT id="month" onchange="newCalendar()"><br />
					<SCRIPT language="JavaScript"><br />
		// Output months into the document.<br />
		// Select current month.<br />
		for (var intLoop = 0; intLoop < months.length; intLoop++)<br />
			document.write("<OPTION " +	(today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);<br />
					</SCRIPT><br />
				</SELECT><br />
				<!-- Year combo box --><br />
				<SELECT id="year" onchange="newCalendar()"><br />
					<SCRIPT language="JavaScript"><br />
		// Output years into the document.<br />
		// Select current year.<br />
		for (var intLoop = 1900; intLoop < 2028; intLoop++)<br />
			document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);<br />
					</SCRIPT><br />
				</SELECT><br />
			</TD><br />
			<td onclick="javascript:NextMonth();" class="month">&gt;</td><br />
		</TR><br />
		<TR class="days"><br />
			<!-- Generate column for each day. --><br />
			<SCRIPT language="JavaScript"><br />
	// Output days.<br />
	for (var intLoop = 0; intLoop < days.length; intLoop++)<br />
		document.write("<TD class='intdays'>" + days[intLoop] + "</TD>");<br />
			</SCRIPT><br />
		</TR></tbody><br />
		<TBODY id="dayList" onclick="getDate('');" onmouseover="getDateMouseOver('');" onmouseout="getDateMouseOut('');"<br />
			vAlign="middle"><br />
			<!-- Generate grid for individual days. --><br />
			<SCRIPT language="JavaScript"><br />
	for (var intWeeks = 0; intWeeks < 6; intWeeks++)<br />
	{<br />
		document.write("<TR bgColor=#fffffg> ");<br />
		for (var intDays = 0; intDays < days.length; intDays++)<br />
			document.write('<TD class="week"></TD>');<br />
		document.write("</TR>");<br />
	}<br />
			</SCRIPT><br />
			<!-- Generate today day. --><br />
		</TBODY><br />
		<TBODY align="center"><br />
			<TR class="TrbgGraycolor" align="center"><br />
				<TD class="todayday" colSpan="5" id="todayday" onclick="getTodayDay();"><br />
				</TD><br />
				<TD colSpan="2" align="center"><A href="javascript:HideCalendar();" class="hyperlinktext">Hide</A></TD><br />
			</TR><br />
		</TBODY><br />
</TABLE><br />
<br />



Step 4:

Finally you have add from your web form on "Cal.aspx"
<br />
<br />
<HTML><br />
<%@ Register TagPrefix="uc11" TagName="cal" Src="cal.ascx" %><br />
<HEAD><br />
<LINK href="cal.css" type="text/css" rel="stylesheet"><br />
		<script src="cal.js" type="text/javascript"></script><br />
</HEAD><br />
<br />
<body><br />
		<form id="Form1" method="post" runat="server"><br />
			<uc11:cal id="cal1" runat="server"></uc11:cal><br />
<br />
<br />
<TABLE id="Table3" cellSpacing="0" cellPadding="0" width="100%" border="0"><br />
									<TR><br />
<TD style="HEIGHT: 59px"><br />
											<asp:textbox id="txt_box" runat="server" Width="145px" Height="26px" Font-Names="Arial"<br />
												Font-Size="X-Small" MaxLength="50"></asp:textbox><A onmouseover="toggleCalendar('txt_box')" href="JavaScript:;"></A></TD><br />
	</TR><br />
<br />
	</TR><br />
			</TABLE><br />
<br />
</HTML><br />
<br />
	<br />


S.RajaLingam

modified on Friday, December 07, 2007 4:54:45 AM

GeneralRe: ASP.NET javascript Calenter Control Pin
pmarfleet6-Dec-07 22:56
pmarfleet6-Dec-07 22:56 
GeneralRe: ASP.NET javascript Calenter Control Pin
suyuan19846-Dec-07 23:26
suyuan19846-Dec-07 23:26 
GeneralRe: ASP.NET javascript Calenter Control Pin
Pete O'Hanlon7-Dec-07 4:24
mvePete O'Hanlon7-Dec-07 4:24 
QuestionHow check my site's name in other's website Pin
swguy236-Dec-07 22:09
swguy236-Dec-07 22:09 
AnswerRe: How check my site's name in other's website Pin
N a v a n e e t h6-Dec-07 22:20
N a v a n e e t h6-Dec-07 22:20 
GeneralRe: How check my site's name in other's website Pin
swguy236-Dec-07 23:19
swguy236-Dec-07 23:19 
AnswerRe: How check my site's name in other's website Pin
Sathesh Sakthivel6-Dec-07 22:23
Sathesh Sakthivel6-Dec-07 22:23 
GeneralRe: How check my site's name in other's website Pin
J4amieC6-Dec-07 22:32
J4amieC6-Dec-07 22:32 
GeneralRe: How check my site's name in other's website Pin
N a v a n e e t h6-Dec-07 22:35
N a v a n e e t h6-Dec-07 22:35 
GeneralRe: How check my site's name in other's website Pin
pmarfleet6-Dec-07 22:43
pmarfleet6-Dec-07 22:43 
QuestionMenu bar control in aspx page Pin
chandler836-Dec-07 22:02
chandler836-Dec-07 22:02 
GeneralRe: Menu bar control in aspx page Pin
suyuan19846-Dec-07 23:40
suyuan19846-Dec-07 23:40 
GeneralCheck Condition Pin
SreejithAchutan6-Dec-07 21:06
SreejithAchutan6-Dec-07 21:06 
GeneralCross post - please ignore Pin
pmarfleet6-Dec-07 21:19
pmarfleet6-Dec-07 21:19 
GeneralRe: Cross post - please ignore Pin
SreejithAchutan6-Dec-07 21:48
SreejithAchutan6-Dec-07 21:48 
GeneralRe: Cross post - please ignore Pin
Sathesh Sakthivel6-Dec-07 22:06
Sathesh Sakthivel6-Dec-07 22:06 
GeneralRe: Cross post - please ignore Pin
pmarfleet6-Dec-07 22:23
pmarfleet6-Dec-07 22:23 

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

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