The markup as generated by buildCalendar Displaying Events in the Calendar Adding the events to the calendar display is as easy as loading the events array from _createEventObj and loo
Trang 1Figure 4-5 The markup as generated by buildCalendar()
Displaying Events in the Calendar
Adding the events to the calendar display is as easy as loading the events array from _createEventObj()
and looping through the events stored in the index that matches the current day if any exist Add event data to the calendar markup using the following bold code:
public function buildCalendar()
{
/*
* Determine the calendar month and create an array of
* weekday abbreviations to label the calendar columns
*/
$cal_month = date('F Y', strtotime($this->_useDate));
$weekdays = array('Sun', 'Mon', 'Tue',
'Wed', 'Thu', 'Fri', 'Sat');
/*
* Add a header to the calendar markup
Trang 2*/
$html = "\n\t<h2>$cal_month</h2>";
for ( $d=0, $labels=NULL; $d<7; ++$d )
{
$labels = "\n\t\t<li>" $weekdays[$d] "</li>"; }
$html = "\n\t<ul class=\"weekdays\">"
$labels "\n\t</ul>";
/*
* Load events data
*/
$events = $this->_createEventObj();
/*
* Create the calendar markup
*/
$html = "\n\t<ul>"; // Start a new unordered list
for ( $i=1, $c=1, $t=date('j'), $m=date('m'), $y=date('Y'); $c<=$this->_daysInMonth; ++$i )
{
/*
* Apply a "fill" class to the boxes occurring before
* the first of the month
*/
$class = $i<=$this->_startDay ? "fill" : NULL;
/*
* Add a "today" class if the current date matches
* the current date
*/
if ( $c+1==$t && $m==$this->_m && $y==$this->_y ) {
$class = "today";
}
/*
* Build the opening and closing list item tags
*/
$ls = sprintf("\n\t\t<li class=\"%s\">", $class); $le = "\n\t\t</li>";
/*
* Add the day of the month to identify the calendar box */
if ( $this->_startDay<$i && $this->_daysInMonth>=$c) {
/*
* Format events data
*/
$event_info = NULL; // clear the variable
Trang 3if ( isset($events[$c]) )
{
foreach ( $events[$c] as $event )
{
$link = '<a href="view.php?event_id='
$event->id '">' $event->title
'</a>';
$event_info = "\n\t\t\t$link";
}
}
$date = sprintf("\n\t\t\t<strong>%02d</strong>",$c++);
}
else { $date=" "; }
/*
* If the current day is a Saturday, wrap to the next row
*/
$wrap = $i!=0 && $i%7==0 ? "\n\t</ul>\n\t<ul>" : NULL;
/*
* Assemble the pieces into a finished item
*/
$html = $ls $date $event_info $le $wrap;
}
/*
* Add filler to finish out the last week
*/
while ( $i%7!=1 )
{
$html = "\n\t\t<li class=\"fill\"> </li>";
++$i;
}
/*
* Close the final unordered list
*/
$html = "\n\t</ul>\n\n";
/*
* Return the markup for output
*/
return $html;
}
■ Caution Don’t forget to add the new $event_info variable into the markup at the bottom of the loop!
Trang 4When the database events are loaded into the calendar display, the titles show up next to the appropriate date (see Figure 4-6)
Figure 4-6 An event title displayed next to the appropriate date
■ Note The linked event titles point to a file called view.php that doesn’t exist yet This file will be built and explained in the “Outputing HTML to Display Full Event Descriptions” section later in this chapter
Making the Calendar Look Like a Calendar
At this point, your markup is proper and your events are there, but the generated code doesn’t look much like a calendar at all
To rectify this, you’ll now be taking a moment to complete the HTML markup and style the page using CSS
Trang 5■ Note Because this book is not about CSS, the rules used won’t be explained in detail For more information on
CSS, check out Beginning CSS Web Development by Simon Collison (Apress, 2006)
In a nutshell, the CSS file will do the following:
• Float each list item to the left
• Adjust margins and borders to make the dates look like a traditional calendar
• Add a hover effect so the day over which the mouse is hovering will be highlighted
• Style event titles
• Add hover effects for event titles as well
• Add some CSS3 flair, including rounded corners and drop shadows, for fun
■ Tip For more information on CSS3, visit http://css3.info/
Create a new file called style.css in the css folder (/public/assets/css/style.css) and add the
following rules:
body {
background-color: #789;
font-family: georgia, serif;
font-size: 13px;
}
#content {
display: block;
width: 812px;
margin: 40px auto 10px;
padding: 10px;
background-color: #FFF;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border:2px solid black;
-moz-box-shadow: 0 0 14px #123;
-webkit-box-shadow: 0 0 14px #123;
box-shadow: 0 0 14px #123;
}
h2,p {
margin: 0 auto 14px;
Trang 6text-align: center;
}
ul {
display: block;
clear: left;
height: 82px;
width: 812px;
margin: 0 auto;
padding: 0;
list-style: none;
background-color: #FFF;
text-align: center;
border: 1px solid black;
border-top: 0;
border-bottom: 2px solid black; }
li {
position: relative;
float: left;
margin: 0;
padding: 20px 2px 2px;
border-left: 1px solid black; border-right: 1px solid black; width: 110px;
height: 60px;
overflow: hidden;
background-color: white;
}
li:hover {
background-color: #FCB;
z-index: 1;
-moz-box-shadow: 0 0 10px #789; -webkit-box-shadow: 0 0 10px #789; box-shadow: 0 0 10px #789;
}
.weekdays {
height: 20px;
border-top: 2px solid black; }
.weekdays li {
height: 16px;
padding: 2px 2px;
background-color: #BCF;
}
Trang 7background-color: #BCD;
}
.weekdays li:hover,li.fill:hover {
background-color: #BCD;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.weekdays li:hover,.today {
background-color: #BCF;
}
li strong {
position: absolute;
top: 2px;
right: 2px;
}
li a {
position: relative;
display: block;
border: 1px dotted black;
margin: 2px;
padding: 2px;
font-size: 11px;
background-color: #DEF;
text-align: left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
z-index: 1;
text-decoration: none;
color: black;
font-weight: bold;
font-style: italic;
}
li a:hover {
background-color: #BCF;
z-index: 2;
-moz-box-shadow: 0 0 6px #789;
-webkit-box-shadow: 0 0 6px #789;
box-shadow: 0 0 6px #789;
}
Save the style sheet, and close it; you won’t need to modify it again in this chapter In the next
section, you’ll create common files that will, among other things, include these styles into the page
Trang 8Creating the Common Files—Header and Footer
There are going to be multiple pages viewed by your users in this application, and they all need a common set of HTML elements, style sheets, and more To simplify maintenance as much as possible,
you’ll be using two files—header.inc.php and footer.inc.php—to contain those common elements First, create a file called header.inc.php in the common folder
(/public/assets/common/header.inc.php) This file will hold the DOCTYPE declaration for the HTML and create a head section that contains a Content-Type meta tag, the document title, and links to any CSS files
required for the document
Because the document title will vary from page to page, you’ll be setting a variable—$page_title—
to store each page’s title
Also, because more than one CSS file may be needed for a page, an array of CSS file names will be
passed in a variable called $css_files and looped through to generate the proper markup
Inside this file, place the following code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<title><?php echo $page_title; ?></title>
<?php foreach ( $css_files as $css ): ?>
<link rel="stylesheet" type="text/css" media="screen,projection"
href="assets/css/<?php echo $css; ?>" />
<?php endforeach; ?>
</head>
<body>
Next, create a file called footer.inc.php in the common folder
(/public/assets/common/footer.inc.php) to contain the closing parts of the markup
For now, this file doesn’t need to do much: it simply closes the body and html tags opened in
header.inc.php As you continue developing this application, more will be added here
Insert the following into footer.inc.php:
</body>
</html>
Adding the Files to the Index
To bring the new pieces together, you’ll need to modify the index file First, you’ll need to add values to
the $page_title and $css_files variables, and then you should include the header file
Also, to wrap the page content, add in a new div with the ID content that wraps around the call to
Trang 9Finally, add a call to the footer file to finish the page When it’s completed, the index file will be
modified with the code shown in bold:
<?php
/*
* Include necessary files
*/
include_once ' /sys/core/init.inc.php';
/*
* Load the calendar
*/
$cal = new Calendar($dbo, "2010-01-01 12:00:00");
/*
* Set up the page title and CSS files
*/
$page_title = "Events Calendar";
$css_files = array('style.css');
/*
* Include the header
*/
include_once 'assets/common/header.inc.php';
?>
<div id="content">
<?php
/*
* Display the calendar HTML
*/
echo $cal->buildCalendar();
?>
</div><! end #content >
<?php
/*
* Include the footer
*/
include_once 'assets/common/footer.inc.php';
?>
After saving the changes, reload your browser to see the results (see Figure 4-7)
Trang 10Figure 4-7 The calendar with the header, footer, and CSS styles applied
Outputing HTML to Display Full Event Descriptions
The next step in this application is to allow the user to view the details of an event This will be done in three steps:
1 Create a method to format an array of a single event’s data when loaded by ID
2 Create a method to generate markup containing the data as loaded by the first
method
3 Create a new file to display the markup generated by the second method
Creating a Method to Format Single Event Data
Similar to _createEventObj(), the purpose of this method, which you’ll call _loadEventById(), is to generate an Event object from the result set returned by _loadEventData()