Design Question 1

coachdan · Dec 17, 2003

I have a page that lays out a calendar dynamically and I am having trouble with tags being moved around when opened with FP (which is the tool they give me to use). I am trying to come up with a new idea on how to set it up. It currently has the calendar setup within a table and I would like to keep it that way.

- The first consideration is how many weeks should be included on the calendar:

It needs to be based on a 4-4-5 breakdown. January has 4 weeks, February has 4 weeks, March has 5 weeks, and so on. On months that have 4 weeks, I would like to hide the week five rows.

- Each week should consist of:
1.Row 1 - The days of the week (static).
2.Row 2 - The Month (Name) and the Day (Number). These values need to be pulled from a db.
3.Row 3 - A dropdown box with a list of values that is also puled from a db.

Is it possible to do this without dynamically drawing the table? FP gets confused with the dynamic writing of the tags involved to draw the table that way. The results is that anytime the file is opened with FP, the tags get scrambled and I have to figure out how to fix them again. I have to fix them using Notepad and then it is fine until the next time someone opens it in FP.

coachdan32

http://www.highviewheat.com/index.asp

http://www.kristensfastpitchworld.com/index.asp

mwolf00 · Dec 17, 2003

Here's a staring point - just set the start dates dynamically...

<script language="javascript1.2">
<!--
//global vairables
today = new Date()
defaultMonth = today.getMonth()
defaultDay = today.getDate()
defaultYear = today.getFullYear()
monthArr = new Array("January","February","March","May","June","July","August","September","October","November","December&quot

daysArr = new Array(31,28,31,30,31,30,31,31,30,31,30,31)

function showCalendar(month,year,day){
isLeapYear(year) ? daysArr[1] = 29 : daysArr[1] = 28
firstOfMonth = new Date(year,month,1)
htmlStr = ""
dayNum = firstOfMonth.getDay()
weekNum = 1
clearWeeks()
for (x=1; x<=daysArr[month]; x++){
theWeek = document.getElementById("week" + weekNum)
theWeek.childNodes[dayNum].innerHTML = x
if (x == day && month == defaultMonth && year == defaultYear){
theWeek.childNodes[dayNum].style.backgroundColor = "silver"
}
dayNum ++
if (dayNum % 7 == 0){
dayNum = 0
x == daysArr[month] ? weekNum = weekNum : weekNum ++
}
}

weekNum == 6 ? document.getElementById("week6&quot

.style.display = "block" : document.getElementById("week6&quot

.style.display = "none"
if (month > 0){
lastMonth = month-1
lastYear = year
}
else{
lastMonth = 11
lastYear = year - 1
}
if (month < 11){
nextMonth = month + 1
nextYear = year
}
else{
nextMonth = 0
nextYear = year + 1
}
document.getElementById("backOne&quot

.innerHTML = "<a href='javascript: showCalendar(" + lastMonth + "," + lastYear + "," + day + &quot

'><<</a>"
document.getElementById("forwardOne&quot

.innerHTML = "<a href='javascript: showCalendar(" + nextMonth + "," + nextYear + "," + day + &quot

'>>></a>"
document.getElementById("monthSelect&quot

.selectedIndex = month
showYears(year)
}

function isLeapYear(inYear){
if (inYear % 4 == 0){
if(inYear %100 == 0 && inYear % 400 != 0){
return false
}
return true
}
return false
}

function clearWeeks(){
for (x=1; x<=6; x++){
weekRow = document.getElementById("week" + x)
for (y=0; y<=6; y++){
weekRow.childNodes[y].innerHTML = " "
weekRow.childNodes[y].style.backgroundColor = "white"
}
}
}

function showYears(inYear){
yearNode = document.getElementById("yearSelect&quot

counter = 0
startYear = parseInt(inYear) - 10
endYear = parseInt(inYear) + 20
for (x=startYear; x<= endYear; x++){
if (yearNode.options[counter]){
yearNode.options[counter] = null
}
yearNode.options[counter] = new Option(x,x)
counter ++
}
yearNode.selectedIndex = 10
}

function jumpDate(){
theMonth = document.getElementById("monthSelect&quot

.selectedIndex
theYearNode = document.getElementById("yearSelect&quot

theYear = theYearNode.options[theYearNode.selectedIndex].value
showCalendar(theMonth,theYear,defaultDay)
}
-->
</script>
<style>

</style>
<body onLoad="showCalendar(defaultMonth,defaultYear,defaultDay)">

<table id="calendar" border=0>
<tr id="infoRow">
<td id="backOne"></td>
<td colspan=3><select id="monthSelect" onchange="jumpDate()">
<Option>January
<Option>February
<Option>March
<Option>April
<Option>May
<Option>June
<Option>July
<Option>August
<Option>September
<Option>October
<Option>November
<Option>December
</select></td>
<td colspan=2><select id="yearSelect" onchange="jumpDate()"></select></td>
<td id="forwardOne"></td>
</tr>
<tr id="headerRow">
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
</tr>
<tr id=week1>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id=week2>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id=week3>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id=week4>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id=week5>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id=week6>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

hithere · Dec 17, 2003

the only way I've been able to work around the dang FP scrambling of tags was to code it within the .asp instead of leaving it in the html. it seems to leave that code (the .asp) alone so whatever order/spacing you have stays.

since your going to pull it from a db anyway, you could have a column that indicates whether the month is 4 or 5 (just a switch really) and have it draw accordingly with a if/else setup. probably not the best way but at least one option.

hth
mb

if anyone knows how to turn off the tag rearranging that FP does, share!

"Where's the Ka-Boom? There's supposed to be an Earth-shattering Ka-Boom!"
Marvin the Martian

mwolf00 · Dec 17, 2003

BTW - those should be

<td> & nbsp ; </td>

in all of those rows (w/o spaces)...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

Tarwn · Dec 17, 2003

First I have to say I don't understand the 4-4-5 comment. Checking my calendar it appears to be 5-5-6...?

Anways, rather than run the risk that javascript might be turned off in the users browser or they haven't upgraded since some incredibly outdated version (and because I haven't written a calendar in a while and wanted to do it

) you could do something along the lines of:

Code:

<%
Dim aMonth, aYear
Dim ctr
'I don't know where these are coming from, I'm just going to hardcode them
aMonth = 8
aYear = 2003

'start the table that will be our calendar
Response.Write &quot;<table>&quot;

'loop through days of week because I'm to lazy to type them all out
Response.Write &quot;<tr>&quot;
For ctr = 1 to 7
   Response.Write &quot;<th>&quot; & WeekDayName(ctr) & &quot;</th>&quot;
Next
Response.Write &quot;</tr>&quot;

'draw the calendar
'   Basically the way we will handle this is we will get the WeekDay for the 1st of the month, draw some empty cells until we get to it
'   Each time we drop a cell (or a day) we will increment our counter
'   When the counter reaches an even multiple of 7 (sunday) we will end the row and start the next one
'   after incrememnting the date to make sure we aren't past the end of the month in question
Dim end_date, working_date
working_date = cDate(aMonth & &quot;/1/&quot; & aYear)
'get the end date by adding 1 month, we're going to loop while working_date < end_date
end_date = DateAdd(&quot;m&quot;,1,working_date)

'before we loop, start the first row and put in some empty days if the month starts later than saturday
If WeekDay(working_date) > 1 Then
   Response.Write &quot;<tr>&quot;
   For ctr = 1 to WeekDay(working_date) - 1
      Response.Write &quot;<td>&nbsp;</td>&quot;
   Next
End If

'loop from 1st to < end_date
Do While working_date < end_date
   'if this is a saturday then start a new row
   If WeekDay(working_date) = 1 Then Response.Write &quot;<tr>&quot;

   'draw the date in short format
   Response.Write &quot;<td>&quot; & FormatDateTime(working_date,2) & &quot;</td>&quot;

   'if it is sunday then end the row
   If WeekDay(working_date) = 7 Then Response.Write &quot;</tr>&quot;

   'increment the date
   working_date = DateAdd(&quot;d&quot;,1,working_date)
Loop

'if the end date was greater than saturday than we will have a row with no end row tag
If WeekDay(end_date) > 1 Then Response.Write &quot;</tr>&quot;

'and then we can end the table
Response.Write &quot;</table>&quot;
%>

And just for the heck of it I decided to pretty it up some:

Code:

<%
Dim aMonth, aYear
Dim ctr
'Lets add some dynamic dating
If Request.QueryString(&quot;month&quot;) = &quot;&quot; Then
	aMonth = month(now)
	aYear = year(now)
Else
	aMonth = Request.QueryString(&quot;month&quot;)
	aYear = request.QueryString(&quot;year&quot;)
End If

Dim end_date, working_date, prev_month

working_date = cDate(aMonth & &quot;/1/&quot; & aYear)
'get the end date by adding 1 month, we're going to loop while working_date < end_date
end_date = DateAdd(&quot;m&quot;,1,working_date)
'prev month is used for the links below
prev_month = DateAdd(&quot;m&quot;,-1,working_date)

'start the table that will be our calendar
Response.Write &quot;<table style=&quot;&quot;font-family: verdana; color: #003399;&quot;&quot; cellpadding=0>&quot;

'output the month on the top of the calendar with links for previous month/next month
Response.Write &quot;<tr><th><a href=&quot;&quot;&quot; & Request.ServerVariables(&quot;SCRIPT_NAME&quot;) & &quot;?month=&quot; & Month(prev_month) & &quot;&year=&quot; & Year(prev_month) & &quot;&quot;&quot;>&lt;&lt;</a></th><th colspan=&quot;&quot;5&quot;&quot; style=&quot;&quot;background-color: #ddddee;border:1px solid #003399;&quot;&quot;>&quot; & MonthName(aMonth) & &quot; &quot; & aYear & &quot;</th><th><a href=&quot;&quot;&quot; & Request.ServerVariables(&quot;SCRIPT_NAME&quot;) & &quot;?month=&quot; & Month(end_date) & &quot;&year=&quot; & Year(end_date) & &quot;&quot;&quot;>&gt;&gt;</a></th></tr>&quot;

'loop through days of week because I'm to lazy to type them all out
Response.Write &quot;<tr>&quot;
For ctr = 1 to 7
   Response.Write &quot;<th style=&quot;&quot;font-weight:normal; text-decoration:underline;&quot;&quot;>&quot; & WeekDayName(ctr) & &quot;</th>&quot;
Next
Response.Write &quot;</tr>&quot;

'draw the calendar
'   Basically the way we will handle this is we will get the WeekDay for the 1st of the month, draw some empty cells until we get to it
'   Each time we drop a cell (or a day) we will increment our counter
'   When the counter reaches an even multiple of 7 (sunday) we will end the row and start the next one
'   after incrememnting the date to make sure we aren't past the end of the month in question

'before we loop, start the first row and put in some empty days if the month starts later than saturday
If WeekDay(working_date) > 1 Then
   Response.Write &quot;<tr>&quot;
   For ctr = 1 to WeekDay(working_date) - 1
      Response.Write &quot;<td style=&quot;&quot;width: 100px;height: 100px; border: 1px solid #003399;&quot;&quot;>&nbsp;</td>&quot;
   Next
End If

'loop from 1st to < end_date
Do While working_date < end_date
   'if this is a saturday then start a new row
   If WeekDay(working_date) = 1 Then Response.Write &quot;<tr>&quot;

   'draw the date in short format
   Response.Write &quot;<td style=&quot;&quot;width: 100px;height: 100px; border: 1px solid #003399;&quot;&quot; valign=&quot;&quot;top&quot;&quot;><span style=&quot;&quot;font-size:12px; float:right; padding:5px; border-left: 1px solid #003399; border-bottom: 1px solid #003399; width:25px; height: 25px;text-align:center;&quot;&quot;>&quot; & Day(working_date) & &quot;</span></td>&quot;

   'if it is sunday then end the row
   If WeekDay(working_date) = 7 Then Response.Write &quot;</tr>&quot;

   'increment the date
   working_date = DateAdd(&quot;d&quot;,1,working_date)
Loop

'if the end date was greater than saturday than we will have a row with no end row tag
If WeekDay(end_date) > 1 Then Response.Write &quot;</tr>&quot;

'and then we can end the table
Response.Write &quot;</table>&quot;
%>

So much more fun than working...think I may play with this some more later

-T

_{01000111 01101111 01110100 00100000 01000011 01101111 01100110 01100110 01100101 01100101 00111111}
The never-completed website:

http://www.tiernok.com/

Tarwn · Dec 17, 2003

In case anyone is curious:

http://www.tiernok.com/randomscripts/calendar.asp

I may make a smaller version at some point since I am working on an hours system and it would be nice to let users sleect the dates from the calendar rather than have to type them in...

Tarwn · Dec 17, 2003

I just realized some of my comments were screwy, for some reason I had saturday and sunday backwards in my head so if you switch all occurrences of saturday and sunday in my code it will probably be right

No idea how I managed to get that dyslexic about the weekdays, oh well.

-T

coachdan · Dec 17, 2003

I have a good start thanks to you guys. I appreciate the help.

Tarwn,

On your 4-4-5 question, many companies break their year up differently than the calendar. Our company breaks it up using a repeating 4-4-5 pattern. The first period (representing January) is the first 4 weeks of our fiscal year - which does not usually start on Jan. 1. This start date is dependant on when the last fiscal year ended. Let's say that 2002 ended on December 27, 2002. Period 1 would have a starting date of 12/28/02 and run for the next 28 days (4 weeks) or until 1/25/03. Period 2 would start on 1/26/03 and run for the next 28 days (4 weeks). Period 3 would start the next day and run for the next 35 days (5 weeks). This pattern repeats throughout the year (4-4-5-4-4-5-4-4-5-4-4-5). The period always runs from Sunday to Saturday. The start date (DateSt) and end date (DateEnd) is pulled from a db (table name = "ZZCalendar)that has them listed for the next 10 years. A field (445) was added that identifies whether the month has 4 weeks or 5.

coachdan32

http://www.highviewheat.com/index.asp

http://www.kristensfastpitchworld.com/index.asp

onpnt · Dec 17, 2003

I love it when he does that [lol]

very nice Tarwn!!

_____________________________________________________________________

_{Hakuna matata!!}

Tarwn · Dec 17, 2003

I'm still playing with mwolfs

_{01000111 01101111 01110100 00100000 01000011 01101111 01100110 01100110 01100101 01100101 00111111}
The never-completed website:

http://www.tiernok.com/

mwolf00 · Dec 17, 2003

Guess I didn't quite get what you were looking for...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

Tarwn · Dec 17, 2003

Heh, if you hit the online copy of mine again it has holidays (only 3, but oh well) now too

I need to stop playing with this and get back to work.

-T

_{01000111 01101111 01110100 00100000 01000011 01101111 01100110 01100110 01100101 01100101 00111111}
The never-completed website:

http://www.tiernok.com/

onpnt · Dec 17, 2003

why do i feel so small when you guys post these things [lol]

Rick (kiding) mwolf, I think you need to convert the year, month to int as
else{
nextMonth = 0
nextYear = parseInt(year) + 1
}
or if you select like 1993 and then click the back it concates the 1

_____________________________________________________________________

_{Hakuna matata!!}

YNOTU · Dec 17, 2003

hey coach

your site

http://www.highviewheat.com/index.asp

just fried my eyebrows
[bugeyed]

mwolf00 · Dec 17, 2003

Thanks onpnt -

I haven't hit a snag with that yet, but it won't hurt. I just wrote this to make a general date picker for multiple situations - haven't actually used it yet...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

mwolf00 · Dec 17, 2003

coach -

did you write the "Light-It-Up!" page yourself?

http://www.highviewheat.com/index.asp

fun game...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

coachdan · Dec 18, 2003

mwolfe,

Did you beat the game? I have been unable to myself yet. In answer to your question, no I didn't write it - I only modified it a bit to fit my needs.

DeCojute,

It's not meant to be a masterpiece. It is meant to entertain my teenage players when they visit the site. They also use it to send stats to college coaches to get on their recruiting lists. Believe it or not, 14 y.o.'s are already making contact with colleges.

coachdan32

http://www.highviewheat.com/index.asp

http://www.kristensfastpitchworld.com/index.asp

YNOTU · Dec 18, 2003

I apologize if my comments did not come across as I intended. I was simply making a remark to the bright red.

mwolf00 · Dec 18, 2003

coachDan -

I beat a random in 13 clicks and an easy in 6. Think I was kinda lucky..

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

onpnt · Dec 18, 2003

show off!

_____________________________________________________________________

_{Hakuna matata!!}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Design Question 1

MIS

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

MIS

Programmer

Programmer

Programmer

Programmer

Programmer

Technical User

Programmer

Programmer

MIS

Technical User

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor