HTML Calendar

Forum Moderators: open

Message Too Old, No Replies

HTML Calendar

Novice needs code help

ArkTrav

5:09 pm on Jan 9, 2009 (gmt 0)

Hello. I've been tasked (short-fused) to create an "interactive" calendar for a pretty much static web site.

The calendar should be monthly and have the ability to click on information in the table cell to go out to a different URL. My efforts to add information into the table cells skew the look of the calendar (spacing and all), so I know it's something to do with they way my table is set up. However, I don't have the skills to realize what the problem is.

I don't have the ability to use PHP at this time. Any suggestions would be greatly appreciated.

Trav

Dash_25

7:43 pm on Jan 9, 2009 (gmt 0)

you will need to provide more information than that.
But maybe when you are inserting the information try placing it inside a div.

Demaestro

7:46 pm on Jan 9, 2009 (gmt 0)

Would it satisfy the requirements if you were to use a third party web calendar?

Google Calendar is very easy to use. It can be made private or public and you can easily embed it into any HTML webpage.

There are others as well but I only have XP with the Google one.

ArkTrav

8:17 pm on Jan 9, 2009 (gmt 0)

I was afraid I'd need more information out there. I'll post the code a little later (it is currently residing on a secure network).

The secure network is also the reason I can't use a third party web calendar. I'm going to have to build what I need.

Thanks for the replies and I'll post the code I'm trying to work with this evening.

Trav

ArkTrav

1:45 pm on Jan 10, 2009 (gmt 0)

Okay...here's the code I'm using for the table. I like the layout of the calendar, although I need to make it bigger and I can't figure out how to do that.

My other major problem is that, when I put information into a table cell (which will become a link to another page), it really skews the cells in the table. Since there won't be information in each cell, it will look really wonky.

Thanks in advance for any assistance.

Trav

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<html>
<title>
Calendar
</title>
<head>

</head>
<body>

<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3>
<TR>
<TD COLSPAN="7" ALIGN=center><B>January 2009</B></TD>
</TR>

<TR>
<TD COLSPAN="7" ALIGN=center><I>Course Calendar</I></TD>
</TR>

<TR>
<TD ALIGN=center>4</TD>
<TD ALIGN=center>5</TD>
<TD ALIGN=center>6</TD>
<TD ALIGN=center>7</TD>
<TD ALIGN=center>8<br><br>PL Class</TD>
<TD ALIGN=center>9<br><br><br></TD>
<TD ALIGN=center>10</TD>
</TR>

</body>
</html>

jbinbpt

2:12 pm on Jan 10, 2009 (gmt 0)

A quick Google search for html calendar maker returns examples close to yours. Have you done this?

ArkTrav

2:35 pm on Jan 10, 2009 (gmt 0)

Yeah...that's where I got the code from. It's modifying the code that seems to be the problem. It skews things.

I'm trying to get some advice on how I can modify the code to make the cells bigger and uniform in size.

Thanks for the reply.

Trav

wyweb

3:36 pm on Jan 10, 2009 (gmt 0)

I'm trying to get some advice on how I can modify the code to make the cells bigger and uniform in size

You might try adding some width and height.

rocknbil

4:27 pm on Jan 10, 2009 (gmt 0)

The first thing you'll need to do is learn a little server-side programming (perl, PHP, Asp, ColdFusion . . . ) if you wish to make it "interactive," or use a third party calendar as suggested.

But to address a few maintenance issues:

Start with this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

I don't see a frameset anywhere, properly define your document type. Everyone seems to be on the XHTML bandwagon as the "latest and greatest" without knowing why, but if your document is not using XHTML features, an HTML variation is going to give you more wiggle room for element support. You can use the 4.01 strict, but transitional will be fine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
.....

Next, rip all these out.

If you absolutely MUST apply an inline attribute, use only width as suggested, and you only need to do so on the first row.

The only other attribute you may want to include inline are the cellpadding and cellspacing attributes as they are not fully supported by browsers in CSS.

Last, it's a bad idea to leave blank TD's . .
<td></td>

When you border them, some browsers won't render the cell giving you a weird look.
<td> </td>

How is this all better? It removes all the markup from your table and gives you a central location to manage presentation, your style sheet. It will be easier to locate and apply regular changes without having to wade through inline markup. When you get down to programming it, a consistent markup-free HTML will be easier to manipulate.

