Hey everyone, I'm having a little trouble with creating a 'dynamic' calendar with events called from a MySQL database.

So basically I would like to have the Month automatically change when the month changes, and highlight the days which have events scheduled, and make those days links to my thickbox js window which will pass the selected day to the thickbox and show the scheduled events for that day broken down by time.

<?php

$cur_month = date(F);
$cur_day = date(d);
$args = "height=400&width=800&id=";
$cur_date = date(F d, Y);

include_once('connect.php');

$query = "SELECT id, year, month, day, event_title, event_start FROM event_calendar WHERE month=" . $cur_month;
$result = mysqli_query($dbc,$query)
or die ('Error querying Database.');

list($id,$year,$month,$day,$event_title,$event_start)= mysqli_fetch_row($result));
{
if $day = $cur_day {
echo "<div class='events'><a href='daysevents.php?\"" . $args . "\"" . $id . "\"' class='thickbox'>" .
"<b>$event_title</b></a><br />$month $day, $year - $event_start</div>";
}
else {
echo "There are no events for today.";
}
}

mysqli_close($dbc);
?>

Ok heres what I got so far. It's suppose to list the events scheduled for the current day below the calendar. I'm not sure how to create the calendar so the layout changes based on the the current month, and highlight the days that have events scheduled.

Let me know if you need me to add more code.

Recommended Answers

All 21 Replies

Ok so I seem to have messed something up and I'm not sure what. I get an error:

Parse error: syntax error, unexpected T_STRING in /home/www/uzunaru.freehostia.com/template2/index.php on line 163

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Flip Thru</title>
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body onload="calendar()">
<div id="container">
    <div style="float:left;">
        <div id="wrapper"><!-- #wrapper -->

            <nav><!-- top nav -->
                <div class="menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </nav><!-- end of top nav -->

            <header><!-- header -->
                <h1><a href="#">Flip Thru Associates</a></h1>
                <h2>Your compelling and interesting tag line goes here</h2>
            </header><!-- end of header -->

            <section id="main"><!-- #main content area -->
                    <section id="content"><!-- #content -->
                                <section class="accordbk">
                                <article class="horizontalaccordion">
                                <h4>&dArr; Did you Know? Hover your mouse over each vertical panel below to discover more about us &dArr;</h4>
                                <ul>
                                  <li>
                                    <h3>Who We Are</h3>
                                      <div><img src="images/acc1.jpg" alt="" /><p><b>Who We Are</b></p>
                                        <p>Quis quaerendum pri no, sit ad noster timeam. An pro consul concludaturque, no possim impetus mei.</p>
                                        <p>Facer oblique referrentur te qui, ornatus postulant evertitur ius ea. No sed vero aperiri equidem, pri et perpetua erroribus accusamus, doctus menandri ad qui.</p>
                                        <p>Idque velit cu eum, adipiscing intellegam vituperatoribus ut eum. An sea corpora lobortis splendide, illum signiferumque quo ut, nam sensibus consetetur definitionem ut. Probo dicat dicant usu eu, ei vim soleat doctus complectitur, eu vim wisi graece scribentur. Novum nostro commune mel no, eam an stet nullam dolorum. Unum idque adipisci mea ut, sit ut nisl nibh maluisset. Audire maluisset est ut, vis te enim esse graecis.</p>
                                      </div>
                                    </li>
                                  <li>
                                    <h3>Why Choose Us</h3>
                                      <div><img src="images/acc2.jpg" alt="" /><p><b>Why Choose Us</b></p>
                                        <p>Nam aeterno adipisci ne, duo id ipsum lobortis explicari, ea eam veniam labores lucilius. Laoreet ponderum deseruisse pro id, in sea prima dolorem noluisse.</p>
                                        <p>Eam in feugait accumsan vivendum. In vis labores constituto, ad quo quaeque laoreet postulant, id vix congue petentium ocurreret. Platonem interesset nam ex, sea impetus oblique in. Legere definiebas neglegentur ut eam, vidit mediocrem ea pri.
