...
PDA

Highlight day not working for June

florida
05-31-2005, 02:43 PM
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:

<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>
SpirtOfGrandeur
05-31-2005, 08:28 PM
I was bored for a bit, and my calendar needed a bit of updating... so here she is...


<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','Novem ber','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','Novem ber','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>
florida
06-01-2005, 05:01 PM
Thanks!
SpirtOfGrandeur
06-01-2005, 06:31 PM
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! :)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum