myBlog myBlog Home

Back to Blog MTNCOMP


asp javascript html calendar example

Published: Wednesday, January 16, 2019 written by Drew Jackson



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%'>&nbsp;</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 & "&nbsp;"
    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">&nbsp;</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" >&nbsp;</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">
        &nbsp;
    </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">
      &nbsp;
    </div></td>
    <td width="64"><div align="center" class="style33">
        &nbsp;
    </div></td>
    <td width="40"><div align="center" class="style30">&nbsp;</div></td>
    <td width="64"><div align="center" class="style33">
       &nbsp;
    </div></td>
    <td width="41"><div align="center" class="style33">
        &nbsp;
    </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'>&nbsp;</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'>&copy;</a> 2009-< % =year(now())% > All rights reserved.</span></div></td>
  </tr>
</table>
  <p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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>&bull;&nbsp;< %=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 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.

© 2019 myBlog™ v1.1 All rights reserved. We count views as reads, so let's not over think it.