Working sample: This doubles up the inner borders, but could be fixed using border-right, etc . . . just trying to keep it simple. :-)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Calendar</title> 
 <meta name="Description" content="Monthly Calendar"> 
 <meta name="keywords" content="A monthly calendar template"> 
 <!-- you should use this instead . . . <link rel="stylesheet" type="text/css" href=""> --> 
 <style type="text/css"> 
  #calendar-table { 
 width: 716px; /* 100 per cell + borders */ 
 margin:auto; 
 background:#ffffff; 
 border: 1px solid #b1b1b1; 
} 
#calendar-table td { 
 vertical-align:top; 
 width: 100px; 
 height: 100px; /* will vary with content */ 
 padding:4px; 
 background: #f8f8f8; 
 border: 1px solid #b1b1b1; 
} 
#calendar-table td p { 
 text-align: center; 
} 
#header { 
 background:#000000; 
 color:#ffffff; 
 font-weight:700; 
 padding:12px; 
 text-align: center; 
} 
#descr { 
 background:#ffffff; 
 font-style:italic; 
 padding:12px; 
 text-align: center; 
} 
 </style> 
</head> 
<body> 
<table id="calendar-table" cellpadding="0" cellspacing="0"> 
<tr> 
 <th colspan="7" id="header">January 2009</th> 
</tr> 
<tr> 
 <th colspan="7" id="descr">Course Calendar</th> 
</tr> 
<tr> 
 <td>Sun</td> 
 <td>Mon</td> 
 <td>Tue</td> 
 <td>Wed</td> 
 <td>Thu</td> 
 <td>Fri</td> 
 <td>Sat</td> 
</tr> 
<tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 <td>1</td> 
 <td>2</td> 
 <td>3</td> 
</tr> 
<tr> 
 <td>4</td> 
 <td>5</td> 
 <td>6</td> 
 <td>7</td> 
 <td>8 
 <p>PL Class</p> 
 </td> 
 <td>9</td> 
 <td>10</td> 
</tr> 
<tr> 
 <td>11</td> 
 <td>12</td> 
 <td>13</td> 
 <td>14</td> 
 <td>15</td> 
 <td>16</td> 
 <td>17</td> 
</tr> 
<tr> 
 <td>18</td> 
 <td>19</td> 
 <td>20</td> 
 <td>21</td> 
 <td>22</td> 
 <td>23</td> 
 <td>24</td> 
</tr> 
<tr> 
 <td>25</td> 
 <td>26</td> 
 <td>27</td> 
 <td>28</td> 
 <td>29</td> 
 <td>30</td> 
 <td>31</td> 
</tr> 
<tr> 
 <td>30</td> 
 <td>31</td> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
</tr> 
</table> 
</body> 
</html>

tedster

4:29 pm on Jan 10, 2009 (gmt 0)

The most economical way would be with CSS, something like this:

<head>
<style type="text/css">#cal td{height:10px;width10px;}</style>
</head>
<body>
<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3 id="cal">
....

rocknbil

4:37 pm on Jan 10, 2009 (gmt 0)

P.S., I just noticed 30 and 31 are doing a double appearance, oops ... :-) You may want to add another style for the day headers:


#days td { 
 height: 1em; 
 background-color: #0000a0; 
 border: none; 
 color: #ffffff; 
 font-weight:700; 
 text-align: center; 
}

And


<tr id="days"> 
 <td>Sun</td> 
 <td>Mon</td> 
 <td>Tue</td> 
 <td>Wed</td> 
 <td>Thu</td> 
 <td>Fri</td> 
 <td>Sat</td> 
</tr>

ArkTrav

6:23 pm on Jan 10, 2009 (gmt 0)

I thank you all for taking the time to make suggestions and comments. Particularly rocknbil, who fixed the code I posted to create a good-looking calendar.

I also appreciate the school lessons. I'll get right on that learning server-side programming thing...as soon as I figure out exactly how to define a document type and create a stylesheet. ;-)

This forum has been a life-saver for someone who was tossed an "HTML for Dummies" book Friday morning and told to have an "interactive" calendar ready for a 10am Monday brief (hence the "Novice needs code help" post).

Thanks again.

Trav

[edited by: ArkTrav at 6:29 pm (utc) on Jan. 10, 2009]

HTML Calendar

Novice needs code help

ArkTrav

Dash_25

Demaestro

ArkTrav

ArkTrav

jbinbpt

ArkTrav

wyweb

rocknbil

tedster

rocknbil

ArkTrav

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week