Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    362
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlight day not working for June

    I have a Calendar that suppose to highlight the fourth Thursday of each month. It was working for every month but for June it doesnt seem to want to highlight the fourth Thursday.

    Please advise:
    Code:
    <style type="text/css">
    
    .main 
    {
    	width:200px;
    	border:1px solid black;
    }
    
    .month 
    {
    	background-color:black;
    	font:bold 12px verdana;
    	color:white;
    }
    
    .daysofweek 
    {
    	background-color:gray;
    	font:bold 12px verdana;
    	color:black;
    }
    
    .days 
    {
    	font-size: 12px;
    	font-family:verdana;
    	color:black;
    	background-color: lightyellow;
    	padding: 2px;
    }
    
    .days #today
    {
    	font-weight: bold;
    	color: blue;
    }
    
    .days #fourthThursday
    {
    	font-weight: bold;
    	color: red;
    }
    
    .days #trainingToday
    {
    	font-size: 13px;
    	font-weight: bold;
    	color: green;
    }
    
    .notation
    {
    	font-size: 13px;
    	font-weight: bold;
    	color: red;
    }
    </style>
    
    <script>
    
    function cityCal(m, y, cM, cH, cDW, cD, brdr)
    {
    var myMonths = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    var daysInMonth = [31,0,31,30,31,30,31,31,30,31,30,31];
    
    var cityDate = new Date(y, m-1, 1); 
    cityDate.city_date = cityDate.getDay()+1;
    
    var todaydate = new Date() 
    var city_today = (y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 
    
    var oneDay = (24*60*60*1000);
    //city next month where I am fetching fourth Thursday 
    var myDate1 = new Date();
    myDate1.setMonth( myDate1.getMonth() + 1 );
    myDate1.setTime(myDate1.getTime() - ((myDate1.getDate() - 1) * oneDay));            // first day
    myDate1.setTime(myDate1.getTime() + (((11 - myDate1.getDay()) % 7 + 21) * oneDay)); // fourth Thursday
    var cityThursday1 = (y==myDate1.getFullYear() && m==myDate1.getMonth()+1)? myDate1.getDate() : 0; 
    
    daysInMonth[1] = (((cityDate.getFullYear()%100!=0)&&(cityDate.getFullYear()%4==0))||(cityDate.getFullYear()%400==0))?29:28;
    var cityTableData = '<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
    cityTableData += '<td colspan="7" align="center" class="'+cH+'">'+myMonths[m-1]+' - '+y+'</td></tr><tr align="center">';
    for(s=0;s<7;s++)
    {
    	cityTableData+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';
    }
    
    cityTableData+='</tr><tr align="center">';
    for(i=1;i<=35;i++)
    {
    	var cityCalendarDay = ((i-cityDate.city_date>=0)&&(i-cityDate.city_date<daysInMonth[m-1]))? i-cityDate.city_date+1 : '&nbsp;';
    
    	if (cityCalendarDay == cityThursday1) 
    	{
    		cityCalendarDay = '<span id="fourthThursday">'+cityCalendarDay+'</span>' 
    	}
    	
    	cityTableData += '<td class="'+cD+'">'+cityCalendarDay+'</td>';
    	if(((i)%7==0) && (i<36))
    	{
    		cityTableData += '</tr><tr align="center">';
    	}
    }
    
    return cityTableData += '</tr></table></div>';
    }
    
    
    var todaydate=new Date()
    var city_year=todaydate.getFullYear() //current year
    
    //get three city months
    var city_month1=todaydate.getMonth()+2 //next month 
    
    document.write(cityCal(city_month1 ,city_year, "main", "month", "daysofweek", "days", 1));
    
    </script>

  • #2
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was bored for a bit, and my calendar needed a bit of updating... so here she is...

    Code:
    <html>
    <head>
    
    <style type="text/css">
    
    	select {
    		font:12px verdana;
    	}
    
    	.month {
    		background-color:black;
    		font:bold 12px verdana;
    		color:white;
    		text-align:center;
    	}
    	.daysofweek {
    		background-color:gray;
    		font:bold 12px verdana;
    		color:black;
    		border:1px solid black;
    		text-align:center;
    		width: 30px;
    	}
    	.fourthThursday 	{
    		font-weight: bold;
    		color: red;
    		font-size: 12px;
    		font-family:verdana;
    		background-color: lightyellow;
    		padding: 2px;
    		border:1px solid black;		
    		text-align:center;
    	}	
    	.today 	{
    		font-weight: bold;
    		color: blue;
    		font-size: 12px;
    		font-family:verdana;
    		background-color: lightyellow;
    		padding: 2px;
    		border:1px solid black;		
    		text-align:center;
    	}		
    	
    	.days  {
    		font-size: 12px;
    		font-family:verdana;
    		color:black;
    		background-color: lightyellow;
    		padding: 2px;
    		border:1px solid black;
    		text-align:center;
    	}	
    	.main {
    		width:200px;
    		border:1px solid black;
    		border-collapse: collapse;
    	}
    
    </style>
    
    </HEAD>
    <BODY>
    <span name='myCal1' id='myCal1'></span>
    <SCRIPT LANGUAGE='javascript'>
    	Calendar.prototype.daysOfWeek = function( x, oTD ) {
    		
    	}
    	
    	Calendar.prototype.days = function( oTD ) {
    		var myDate = oTD.date;
    		var Today = new Date();
    		if ( myDate.getDay() == 4 && ( myDate.getDate() > 21 && myDate.getDate() <= 28) ) {
    			oTD.className = 'fourthThursday';
    		} 
    		if ( myDate.getDate() == Today.getDate() && myDate.getFullYear() == Today.getFullYear() && myDate.getMonth() == Today.getMonth() ) {
    			oTD.className = 'today';
    		} 
    		//alert(oTD.date);
    		
    	}	
    	Calendar.prototype.chosenDate = function( oTD ) {
    		var Today = new Date();
    		alert(oTD.date + ' - ' + Today);
    		
    	}		
    
    	function Calendar( obj ) {
    		//alert(typeof obj);
    		if ( typeof obj =='string') {
    			obj = document.getElementById(obj);
    			
    		}
    		
    		if ( typeof obj != 'object' || !obj ) return null;
    		
    		this.holder = obj;
    		obj.innerHTML = 'Loading...';	
    		
    		
    		
    		md = new Date();
    		this.currentObj = obj;
    		generateCalendar(this, obj, md.getMonth(), md.getFullYear());
    
    		
    		this.setMonthYear = function( sMonth, sYear ) { generateCalendar(this, this.currentObj, sMonth, sYear); }
    		
    		function SetMonth(obj) {
    			if (obj.tagName == 'SELECT') {
    				obj.oSpan.style.display = '';		
    				obj.style.display = 'none';
    			} else {
    				obj.style.display = 'none';
    				var tobj = obj.oSelect;
    				tobj.style.display = '';
    			
    				var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
    				var oOptions = document.getElementsByTagName('option');
    				for ( var x = 0 ; x < oOptions.length ; x++ ) {
    					if (obj.innerHTML == month_of_year[oOptions[x].value] ) {
    						oOptions[x].selected  = true;
    						break;
    					}
    				}	
    				tobj.focus();
    			}
    		}		
    		function SetYear(obj) {
    		
    			//alert(obj.tagName);
    			if (obj.tagName == 'SELECT') {
    				obj.oSpan.style.display = '';		
    				obj.style.display = 'none';
    			} else {
    				obj.style.display = 'none';
    				var tobj = obj.oSelect;
    				tobj.style.display = '';
    			
    				var oOptions = document.getElementsByTagName('option');
    				for ( var x = 0 ; x < oOptions.length ; x++ ) {
    					if (obj.innerHTML == oOptions[x].value ) {
    						oOptions[x].selected  = true;
    						break;
    					}
    				}	
    				tobj.focus();
    			}
    		}				
    		
    		function generateCalendar(myCal, obj, sMonth, sYear ) {
    		
    			var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
    			var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');		
    		
    			var oTable = document.createElement('table');
    			oTable.className = 'main'
    			var oHead = oTable.appendChild(document.createElement('thead'));
    
    			var Calendar = new Date();
    			Calendar.setDate(1);
    			if (!( !sMonth && !sYear) ) {
    				//alert(sMonth);
    				Calendar.setMonth(sMonth);    // Start the calendar month at now
    				Calendar.setFullYear(sYear);    // Start the calendar month at now
    			} 
    			
    			var year = Calendar.getFullYear();	    // Returns year
    			var month = Calendar.getMonth();    // Returns month (0-11)
    			var today = Calendar.getDate();    // Returns day (1-31)
    			var weekday = Calendar.getDay();    // Returns day (1-31)			
    			
    			
    			var DAYS_OF_WEEK = 7;
    			var DAYS_OF_MONTH = 31;			
    			var YEAR_DIFF = 50;			
    			
    			var oTR = oHead.appendChild(document.createElement('tr'));
    			var oTD = oTR.appendChild(document.createElement('td'));			
    			oTD.colSpan = 7;
    			
    			oTD.className = 'month';
    			var oSpan = oTD.appendChild(document.createElement('span'));	
    			oSpan.appendChild(document.createTextNode(month_of_year[month]));
    			
    			var oSelect = oTD.appendChild(document.createElement('select'));	
    			oSelect.style.display = 'none';
    			for ( var x = 0 ; x < month_of_year.length ; x++ ) {
    				var oOption = oSelect.appendChild(document.createElement('option'));	
    				oOption.value = x;
    				oOption.appendChild(document.createTextNode(month_of_year[x]));
    			}
    			
    			oSpan.oSelect = oSelect;
    			oSelect.oSpan = oSpan;			
    	
    			oSelect.myCal = myCal;
    			oSelect.obj = obj;
    			oSelect.sYear = year;
    			oSelect.onchange = function ( event ) { generateCalendar(this.myCal, this.obj, this.getElementsByTagName('option')[this.selectedIndex].value, this.sYear ) };	
    	
    			oSpan.onclick = function () { SetMonth(this); };
    			oSelect.onblur = function () { SetMonth(this); };
    			
    			
    			var oSpan = oTD.appendChild(document.createElement('span'));	
    			oSpan.appendChild(document.createTextNode(year));			
    
    			var oSelect = oTD.appendChild(document.createElement('select'));	
    			oSelect.style.display = 'none';
    			for ( var x = year - YEAR_DIFF ; x < year + YEAR_DIFF ; x++ ) {
    				var oOption = oSelect.appendChild(document.createElement('option'));	
    				oOption.value = x;
    				oOption.appendChild(document.createTextNode(x));
    			}
    			
    			oSpan.oSelect = oSelect;
    			oSelect.oSpan = oSpan;
    			oSelect.myCal = myCal;
    			oSelect.obj = obj;
    			oSelect.sMonth = month;
    			oSelect.onchange = function ( event ) { generateCalendar(this.myCal, this.obj, this.sMonth, this.getElementsByTagName('option')[this.selectedIndex].value ) };
    			
    			
    			oSpan.onclick = function () { SetYear(this); };
    			oSelect.onblur = function () { SetYear(this); };			
    
    		
    			var oTR = oHead.appendChild(document.createElement('tr'));
    			
    			for(var x=0; x < DAYS_OF_WEEK; x++) {
    				var oTD = oTR.appendChild(document.createElement('td'));
    				oTD.appendChild(document.createTextNode(day_of_week[x]));
    				oTD.className = 'daysofweek';
    				if ( myCal.daysOfWeek ) {
    					var myX = x;
    					myCal.daysOfWeek( myX, oTD );
    				}
    
    				
    			}			
    			var oBody = oTable.appendChild(document.createElement('tbody'));
    			var oTR = oBody.appendChild(document.createElement('tr'));	
    			
    			for(var x = 0; x < Calendar.getDay(); x++) {
    				var oTD = oTR.appendChild(document.createElement('td'));
    				oTD.innerHTML = '&nbsp;';
    				oTD.className = 'days';
    			}
    			
    			for(var x = 0; x < DAYS_OF_MONTH; x++) {
    				if( Calendar.getDate() > x ) {
    					week_day =Calendar.getDay();
    					if(week_day == 0 && x != 0) {
    						var oTR = oBody.appendChild(document.createElement('tr'));	
    					}					
    					if(week_day != DAYS_OF_WEEK) {
    		
    						// SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
    						var day  = Calendar.getDate();			
    						var oTD = oTR.appendChild(document.createElement('td'));
    						oTD.className = 'days';
    						oTD.innerHTML = day;
    						var myC = new Date(Calendar);
    						oTD.date = myC;
    						if ( myCal.daysOfWeek ) {
    							
    							myCal.days( oTD );
    						}						
    						if ( myCal.chosenDate ) {
    							var myC = new Date(Calendar);
    							oTD.onclick = function () { myCal.chosenDate( this ); }
    						}						
    						Calendar.setDate(Calendar.getDate()+1);
    					}
    				}
    			}
    			
    			if ( Calendar.getDay() != 0 ) {
    				for(var x = Calendar.getDay(); x < DAYS_OF_WEEK; x++) {
    					var oTD = oTR.appendChild(document.createElement('td'));
    					oTD.innerHTML = '&nbsp;';
    					oTD.className = 'days';
    				}
    			}
    			obj.innerHTML = '';
    			obj.appendChild(oTable);
    		}	
    	}
    	myCal = new Calendar('myCal1');
    	myCal.setMonthYear(11, 2005);
    //-->
    </SCRIPT>
    
    
    
    </BODY>
    </HTML>
    Last edited by SpirtOfGrandeur; 06-01-2005 at 06:33 PM. Reason: Got rid of extra breaks!

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    362
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!

  • #4
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Notice you can click on the month or year to change it... I like that part of it... then again I am proud of my calendar!
    Last edited by SpirtOfGrandeur; 06-01-2005 at 06:34 PM. Reason: wording


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •