Project Phase 3

ChompGator · April 20, 2008

I was able to get someone to help me out with a Calendar script...What I want to do now is when a user hovers their mouse arrow over any of the certain days a window appears to the left (or right) of the mouse arrow. Here is what I mean about a window appearing:

http://www.4guysfromrolla.com/webtech/code/ContextSensitiveHelp.htm

The thing is, is there some type of `if` statement I can add to my calendar script so that automatically shows that type of window whenever a user hovers their mouse over the day they want? I was reading about php if statements on google but I haven't found anything yet. Im going to kep searching

In the window, eventually it will show a list of events going on for that day. but for now this is what Im having trouble with, heres the script:

<html>
<!-- Creation date: 04/02/05 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>baaCalendar</title>
<meta name="Author" content="Barand">
<meta name="Generator" content="AceHTML 4 Pro">

<style type="text/css">
TD {font-family: arial; font-size: 9pt; text-align: center; height: 20}
TH {font-family: arial; font-size: 9pt; text-align: center; width: 20px; height: 20; font-weight: 600; color: #FFFFFF}
TH.wd {background: #99CC99}
TH.we {background: #999999}
TD.we {background: #EEEEEE; }
TD.wd {background: #EEFFEE}
TD.hd {background: #FFFFFF; color: #339900}
A.nul {text-decoration: none}
A:hover {background: #DDDDDD; color: #FF0000}
</style>
</head>
<body>

<?php
    $currMonth = isset($_GET['month']) ? $_GET['month']  : date('n');
    $currYear  = isset($_GET['year'])  ? $_GET['year']   : date('Y');
    $today = (($currYear == date('Y')) && ($currMonth == date('n'))) ? date('j') : 0;

    $prevMonth = $currMonth==1 ? 12 : $currMonth-1;
    $nextMonth = $currMonth==12?  1 : $currMonth+1;
    $prevYear = $currMonth==1 ? $currYear-1 : $currYear;
    $nextYear = $currMonth==12? $currYear+1 : $currYear;


    $day1 = mktime(0,0,0,$currMonth,1,$currYear);
    $dim = date('t', $day1);
    $dayN = mktime(0,0,0,$currMonth,$dim,$currYear);
    $dow1 = (date('w',$day1)+6) % 7;
    $dowN = (date('w',$dayN)+6) % 7;
    $calHead = date('F Y',$day1);
    echo <<<EOT
        <table border="0" cellspacing="1" style="border: 1pt solid silver">
        <tr>
          <td class="hd"><a class="nul" href="$_SERVER[php_SELF]?year=$prevYear&month=$prevMonth"><<</a></td>
          <td colspan="5" class="hd">$calHead</td>
          <td class="hd"><a class="nul" href="$_SERVER[php_SELF]?year=$nextYear&month=$nextMonth">>></a></td>
        </tr>
        <tr>
          <th class="wd">M</th>
          <th class="wd">T</th>
          <th class="wd">W</th>
          <th class="wd">T</th>
          <th class="wd">F</th>
          <th class="we">S</th>
          <th class="we">S</th>
        </tr>
        <tr>
EOT;

    for ($d=0;$d<$dow1;$d++) echo "<td class=\"hd\"> </td>";
    $c = $dow1;
    for ($d=1; $d<=$dim; $d++, $c++) {
        if ($c%7==0) echo "</tr><tr>";
        $cl = ($c%7==5) || ($c%7==6) ? 'we' : 'wd';
        $st = ($d == $today) ? "style='border: 1pt solid #FF0000'" : '';
        echo "<td class=\"$cl\" $st>\n";
        echo "$d" ;
        echo "</td>\n";
    }
    while ($c++ % 7 != 0) echo '<td class=\"hd\"> </td>';
    echo "</tr></table>\n";


?>
</body>
</html>

Barand · April 20, 2008

Im just going to get it to call whatever event is on that day from the database and display it in the little window that appears...when you hover your mouse over a certain date. Im sure Ill have trouble with that too, but Im going to start coding!

I suppose this is one way to start coding.

ChompGator · April 20, 2008

haha - it is....But the thing is, Ive never done anything with this complexity > So by viewing scripts I learn...But with that being said - Ive made the form in the admin area that submits data into the database. Now alls I gota figure out is how to display these windows so I can start calling data from the database to display in these little windows.

Anyway - so thats it for now, Im going to keep seeing what I can do...I tried something with JS with the PHP it worked, but it messed up the table of the calender - so I gota keep trying different ways of doing it here, unless someone knows off hand...

Barand · April 20, 2008

Just knocked up a quick mod to previous script

<html>
<!-- Creation date: 04/02/05 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>baaCalendar</title>
<meta name="Author" content="Barand">
<meta name="Generator" content="AceHTML 4 Pro">

<style type="text/css">
TD {font-family: arial; font-size: 9pt; text-align: center; height: 20}
TH {font-family: arial; font-size: 9pt; text-align: center; width: 20px; height: 20; font-weight: 600; color: #FFFFFF}
TH.wd {background: #99CC99}
TH.we {background: #999999}
TD.we {background: #EEEEEE; }
TD.wd {background: #EEFFEE}
TD.hd {background: #FFFFFF; color: #339900}
A.nul {text-decoration: none}
A:hover {background: #DDDDDD; color: #FF0000}
</style>
</head>
<body>

<?php
    mysql_connect('localhost');
    mysql_select_db('test3');
    
    $currMonth = isset($_GET['month']) ? $_GET['month']  : date('n');
    $currYear  = isset($_GET['year'])  ? $_GET['year']   : date('Y');
    
#   Sample "events" table
#   +----+-------------+------------+
#   | id | title       | event_date |
#   +----+-------------+------------+
#   |  1 | County show | 2008-04-25 |
#   |  2 | Pop concert | 2008-05-01 |
#   |  3 | Jazz Fest   | 2008-04-27 |
#   +----+-------------+------------+

        /****
        * get this months events and store in array
        */
    $sql = "SELECT DAY(event_date) as day, title
            FROM events
            WHERE MONTH(event_date)=$currMonth AND YEAR(event_date) = $currYear";
    $res = mysql_query($sql);
    while (list($d, $t) = mysql_fetch_row($res))
    {
        $events[$d] = $t;
    }


    
    $today = (($currYear == date('Y')) && ($currMonth == date('n'))) ? date('j') : 0;

    $prevMonth = $currMonth==1 ? 12 : $currMonth-1;
    $nextMonth = $currMonth==12?  1 : $currMonth+1;
    $prevYear = $currMonth==1 ? $currYear-1 : $currYear;
    $nextYear = $currMonth==12? $currYear+1 : $currYear;


    $day1 = mktime(0,0,0,$currMonth,1,$currYear);
    $dim = date('t', $day1);
    $dayN = mktime(0,0,0,$currMonth,$dim,$currYear);
    $dow1 = (date('w',$day1)+6) % 7;
    $dowN = (date('w',$dayN)+6) % 7;
    $calHead = date('F Y',$day1);
    echo <<<EOT
        <table border="0" cellspacing="1" style="border: 1pt solid silver">
        <tr>
          <td class="hd"><a class="nul" href="$_SERVER[php_SELF]?year=$prevYear&month=$prevMonth"><<</a></td>
          <td colspan="5" class="hd">$calHead</td>
          <td class="hd"><a class="nul" href="$_SERVER[php_SELF]?year=$nextYear&month=$nextMonth">>></a></td>
        </tr>
        <tr>
          <th class="wd">M</th>
          <th class="wd">T</th>
          <th class="wd">W</th>
          <th class="wd">T</th>
          <th class="wd">F</th>
          <th class="we">S</th>
          <th class="we">S</th>
        </tr>
        <tr>
EOT;

    for ($d=0;$d<$dow1;$d++) echo "<td class=\"hd\"> </td>";
    $c = $dow1;
    for ($d=1; $d<=$dim; $d++, $c++) {
        if ($c%7==0) echo "</tr><tr>";
        $cl = ($c%7==5) || ($c%7==6) ? 'we' : 'wd';
        $st = ($d == $today) ? "style='border: 1pt solid #FF0000'" : '';
        echo "<td class=\"$cl\" $st>\n";
        
            /*******
            * is there an event on this day
            */
        if (isset($events[$d])) 
            echo "<span title='{$events[$d]}' style='font-weight: 600; color: red'>$d</span>";
        else
            echo "$d" ;
        echo "</td>\n";
    }
    while ($c++ % 7 != 0) echo '<td class=\"hd\"> </td>';
    echo "</tr></table>\n";


?>
</body>
</html>

ChompGator · April 20, 2008

Ill give it a shot, and let ya know how it works,.

ChompGator · April 20, 2008

You certainly put allot of effort into this one! I hope it wasn't too much work lol! So far its working out well, Im still playing with it, but thanks!!

Barand · April 20, 2008

About 15-20 minutes

ChompGator · April 20, 2008

I set up the database, it works great!!

Thanks for the help!

Barand · April 20, 2008

You're welcome. Just so long as you really do learn something from it

ChompGator · April 20, 2008

I do learn quite a bit, especially since Im starting out...I was looking at the script and I think I pretty much understand it, the only thing Im trying to figure out, is if there is say 4 events on one day - it only will display 1 event in the little window that appears to the left as opposed to all four...But Im going to continue to look at the code.

I particularly liked the way you set up the sample table in the script, I was sitting here trying to think of the best way to set up my MySQL table, and after seeing the sample table (I was thinking along the same lines) after seeing the sample table - that was re-assuring and I set my table up pretty much identical and it worked well.

Barand · April 21, 2008

Modified for multiple events on same day (1 and 4 are on same day)

#   +----+---------------------+------------+
#   | id | title               | event_date |
#   +----+---------------------+------------+
#   |  1 | County show         | 2008-04-25 |
#   |  2 | Pop concert         | 2008-05-01 |
#   |  3 | Jazz Fest           | 2008-04-27 |
#   |  4 | Dentist appointment | 2008-04-25 |
#   +----+---------------------+------------+
        /****
        * get this months events and store in array
        */
    $sql = "SELECT DAY(event_date) as day, GROUP_CONCAT(title SEPARATOR '\n') as titles
            FROM events
            WHERE MONTH(event_date)=$currMonth AND YEAR(event_date) = $currYear
            GROUP BY day";
    $res = mysql_query($sql);
    while (list($d, $t) = mysql_fetch_row($res))
    {
        $events[$d] = $t;
    }

Sign In

Project Phase 3

Recommended Posts

ChompGator

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

ChompGator

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

ChompGator

Link to comment

Share on other sites

ChompGator

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

ChompGator

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

ChompGator

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information