</p>
                                        <p>Idque velit cu eum, adipiscing intellegam vituperatoribus ut eum. An sea corpora lobortis splendide, illum signiferumque quo ut, nam sensibus consetetur definitionem ut. Probo dicat dicant usu eu, ei vim soleat doctus complectitur, eu vim wisi graece scribentur. Novum nostro commune mel no, eam an stet nullam dolorum.</p>
                                     </div>
                                    </li>
                                 <li>
                                     <h3>Where We Are Heading</h3>
                                      <div><img src="images/acc3.jpg" alt="" /><p><b>Where We Are Heading</b></p>
                                        <p>Maiorum dignissim scripserit his ut, no congue nullam recteque cum. Aliquip dolorem oportere ne nec, dolorum nonummy pro te. Iudico voluptatibus duo at.</p>
                                        <p>Suscipit recteque ius in, te diam gloriatur interesset mei. Omnes nostrud efficiantur vis id, mea velit blandit appellantur ad, vix cu impedit salutatus.</p>
                                        <p>Idque velit cu eum, adipiscing intellegam vituperatoribus ut eum. An sea corpora lobortis splendide, illum signiferumque quo ut, nam sensibus consetetur definitionem ut. Probo dicat dicant usu eu, ei vim soleat doctus complectitur, eu vim wisi graece scribentur. Novum nostro commune mel no, eam an stet nullam dolorum. Unum idque adipisci mea ut, sit ut nisl nibh maluisset.</p>
                                     </div>
                                    </li>
                                <li>
                                 <h3>What Benefits You?</h3>
                                      <div><img src="images/acc4.jpg" alt="" /><p><b>What Benefits You?</b></p>
                                        <p>Eu duo simul maiestatis, nec eu ubique inimicus. Nam possim docendi gubergren cu, mollis facilis ea vis. Sed velit semper mollis te, sumo consul repudiandae at sed.</p>
                                        <p>Sit ea legere libris corrumpit, eu per mutat partem nonummy. Ne vis tation consetetur suscipiantur, eam ne impetus recteque conceptam, malis scripta persius eu mei.</p>
                                        <p>Idque velit cu eum, adipiscing intellegam vituperatoribus ut eum. An sea corpora lobortis splendide, illum signiferumque quo ut, nam sensibus consetetur definitionem ut. Probo dicat dicant usu eu, ei vim soleat doctus complectitur, eu vim wisi graece scribentur. Novum nostro commune mel no, eam an stet nullam dolorum. Unum idque adipisci mea ut, sit ut nisl nibh maluisset. Audire maluisset est ut, vis te enim esse graecis.</p>
                                    </div>
                                    </li>
                                    <li>
                                    <h3>What Benefits You?</h3>
                                    <div><img src="images/acc4.jpg" alt="" /><p><b>What Benefits You?</b></p>
                                        <p>Eu duo simul maiestatis, nec eu ubique inimicus. Nam possim docendi gubergren cu, mollis facilis ea vis. Sed velit semper mollis te, sumo consul repudiandae at sed.</p>
                                        <p>Sit ea legere libris corrumpit, eu per mutat partem nonummy. Ne vis tation consetetur suscipiantur, eam ne impetus recteque conceptam, malis scripta persius eu mei.</p>
                                        <p>Idque velit cu eum, adipiscing intellegam vituperatoribus ut eum. An sea corpora lobortis splendide, illum signiferumque quo ut, nam sensibus consetetur definitionem ut. Probo dicat dicant usu eu, ei vim soleat doctus complectitur, eu vim wisi graece scribentur. Novum nostro commune mel no, eam an stet nullam dolorum. Unum idque adipisci mea ut, sit ut nisl nibh maluisset. Audire maluisset est ut, vis te enim esse graecis.</p>
                                     </div>
                                    </li>
                                </ul>
                                </article>
                                </section>

                        <article>
                                    <h2><a href="#">Don't Settle For Second Best</a></h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
                                </article>

                    </section><!-- end of #content -->

            </section><!-- end of #main content -->
        </div>
    </div>
    <div style="float:left;width:210px;height:100%;padding-left:10px;padding-top:10px;background-color:#FFF;">
        <b>Events Calender</b><br /><br />
        <table class="rounded" width="200px" cellpadding="0" cellspacing="2px" border="1px" bordercolor="#6DBB0D">
            <tr>
                <td class="rounded" colspan="7" align="center">June 2012</td>
            <tr>
                <td class="rounded" bgcolor="#999999" height="14px">27</td>
                <td class="rounded" bgcolor="#999999" height="14px">28</td>
                <td class="rounded" bgcolor="#999999" height="14px">29</td>
                <td class="rounded" bgcolor="#999999" height="14px">30</td>
                <td class="rounded" bgcolor="#999999" height="14px">31</td>
                <td class="rounded" height="14px">1</td>
                <td class="rounded" height="14px">2</td>
            </tr>
            <tr>
                <td class="rounded" height="14px">3</td>
                <td class="rounded" height="14px">4</td>
                <td class="rounded" height="14px">5</td>
                <td class="rounded" height="14px">6</td>
                <td class="rounded" height="14px">7</td>
                <td class="rounded" height="14px">8</td>
                <td class="rounded" height="14px">9</td>
            </tr>
            <tr>
                <td class="rounded" height="14px">10</td>
                <td class="rounded" height="14px">11</td>
                <td class="rounded" height="14px">12</td>
                <td class="rounded" height="14px">13</td>
                <td class="rounded" height="14px">14</td>
                <td class="rounded" height="14px">15</td>
                <td class="rounded" height="14px">16</td>
            </tr>
            <tr>
                <td class="rounded" height="14px">17</td>
                <td class="rounded" height="14px">18</td>
                <td class="rounded" height="14px">19</td>
                <td class="rounded" height="14px">20</td>
                <td class="rounded" height="14px">21</td>
                <td class="rounded" height="14px">22</td>
                <td class="rounded" height="14px">23</td>
            </tr>
            <tr>
                <td class="rounded" height="14px">24</td>
                <td class="rounded" height="14px">25</td>
                <td class="rounded" height="14px">26</td>
                <td class="rounded" height="14px">27</td>
                <td class="rounded" height="14px">28</td>
                <td class="rounded" height="14px">29</td>
                <td class="rounded" height="14px">30</td>
            </tr>
        </table><br /><br />
        <b>Events for Today</b><br /><br />
       <?php
       $dbc = mysqli_connect('***', '***', '***', '***')
        or die('Error connecting to MySQl server.');

        //$query = "SELECT * FROM event_calendar";
        //$result = mysqli_query($dbc, $query)
        //or die('Error querying database.');

        //  while(list($id,$event_title,$event_start,$event_details)= mysqli_fetch_row($result))
        //  {
        //  echo "<div><b>$event_title</b><br />$event_start<br /><br />$event_details</div><br />";
        //  }



        $cur_month = date(F);
        $cur_day = date(d);
        $args = "height=400&width=800&id=";
        $cur_date = date(F d, Y);


        $query = "SELECT * WHERE month=" . $cur_month;
        $result = mysqli_query($dbc,$query)
        or die ('Error querying Database.');
        list($id,$year,$month,$day,$event_title,$event_start)= mysqli_fetch_row($result));
        {
        if $day == $cur_day {
        echo "<div class='events'><a href='daysevents.php?\"" . $args . "\"" . $id . "\"' class='thickbox'>" .
        "<b>$event_title</b></a><br />$month $day, $year - $event_start</div>";
        }
        else {
        echo "There are no events for today.";
        }
        }
        mysqli_close($dbc);
       ?>
        <style>  
