asp javascript html calendar example
by Mountain Computers Inc., Publication Date: Wednesday, January 16, 2019
View Count: 3082, Keywords: 2009, asp, javascript, calendar, Hashtags: #2009 #asp #javascript #calendar
To generate calendar in asp and html, i had to figure out how to do so using some MOD logic. This was created back in 2009 using some javascript examples from a radio station in Oregon that gave me the idea but they did not have the complete solution. it has some interesting methods to generate from javascript the calendar but they could not get the table and days of the week right.
so i helped them fix it while developing this solution...
have fun. the asp i add a padded space between the front and closing asp tags just like one does in php for < ? versus < % to start and ? > versus % > .. just remove the padded space and then you can see where i adjusted and stripped out the client info, phone #, links, and you have to provide your own DSN-less connection, etc.. most of that found on Microsoft developer sites.
more to come...
< %@ LANGUAGE="VBSCRIPT" % >
< %
option explicit
on error resume next
response.expires = 0
if request.querystring("method") = "leaveadminmode" then
session("un") = ""
end if
if request.form("btn_submit") = "Exit" then
response.redirect "classes_edit.asp"
end if
% >
<!--#include virtual="/inc/adovbs.asp"-->
<!--#include virtual="/inc/sqldsn.asp"-->
<!--#include virtual="/inc/sqltext.asp"-->
<html>
<head>
<title>Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
body {
background-image: url();
background-color: #062134;
}
a:link {
color: #3300FF;
text-decoration: none;
}
a:visited {
color: #2B7CBB;
text-decoration: none;
}
a:hover {
color: #666666;
text-decoration: underline;
}
a:active {
color: #2B7CBB;
text-decoration: none;
}
.style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000000;
font-weight: bold;
}
.style15 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
.style30 {color: #0000FF}
.style33 {font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #0000FF; }
-->
</style>
< %
// ************** BEGIN FUNCTIONS ****************//
// global variable
dim mydate
function leapYear(year)
leapyear = IsDate("2/29/" & year)
end function
function weekdayn(day)
weekdayn = WeekDayName(WeekDay(day))
end function
function drawCal()
dim c, d, x, ndim, wkd, weekdaynval, fweekdayn, fweekdaynumval, dayNum, text
if request.querystring("mydate") <> "" then
mydate = request.querystring("mydate")
else
mydate = date()
end if
// get the date to target and check
d = CDate(mydate)
ndim = day(dateadd("m", 1, (d + 1 - day(d))) - 1)
weekdaynval = weekdayn(Month(d) & "/1/" & year(d))
fweekdaynumval = WeekDay(Month(d) & "/1/" & year(d))
// create array of abbreviated day names
dim DayofWeekN(8)
DayofWeekN(0) = ""
DayofWeekN(1) = "Sunday"
DayofWeekN(2) = "Monday"
DayofWeekN(3) = "Tuesday"
DayofWeekN(4) = "Wednesday"
DayofWeekN(5) = "Thursday"
DayofWeekN(6) = "Friday"
DayofWeekN(7) = "Saturday"
text = text & "<TABLE BORDER='1' WIDTH='100%' CELLPADDING='10' CELLSPACING='0'>"
// show the debug info
if request.querystring("debug") = "yes" then
text = text & "<TR><TD colspan=8><FONT FACE='Arial' size='-2'>"
text = text & "mydate = " & d & " <br>Month = " & monthname(month(d)) & " <br>Day = " & day(d) & " <br>Is this a Leap Year? = " & leapyear(year(d)) & " <br>Number days in month = " & ndim & " <br>WeekDayName = " & weekdayn(d) & " <br>First Day of Month Weekday Name = " & weekdaynval & " <br>First Day of Month Weekday Number = " & fweekdaynumval
text = text & "</FONT></TD></TR>"
end if
// create header of table
text = text & vbcrlf & "<TR ALIGN='center' VALIGN='center'><TD HEIGHT='50' BGCOLOR='white' COLSPAN='7'>"
text = text & "<P class='style15' align='center' style='margin-top: 0; margin-bottom: 0'>" & "<a href='aspCalendar.asp?mydate=" & dateadd("m", -1, mydate) & "&m=-1"
if request.querystring("debug") = "yes" then
text = text & "&debug=yes"
end if
text = text & "'>"
text = text & "<img align='middle' border='0' height='58' alt='Next Month' title='Previous Month' valign='middle' src='/images/leftarrow.jpg'>"
text = text & "</a> " & monthname(month(d)) & " " & year(d) & " <a href='aspCalendar.asp?mydate=" & dateadd("m", +1, mydate) & "&m=+1"
if request.querystring("debug") = "yes" then
text = text & "&debug=yes"
end if
text = text & "'>"
text = text & "<img align='middle' border='0' height='58' alt='Next Month' title='Next Month' valign='middle' src='/images/rightarrow.jpg'>"
text = text & "</a> "
text = text & "</P></TD>"
text = text & vbcrlf & " </TR>"
// create first row of table to set column width and specify week day
text = text & vbcrlf & "<TR ALIGN='center' VALIGN='center'>"
for dayNum = 1 to 7
text = text & vbcrlf & vbtab & "<TD HEIGHT='50' BGCOLOR='SILVER'><P class='style15'>" & DayofWeekN(dayNum) & "</P></TD>"
next
text = text & vbcrlf & "</TR>"
text = text & vbcrlf & "<TR>"
// pad the first week
for x = 1 to fweekdaynumval - 1
text = text & vbcrlf & vbtab & "<TD width='14%'> </TD>"
next
// blow the existing calendar
c = 1
do while c <= ndim
// open table cell
text = text & vbcrlf & "<TD HEIGHT='80' WIDTH='14%' VALIGN='TOP' ALIGN='LEFT'>"
' text = text & vbcrlf & vbtab & " "
text = text & vbcrlf & vbtab & "<FONT FACE='Arial', size='+1'><STRONG>" & c & "</STRONG></FONT>"
// your code and module goes here.... thanks, c/o Andrew R Flagg, Mountain Computers Inc.
text = text & vbcrlf & vbtab & "<br>"
text = text & getclasses(c, year(mydate), month(mydate))
// close table cell
text = text & "</TD>"
// if the day is Saturday then end the row and start a new one
if ((c + x - 1) mod 7) = 0 then
text = text & vbcrlf & "</TR>" & vbcrlf & "<TR>"
end if
c = c + 1
loop
text = text & "</TR>"
text = text & vbcrlf & "</TABLE>"
//return completed calendar text
drawCal = text
end function
function getclasses(c, y, m)
dim text
'sql = "select * from tbl_ClassEvents where ClassEvent_StartDate >= #" & m & "/1/" & y & "# AND ClassEvent_StartDate < #" & month(dateadd("m", 1, mydate)) & "/1/" & year(dateadd("m", 1, mydate)) & "# order by ClassEvent_StartDate"
sql = "select * from tbl_ClassEvents where ClassEvent_StartDate = #" & m & "/" & c & "/" & y & "#"
'response.write (sql)
set rs = Conn.Execute(sql)
//text = formatdatetime(m & "/" & c & "/" & y, 2)& "..."
if not rs.EOF then
if request.querystring("debug") = "yes" then
response.write ("<font face='Arial' size='-1'>MATCH FOUND @ " & c & " -> " & sql & "</font><br>")
end if
Do While Not rs.EOF
if formatdatetime(rs("ClassEvent_StartDate"),2) = formatdatetime(m & "/" & c & "/" & y, 2) then
text = text & vbtab & "<a title='" & GetSQLText(rs("ClassEvent_Description")) & "'>" & vbcrlf & vbtab & vbtab & "<img src='/images/class_info_microsoft_clipart.gif'>"
text = text & vbcrlf & vbtab & "</a>"
text = text & vbcrlf & vbtab & "<a title='" & GetSQLText(rs("ClassEvent_Location")) & " - " & GetSQLText(rs("ClassEvent_Street")) & ", " & GetSQLText(rs("ClassEvent_City")) & " " & GetSQLText(rs("ClassEvent_State")) & "'>" & vbcrlf
text = text & vbtab & vbtab & "<img src='/images/microsoft_clipart_map_location.gif'>"
text = text & vbcrlf & vbtab & "</a>"
text = text & vbcrlf & vbtab & "<br>"
text = text & vbcrlf & vbtab & "<a href='Register.asp?Class=" & GetSQLText(rs("ClassEvent_Number")) & "' title='" & GetSQLText(rs("ClassEvent_Number")) & "," & GetSQLText(rs("ClassEvent_TimeFrame")) & ", " & GetSQLText(rs("ClassEvent_Location")) & "'>"
text = text & vbcrlf & vbtab & vbtab & "<font face='Arial' size='-1'>" & GetSQLText(rs("ClassEvent_Title")) & "<br><font size='-1'>" & GetSQLText(rs("ClassEvent_TimeFrame")) & "</font></font>"
text = text & vbcrlf & vbtab & "</a>"
text = text & vbcrlf & vbtab & "<br>" & vbcrlf
end if
rs.MoveNext
Loop
end if
getclasses = vbcrlf & text
end function
// ************** END FUNCTIONS ****************//
% >
</head>
<body >
<div align="center">
<p style="margin-bottom: 0"> </p>
<table width="700" border="0" cellpadding="5" bordercolor="#C4D2EA" bgcolor="#26407D">
<tr valign="top">
<td colspan="2" ><img src="/images/logo.jpg" width="684" height="141" alt="" title=""></td>
</tr>
<tr valign="top" bgcolor="#6190C4">
<td width="464" > </td>
<td width="210"><p align="center" style="margin-top: 0; margin-bottom: 0"><span class="style14">Call Office @ </span></p>
</td>
</tr>
</table>
<table width="700" border="0" cellpadding="5" bgcolor="#FFFFFF">
<tr valign="top">
<td width="87"><div align="center" class="style33">
</div>
</td>
<td width="75"><div align="center" class="style33">
<div align="center"><a href="Register.asp"><strong>Register</strong></a></div>
</td>
<td width="85"><div align="center" class="style33">
<div align="center"><a href="aspCalendar.asp"><strong>Calendar</strong></a></div>
</div></td>
<td width="93"><div align="center" class="style33">
</div></td>
<td width="64"><div align="center" class="style33">
</div></td>
<td width="40"><div align="center" class="style30"> </div></td>
<td width="64"><div align="center" class="style33">
</div></td>
<td width="41"><div align="center" class="style33">
</div></td>
<td width="41"><div align="center" class="style33">
<div align="center"><a href="http://www.microsoft.com"><strong>Home </strong></a></div>
</div></td>
</tr>
<tr valign="top" bgcolor="#C4D2EA">
<td height="129" colspan="9" bgcolor="#DCE2F5">
< %
// **************************** //
// **** begin main routine **** //
// **************************** //
dim textout
textout = drawCal()
// ************************** //
// **** end main routine **** //
// ************************** //
% >
<table width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td bgcolor='white'><font face='Arial' size='+2'><strong>Registration Calendar</strong></font></td>
<td bgcolor='white'> </td>
</tr>
<tr>
<td colspan='2'><p style="margin-top: 0;"><br>
<font face='Arial' size='-1'>To register for one or multiple classes, click on the class to add to shopping cart, and then return to the calendar to select additional classes. One can complete single class registration and checkout as well. </font></p>
<p style="margin-bottom: 0;"><span class="style2">If you need to register mulitple students, please contact the office @ . </span><br>
<br>
</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="9"><div align="center"><font face='Arial' size='-1'>To see detailed location information, move your mouse over </font> <img src="/images/microsoft_clipart_map_location.gif"><font size="-1" face="Arial"> the globe icon.<br>For course descriptions move your mouse over <img src="/images/class_info_microsoft_clipart.gif"> the book icon</font></div></td>
</tr>
<tr>
<td colspan="9">
< %
response.write (textout)
% >
</td>
</tr>
<tr valign="top">
<td colspan="8"><div align="center"><span class="style15"><a href='microsoftlogin.asp'>©</a> 2009-< % =year(now())% > All rights reserved.</span></div></td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p class="style1" style="margin-bottom: 0;"><br>
</p>
</div>
< %
if request.querystring("debug") = "yes" then
response.write ("<font face='Arial' size='-1'>")
response.write ("<h5>DEBUGGING CODE for SQL</h5>")
sql = "select * from tbl_ClassEvents where ClassEvent_StartDate >= #" & Month(mydate) & "/1/" & year(mydate) & "# AND ClassEvent_StartDate < #" & month(dateadd("m", 1, mydate)) & "/1/" & year(dateadd("m", 1, mydate)) & "# order by ClassEvent_StartDate"
response.write (sql)
set rs = Conn.Execute(sql)
Do While Not rs.EOF
% >
<p>• < %=trim(rs("ClassEvent_Number"))% >, < %=trim(rs("ClassEvent_Title"))% >, < % =rs("ClassEvent_Dates")% > @ < % =rs("ClassEvent_TimeFrame")% >, < % =rs("ClassEvent_Location")% >, < % =rs("ClassEvent_Dates")% > @ < % =rs("ClassEvent_TimeFrame")% >, < % =rs("ClassEvent_Location")% >
< %rs.MoveNext
Loop
response.write ("</font>")
end if
% >
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-123456789");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
if you found this article helpful, consider contributing $10, 20 an Andrew Jackson or so..to the author. more authors coming soon
FYI we use paypal or patreon, patreon has 3x the transaction fees, so we don't, not yet.
© 2024 myBlog™ v1.1 All rights reserved. We count views as reads, so let's not over think it.