mouseover

[WebDesigner]

I have a calendar on my web site and I want to be able to mouseover and have
a different event display below the calendar for each day of the month. Can
anyone help me? thanks!

 

[Trevor L.]

I have a calendar on my web site and I want to be able to mouseover
and have a different event display below the calendar for each day of
the month. Can anyone help me? thanks!

Wow, that is quite an ask !

Actually, the same thought occurred to me. I have found a calendar. This is the description of the author
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Matthew D. Krieg ([email protected]) -->
<!-- Web Site: http://geocities.com/battlebots102001/javascript_gizmos/index.htm -->

It works quite nicely, but I have been trying to customise it a bit.

It currently displays one day per line (with the days' event on that line) and I was thinking that I could change it to the standard
calendar format of 5 lines each of 7 days (using a table). I am sure I can do it with a lot of trial and error, but the text in each
day could end up quite small, so I thought just as you did.

If I get there, I'll check to see whether you have found an answer and if not, post mine.

 

[WebDesigner]

Trevor L.,
Thank you sooo much for the tip! That calendar will work wonders

 

[Trevor L.]

Trevor L.,
Thank you sooo much for the tip! That calendar will work wonders

WebDesigner,
I have been working on this calendar for a while.

I have now come up with a calendar that displays each day of the month in a reasonable format - well, it looks like a normal
calendar in the format I am used to Sunday to Saturday with Sunday and Saturday marked in red. Days of the week not in the month are
grey (or gray, if you are American).

What I have done is place a dot (.) in any day for which there are no entries. Where there are entries, the day has inside it the
word "Details" in blue. Holding the mouse over it reveals the details, using a title statement.

This is not quite what you suggested, which is to click on the day and the details will show up in a box below. This will be my next
step.

You can see the result so far by clicking on "Event Calendar" on my site (address below) - 3rd column, second row.

BTW,
The code may look a bit convoluted but it has two advantages.
1. It is generated by another piece of code into which all you have to enter is:
Year and Month
Day on which month starts
(To do this by code is possible but would take quite a bit of effort)
Details for each day

2. The details for each day can be updated by opening the generated code (in this case calendar0606.html) in a text editor and
searching for the day (e.g. 30/06)
This will find
<!-- ENTER THE DETAILS FOR 30/06 HERE -->
<span title='blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blah'
class='normal'>
<!-- **************************** -->
You then change the text in title =' ' to whatever you want

It is a little bit more circuitous than setting it up originally, but still fairly straightforward.

When I get it finished (by setting up a box for the day's details), I will post the code generator

 

[Trevor L.]

Trevor L.,
Thank you sooo much for the tip! That calendar will work wonders

WebDesigner,
I have now finished writing the Calendar Generator in HTML.

When executed, it asks for:
Year (2006 is curently filled in as default)
Month
Day on which that month starts
Events for each day
(This is read as HTML code, so for a line break, add <br>. Other HTML tags could also be added if required.)

The result for July 2006 can be seen on my site on the Home Page | Event Calendar

The code to execute is
http://tandcl.homemail.com.au/calgen.html

This creates the code which has to be pasted into an HTML file and saved (in my case as 'calendar0607.html')

Once this code is created, there is no need to generate it again, which would lose all the existing entries.
It can be updated to add, delete or alter existing entries.

To update it, edit the file (e.g. calendar0607.html).
All entries are at the bottom of the HTML file in separate <div>s for each day, for example:
<!-- ENTER THE DETAILS FOR 01/07 HERE -->
<div class='daydiv' style='display:none' id='day01'>
01/07: 2006/2007 Financial Year Start<br>
(Australia)
</div>
(A search for 'ENTER THE DETAILS' would find the first one.)

The date (01/07: ) should remain, together with the space after the colon. (This is used when displaying the event.)
However, the details after the date can be amended. This is plain HTML code, so amend it as required.

I can't think of any more bells and whistles to add, but if I do I will alter calgen.html.
(One thought is to take out the text '01/07: ' etc. When displaying the event, the JS knows what day it is - by the id='day01', so
why write it into the <div>?)

If anyone thinks of any improvements, please let me know. I may post this to The Javascript Source because that is where I got the
code from in the first place, although now much amended.