.premonth{
/* color: gray; */
 text-align: center;
}
.currentmonth{
/* color: blue; */
 text-align: center;
}
.currentday{
/* border: 1px solid black; */
/* color: #00FF00; */
 text-align: left;
}
.calendar {
border: 1px #6DBB0D solid;
}
.calendar td{
 padding: 2px;
 width: 50px;
}
.currentmonth th{
 background-color: #000000;
 color: #FFFFFF; 
 text-align: center;
}
.weekdays{
/* background: #0000FF; */
/* color: #FFFFFF; */
 text-align: left;
} 
</style>  
<script language="JavaScript">  
function calendar(){

//Variables to be used later.  Place holders right now.
var padding ="";
var totalFeb ="";
var i = 1;
var testing="";

 var current = new Date();
 var month = current.getMonth();
 var day = current.getDate();
 var year = current.getFullYear();
 var tempMonth = month+1; //+1; //Used to match up the current month with the correct start date.
 var prevMonth = month -1;

 //Determing if Feb has 28 or 29 days in it.  
 if (month == 1){
    if ( (year%100!=0) && (year%4==0) || (year%400==0)){
      totalFeb = 29;
    }else{
      totalFeb = 28;
    }
 }

//////////////////////////////////////////
// Setting up arrays for the name of    //
// the  months, days, and the number of //
// days in the month.           //
//////////////////////////////////////////

 var monthNames = ["Jan","Feb","March","April","May","June","July","Aug","Sept","Oct","Nov", "Dec"];
 var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
 var totalDays = ["31", ""+totalFeb+"","31","30","31","30","31","31","30","31","30","31"]

//////////////////////////////////////////
// Temp values to get the number of days//
// in current month, and previous month.//
// Also getting the day of the week.    //
//////////////////////////////////////////

 var tempDate = new Date(tempMonth +' 1 ,'+year);
 var tempweekday= tempDate.getDay();
 var tempweekday2 = tempweekday
 var dayAmount = totalDays[month];
// var preAmount = totalDays[prevMonth] - tempweekday + 1;  

//////////////////////////////////////////////////
// After getting the first day of the week for  //
// the month, padding the other days for that   //
// week with the previous months days.  IE, if  //
// the first day of the week is on a Thursday,  //
// then this fills in Sun - Wed with the last   //
// months dates, counting down from the last    //
// day on Wed, until Sunday.            //
//////////////////////////////////////////////////

 while (tempweekday>0){
    padding += "<td class='premonth'></td>";
    //preAmount++;
    tempweekday--;
 }
//////////////////////////////////////////////////
// Filling in the calendar with the current     //
// month days in the correct location along.    //
//////////////////////////////////////////////////

 while (i <= dayAmount){

    //////////////////////////////////////////
    // Determining when to start a new row  //
    //////////////////////////////////////////

    if (tempweekday2 > 6){
        tempweekday2 = 0;
        padding += "</tr><tr>";
    }

    //////////////////////////////////////////////////////////////////////////////////////////////////
    // checking to see if i is equal to the current day, if so then we are making the color of  //
    //that cell a different color using CSS.  Also adding a rollover effect to highlight the    //
    //day the user rolls over. This loop creates the acutal calendar that is displayed.     //
    //////////////////////////////////////////////////////////////////////////////////////////////////

    if (i == day){
        padding +="<td class='currentday'  onMouseOver='this.style.background=\"#00FF00\"; this.style.color=\"#FFFFFF\"' onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#00FF00\"'>"+i+"</td>";
    }else{
        padding +="<td class='currentmonth' onMouseOver='this.style.background=\"#00FF00\"' onMouseOut='this.style.background=\"#FFFFFF\"'>"+i+"</td>";   

    }

    tempweekday2++;
    i++;
 }


 /////////////////////////////////////////
 // Ouptputing the calendar onto the    //
 // site.  Also, putting in the month   //
 // name and days of the week.      //
 /////////////////////////////////////////

 var calendarTable = "<table class='calendar'> <tr class='currentmonth'><th colspan='7'>"+monthNames[month]+" "+ year +"</th></tr>";
// calendarTable +="<tr class='weekdays'>  <td>Sun</td>  <td>Mon</td> <td>Tues</td> <td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
 calendarTable += "<tr>";
 calendarTable += padding;
 calendarTable += "</tr></table>";
 document.getElementById("calendar").innerHTML=calendarTable;

} 
</script>  
<div id="calendar"></div>
    </div>
    <div style="clear:both;"></div>   
        <footer>
        <section id="footer-area">

            <section id="footer-outer-block">
                    <aside class="footer-segment">
                            <h4>Friends</h4>
                                <ul>
                                    <li><a href="#">one linkylink</a></li>
                                    <li><a href="#">two linkylinks</a></li>
                                    <li><a href="#">three linkylinks</a></li>
                                    <li><a href="#">four linkylinks</a></li>
                                    <li><a href="#">five linkylinks</a></li>
                                </ul>
                    </aside><!-- end of #first footer segment -->

                    <aside class="footer-segment">
                            <h4>Awesome Stuff</h4>
                                <ul>
                                    <li><a href="#">one linkylink</a></li>
                                    <li><a href="#">two linkylinks</a></li>
                                    <li><a href="#">three linkylinks</a></li>
                                    <li><a href="#">four linkylinks</a></li>
                                    <li><a href="#">five linkylinks</a></li>
                                </ul>
                    </aside><!-- end of #second footer segment -->

                    <aside class="footer-segment">
                            <h4>Coolness</h4>
                                <ul>
                                    <li><a href="#">one linkylink</a></li>
                                    <li><a href="#">two linkylinks</a></li>
                                    <li><a href="#">three linkylinks</a></li>
                                    <li><a href="#">four linkylinks</a></li>
                                    <li><a href="#">five linkylinks</a></li>
                                </ul>
                    </aside><!-- end of #third footer segment -->

                    <aside class="footer-segment">
                            <h4>Blahdyblah</h4>
                                <p>Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
                    </aside><!-- end of #fourth footer segment -->

            </section><!-- end of footer-outer-block -->

        </section><!-- end of footer-area -->
    </footer>

