Hi, wanted to share this with anyone interested. I hope someone may find it useful.
The reason I came to make this is due not not purchasing any plugins etc, the want of keeping it simple, and wanting my own solution that I can expand upon if need be.
I initially started looking at javascript solutions to calendars, and i though to myself, this is getting silly, so many lines of code, there must be a simpler logic to do that with a <%a5 %> script. So I had a look at the various date-time functions and found some to be very handy!
This is it in its simplest form: (i've commented a fair bit, so bare with it if you're trying to read through it)
since then i've been able to call database results (with datetime values), and place them in a charater array (CharArray[31], size 31 for the days in a month) and use logic to place them into the table where a cell is rendered in accordance with i, so that CharArray[i] places the data associated with it in the right cell. <<< I've left this part out of the code above, but its fairly simple: Make sure the month in the data matches current month selected, then place it in the right day in the array. i.e
Then place CharArray[i] in the cell rendering blocks
N.B: To render the table, you need to click a link passing in the pagevariable varDate in "dd/mm/yyyy" format, the default version I use is a formatted now() function
N.B2: Depending on how your database handles datetime, or if you store in in a string of some sorts, then extra (or less) formatting may be required
Screenshot below (i've blurred out the data in the jpg)
The reason I came to make this is due not not purchasing any plugins etc, the want of keeping it simple, and wanting my own solution that I can expand upon if need be.
I initially started looking at javascript solutions to calendars, and i though to myself, this is getting silly, so many lines of code, there must be a simpler logic to do that with a <%a5 %> script. So I had a look at the various date-time functions and found some to be very handy!
This is it in its simplest form: (i've commented a fair bit, so bare with it if you're trying to read through it)
Code:
<%a5 'BUILD THE CALENDAR 'Instantiate needed variables dim FirstDate as D dim LastDate as D 'Get the variable of the date passed in by which ever link was clicked to access this page FirstDate = date_firstdayofmonth(ctod(word(convert_type(varDate,"c"),1," "))) LastDate = date_lastdayofmonth(ctod(word(convert_type(varDate,"c"),1," "))) 'Get the month ame and the year for the date passed in dim MonthName as C MonthName = cmonth(convert_Type(FirstDate,"T")) dim Year as C Year = cyear(convert_type(FirstDate,"T")) 'Start creating the tables that house the calendar, Head it with the MonthName and Year ? <<%str% <table border="1" style="border-style:solid;" cellpadding="0px"> <tr> <td align="center"><font size="5">%str% + MonthName + " " + Year + <<%str% </font> </td> </tr> <tr> <td> <table border="1" cellpadding="5px"> %str% 'Get the number day (i.e Monday = 1, Tuesday = 2, Wednesday = 3...etc) for the first day Dim FirstDay as N FirstDay = Dow_iso(FirstDate) 'Get the number of days in this month based on the calculated start and end days for the month Dim DaysInMonth as N DaysInMonth = LastDate - FirstDate 'Create the Header row for days of the week ? <<%str% <tr height="50px" style="font-weight:bolder;background-color:#000000; color:#ffffff;font-size:16pt;" align="center"> <td width="100px" >Mon</td> <td width="100px" >Tue</td> <td width="100px" >Wed</td> <td width="100px" >Thu</td> <td width="100px" >Fri</td> <td width="100px" >Sat</td> <td width="100px" >Sun</td> </tr> <tr valign="top" height="80px" > %str% 'Make grey cells for those days in the first week that do not occur in this month. FOR i=1 TO (FirstDay-1) STEP 1 ? "<td bgcolor=\"#808080\" ></td>" NEXT 'THIS IS WHERE THE CODE GETS TRICKY 'Instantiate variable to count the days as we render cells (i.e 1 to 30, 1 to 28) dim CurrentDay as N CurrentDay = 1 'Instantiate variable to count the days of the week as we render cell rows (1 to 7 then new row, 1 to 7 then new row etc etc) dim Weekday as N Weekday = FirstDay 'Since we have already rendered the days of the first week that do not occur for this month 'We start rendering cells on this day of the week 'Iterate through everday day of the month FOR i=CurrentDay TO day(LastDate) STEP 1 IF Weekday = 7 'If weekday is sunday(7), make font red, Close off row, Start New Row, Reset Weekday to 1 IF i = day(now()) 'If the cell represents today (or months away/before from today), make font green ? "<td><font color=\"#008000\">" + i + "<br></font></td></tr><tr valign=\"top\" height=\"80px\">" ELSE 'Make font red ? "<td><font color=\"#ff0000\">" + i + "</font></td></tr><tr valign=\"top\" height=\"80px\">" END IF Weekday = 1 'Reset Weekday to 1 ELSE IF Weekday = 6 'If weekday is saturday(6), make font red, set Weekday to sunday(7) IF i = day(now()) 'If the cell represents today (or months away/before from today), make font green ? "<td><font color=\"#008000\">" + i + "<br></font></td>" ELSE 'Make font red ? "<td><font color=\"#ff0000\">" + i + "</font></td>" END IF Weekday = Weekday + 1 'Set weekday to 7 ELSE 'If any other day Render plain text, increment Weekday by one day IF i = day(now()) 'If the cell represents today (or months away/before from today), make font green ? "<td><font color=\"#008000\">" + i + "<br></font></td>" ELSE 'Make font plain ? "<td>" + i + "</td>" END IF Weekday = Weekday + 1 'Increment weekday by 1 END IF NEXT 'Render gray cells for final week(s) in which days of the select month do not occur 'This also ensures the grid for the days is 6 rows by 7 columns, 42 Cells to account for Months that start near the end of a week with 30 + days FOR i=day(LastDate)+ FirstDay TO 42 STEP 1 IF weekday = 7 'If weekday is sunday, Close off row and create a new one (even if its not needed) ? "<td bgcolor=\"#808080\"></td></tr><tr valign=\"top\" height=\"80px\">" Weekday = 1 ELSE ? "<td bgcolor=\"#808080\"></td>" Weekday = Weekday + 1 end if NEXT ' Close off final row, close off nested calendar table, close off header table, add navigation links to change months ? <<%str% </tr> </table> </td> </tr> <tr> <a href="%str% + "calendar.a5w?varDate=" + convert_type(addmonths(convert_type(varDate,"D"),-1),"c") + "\" > << Previous Month </a> | " + <<%str% <a href="%str% + "calendar.a5w?varDate=" + convert_type(addmonths(convert_type(varDate,"D"),1),"c") + "\" > Next Month >> </a>" + <<%str% </tr> </table> %str% %>
Code:
WHILE dataResults.NextRow() IF cmonth([datadate]) = MonthName 'Note the variable used for month name in above code CharArray[day([datadate])] = [data you want to display] END IF END WHILE
N.B: To render the table, you need to click a link passing in the pagevariable varDate in "dd/mm/yyyy" format, the default version I use is a formatted now() function
N.B2: Depending on how your database handles datetime, or if you store in in a string of some sorts, then extra (or less) formatting may be required
Screenshot below (i've blurred out the data in the jpg)
Comment