</div><!-- #wrapper -->
<!-- Free template created by http://freehtml5templates.com -->
</div>
</body>
</html>

Yes this is from a template...I am chopping it up and adding some features.

The commented out php worked just fine.

Sorry for the really messy code. I'm trying to get it to work then I'm gonna clean it up.

Date formats of the date() function need to be wrapped in quotes:

$blah = date('m-d-Y');

Thanks kkeith29 that fixed the first error.

Wow I have empic fail syntax errors. Ok next error T_VARIABLE on line 171

Ok I forgot the () around $day == $cur_day

if ($day == $cur_day) {...

Ok so my other syntax errors seem to be resolved. However my query won't query.

$cur_month = date('F');

$query = "SELECT * FROM event_calendar WHERE month=" . $cur_month;
$result = mysqli_query($dbc,$query)
or die ('Error querying Database.');

if i remove the 'WHERE month=" . $cur_month;' part it will run the query however. I only want it to pull the events that are in the current month. My if else statement makes it show events for the current day.

Does the query return an error or is it just not giving the expected results?

Theres no error code, it just sends me my scripted error in the or die statment.

Replace or die ('Error querying Database.'); with or die(mysqli_error($dbc)); and post the output.

Member Avatar for diafol

As another option

$query = "SELECT * FROM event_calendar WHERE month=" . $cur_month;
echo $query;

Copy the query from the screen and run it in the SQL window of phpMyAdmin. See what it says - it should tie up with KKeith's error msg. However, although 'month' is not an official reserved word, this may work:

$query = "SELECT * FROM event_calendar WHERE `month`=" . $cur_month;

Error without month: Unknown column 'June' in 'where clause'
and same error when I add month

Im thinking I may need to do an if statement to single out events in "June" then make it go to my other if statement narrowing it down to the events listed for the current day.

But if I call "id" it will allow me to pull that single line -confused-

SELECT * FROM event_calendar WHERE `month`=
Member Avatar for diafol

SHow the fields in your DB table

Uhm...Im not sure of a way to get it as code. But my columns are: id, year, month, day, event_title, event_start, event_details

I think all you need is quotes around the month:

$query = "SELECT * FROM `event_calendar` WHERE `month` = '{$cur_month}'";
commented: That did the trick. +1

That you very much. That fixed it, and my if / else statement works perfectly too.

So the next part I need help with is getting the days in my calendar to highlight when there are events scheduled for that day. Which will also be made into a link that opens into my thickbox window to list all events for that day. the thickbox portion I know how to do.

In my provided code I have 2 calendars. One is a table that is manually made, the second one is generated via JavaScript. Do you think from the code that I have, it would be possible to make a variable array that assigns the MySQL column 'day' to the corrosponding day on the calendar? Where it's already been worked out that the $cur_month variable already tells the query what month the events will be for.

Member Avatar for diafol

What I suggest is that you place all 'days' where there is an event in an array - call it $days. Then as you create your manual calendar, check to see if the day being written to the calendar is in the array, e.g.

//$days contains days from DB 
$month = 8;
$year = 2010;
$monthdays = cal_days_in_month(CAL_GREGORIAN, $month, $year);
for($x=1;$x<=$monthdays;$x++){
    if(in_array($x,$days)){
        //set some colour in a class attribute or something or make the cell a link
    }else{
        //plain text and default colour 
    }
}

//EDIT
even better make a multidimensional array of $days to contain data to make a link to the event details, e.g.

//hardcoded here, but get this from your form (`$_POST` or `$_GET`) or from default values using `date()`:
$month = 8;
$year = 2010;

$r = mysql_query("SELECT `day`,`event_id`, `event_title` FROM events WHERE `month`= $month AND `year` = $year");
if(mysql_num_rows($r)){
    while($d = mysql_fetch_assoc($r)){
        $events[$d['day']][] = array($d['event_id'],$d['event_title']) ;
        $days[] = $d['day'];
    }
}

$monthdays = cal_days_in_month(CAL_GREGORIAN, $month, $year);
for($x=1;$x<=$monthdays;$x++){
    if(in_array($x,$days)){
        $class = '"event"';
        foreach($events[$x] as $event){
            $content[] = "<a href=\"events.php?id={$event[0]}\">{$event[1]}</a>";
        }
        $display = implode("<br />",$content);
        unset($content);
    }else{
        $class = '"normal"';
        $display = '';
    }
    $cells[] = "<td class=$class><span class="number">$x</span>$display</td>";
}

SOrry, that's off the top of my head. Not tested and certainly not optimised. $cells array will contain all days of the month along with any content (events - single or multiple). You'd need to run another loop to create a html table for the cells. If I'd given this more thought, I'd have combined the loops for the code above. Anyway, use it or ignore it - only a five minute thought.

Awesome ill test it out and let you know.

Ok so I've been a little busy, I'm gonna test that code now and post whether it works or not.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.