Calendar populated with CMS Builder records

46 posts by 12 authors in: Forums > CMS Builder
Last Post: February 27, 2012   (RSS)

Re: [zickey] Calendar populated with CMS Builder records

By Chris - August 30, 2010 - edited: August 31, 2010

Hi Zick,

There are two approaches you could take here:

1. Loop over every event in each day, skipping over elements which have a date which doesn't match the day.

2. Reorganize events into an array indexed by 'day', each element being a list of events on that day.

I've made some changes to your code with the second approach, which is a little more complicated but probably more sensible when dealing with lots of records.

Also, it makes sense to only return records from the database which are in the selected month. I've added a 'where' clause to getRecords() to do that. I had to move it below your $cMonth and $cYear code to do this.

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

require_once "C:/wamp/www/sb/CMS Builder/cmsAdmin/lib/viewer_functions.php";

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/calendar1.css" type="text/css" />
</head>

<body>
<div id="container">
<!-- calendar -->
<?php
$monthNames = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
if (!isset($_REQUEST["month"])) $_REQUEST["month"] = date("n");
if (!isset($_REQUEST["year"])) $_REQUEST["year"] = date("Y");

$cMonth = $_REQUEST["month"];
$cYear = $_REQUEST["year"];

$prev_year = $cYear;
$next_year = $cYear;

$prev_month = $cMonth-1;
$next_month = $cMonth+1;

if ($prev_month == 0 ) {
$prev_month = 12;
$prev_year = $cYear - 1;
}
if ($next_month == 13 ) {
$next_month = 1;
$next_year = $cYear + 1;
}

// get event records for the selected month
list($eventsRecords, $eventsMetaData) = getRecords(array(
'tableName' => 'events',
'where' => mysql_escapef('MONTH(date) = ? AND YEAR(date) = ?', $cMonth, $cYear),
));

// organize events into an array indexed by 'day', each element being a list of events on that day
$eventsByDay = array();
foreach ($eventsRecords as $event) {
$day = intval(date('d', strtotime($event['date'])));
if (!array_key_exists($day, $eventsByDay)) { $eventsByDay[$day] = array(); }
$eventsByDay[$day][] = $event;
}

?>
<div id="calendar_div" name="calendar_div">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#333333">
<tr align="center">
<td bgcolor="#333333"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left">&nbsp;&nbsp;<a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $prev_month . "&year=" . $prev_year; ?>" class="CalNextPrevious">Previous</a></td>
<td width="50%" align="right"><a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $next_month . "&year=" . $next_year; ?>" class="CalNextPrevious">Next</a>&nbsp;&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr align="center">
<td colspan="7" class="CalMonth" ><?php echo $monthNames[$cMonth-1].' '.$cYear; ?></td>
</tr>
<tr>
<td class="CalDayofWeek">Sunday</td>
<td class="CalDayofWeek">Monday</td>
<td class="CalDayofWeek">Tuesday</td>
<td class="CalDayofWeek">Wednesday</td>
<td class="CalDayofWeek">Thursday</td>
<td class="CalDayofWeek">Friday</td>
<td class="CalDayofWeek">Saturday</td>
</tr>
<?php
$timestamp = mktime(0,0,0,$cMonth,1,$cYear);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];

for ($i=0; $i<($maxday+$startday); $i++) {
if(($i % 7) == 0 ) echo "<tr>\n";
if($i < $startday) {
echo "<td></td>\n";
}
else {
$day = $i - $startday + 1;
echo "<td class='CalDates'>". $day . "<br />";
// check if there are any events for this day
if (array_key_exists($day, $eventsByDay)) {
// list all events for this day
foreach ($eventsByDay[$day] as $record) {
?>
<h3>Title: <?php echo $record['title'] ?></h3>
<h3>Date and Time: <?php echo date("D, M jS, Y g:i:s a", strtotime($record['date'])) ?></h3>
<p>Description: <?php echo $record['description'] ?></p>
<p>Location: <?php echo $record['location'] ?></p>
<p>Content: <?php echo $record['content'] ?></p>
<p>Event Details: <a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a></p>
<?php
}
}
echo "</td>\n";
}
if(($i % 7) == 6 ) echo "</tr>\n";
}
?>

</table></td>
</tr>
</table>
<br />
<!-- /calendar --></div>
<!-- /container --></div>
</body>
</html>

I hope this helps! Please let me know if you have any questions.
All the best,
Chris

Re: [chris] Calendar populated with CMS Builder records

By Mikey - August 31, 2010 - edited: August 31, 2010

Hey Chris this works great for calendar dates 10 through 31, however calendar dates 1 through 9 do not load. I tried to figure out how to get dates 1-9 to load, but had no luck. Can you shed some light on what I need to do now?

And thank's for the help with this... it's almost there and works perfectly for dates 10-31, all the information loads right and the link to the event details functions perfectly.

Zick

PS: I meant to mention that I tested this exactly as you had it built and only the dates 10-31 would show. So, I eliminated the (date_and_time) record altogether and change the code to reference the (date) record instead. So here's the code you worked on, with the (date_and_time) removed and changed to reference the (date) record instead.

========== code ===========

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

require_once "C:/wamp/www/sb/CMS Builder/cmsAdmin/lib/viewer_functions.php";

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/calendar1.css" type="text/css" />
</head>

<body>
<div id="container">
<!-- calendar -->
<?php
$monthNames = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
if (!isset($_REQUEST["month"])) $_REQUEST["month"] = date("n");
if (!isset($_REQUEST["year"])) $_REQUEST["year"] = date("Y");

$cMonth = $_REQUEST["month"];
$cYear = $_REQUEST["year"];

$prev_year = $cYear;
$next_year = $cYear;

$prev_month = $cMonth-1;
$next_month = $cMonth+1;

if ($prev_month == 0 ) {
$prev_month = 12;
$prev_year = $cYear - 1;
}
if ($next_month == 13 ) {
$next_month = 1;
$next_year = $cYear + 1;
}

// get event records for the selected month
list($eventsRecords, $eventsMetaData) = getRecords(array(
'tableName' => 'events',
'where' => mysql_escapef('MONTH(date) = ? AND YEAR(date) = ?', $cMonth, $cYear),
));

// organize events into an array indexed by 'day', each element being a list of events on that day
$eventsByDay = array();
foreach ($eventsRecords as $event) {
$day = date('d', strtotime($event['date']));
if (!array_key_exists($day, $eventsByDay)) { $eventsByDay[$day] = array(); }
$eventsByDay[$day][] = $event;
}

?>
<div id="calendar_div" name="calendar_div">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#333333">
<tr align="center">
<td bgcolor="#333333"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left">&nbsp;&nbsp;<a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $prev_month . "&year=" . $prev_year; ?>" class="CalNextPrevious">Previous</a></td>
<td width="50%" align="right"><a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $next_month . "&year=" . $next_year; ?>" class="CalNextPrevious">Next</a>&nbsp;&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr align="center">
<td colspan="7" class="CalMonth" ><?php echo $monthNames[$cMonth-1].' '.$cYear; ?></td>
</tr>
<tr>
<td class="CalDayofWeek">Sunday</td>
<td class="CalDayofWeek">Monday</td>
<td class="CalDayofWeek">Tuesday</td>
<td class="CalDayofWeek">Wednesday</td>
<td class="CalDayofWeek">Thursday</td>
<td class="CalDayofWeek">Friday</td>
<td class="CalDayofWeek">Saturday</td>
</tr>
<?php
$timestamp = mktime(0,0,0,$cMonth,1,$cYear);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];

for ($i=0; $i<($maxday+$startday); $i++) {
if(($i % 7) == 0 ) echo "<tr>\n";
if($i < $startday) {
echo "<td></td>\n";
}
else {
$day = $i - $startday + 1;
echo "<td class='CalDates'>". $day . "<br />";
// check if there are any events for this day
if (array_key_exists($day, $eventsByDay)) {
// list all events for this day
foreach ($eventsByDay[$day] as $record) {
?>
<h3><?php echo $record['title'] ?></h3>
<h3>Time: <?php echo date("g:i:s a", strtotime($record['date'])) ?></h3>
<p>Description: <?php echo $record['description'] ?></p>
<p>Location: <?php echo $record['location'] ?></p>
<!-- <p>Content: <?php echo $record['content'] ?></p>-->
<p>Details: <a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a></p>
<?php
}
}
echo "</td>\n";
}
if(($i % 7) == 6 ) echo "</tr>\n";
}
?>

</table></td>
</tr>
</table>
<br />
<!-- /calendar --></div>
<!-- /container --></div>
</body>
</html>

========== /code ===========

Re: [zickey] Calendar populated with CMS Builder records

By Chris - August 31, 2010

Hi Zick,

Oops! My mistake. Days 1-9 were being stored in the array as 01-09 and looked up as 1-9, therefore weren't being found. To fix this, please change this line:

$day = date('d', strtotime($event['date']));

...to this:

$day = intval(date('d', strtotime($event['date'])));

I've also updated my post above.

Does that help? Please let me know if you have any questions.
All the best,
Chris

Re: [chris] Calendar populated with CMS Builder records

By Mikey - August 31, 2010 - edited: August 31, 2010

Chris, You are the man!
Thanks... works perfectly.

I've attached my calendar files and instructions for anyone interested in using this calendar. The files and instruction are provided as is, use at your own discretion. You assume full responsibility if you chose to utilize any portion of the code provided for the Zickey Calendar. Like you... I hate the fine print, but please read the TERMS.txt file.

Use it, expand it and please share any nice features you add to the Calendar with the InteractiveTools community on this thread.

Cheers, Zickey [:)]
Attachments:

zickey_calendar.css 4K

zickey-calendar.php 5K

read-me-instructions.rtf 5K

terms.txt 2K

Re: [zickey] Calendar populated with CMS Builder records

By northernpenguin - September 6, 2010

Zickey:

Very nice calendar! I'm working with it to see if I can add more features, such as highlighting "today", adding a "today" button and allowing the user to select a year (probably from a dropdown). I will post the code here for any to use.

Great post!

Ragi
--
northernpenguin
Northern Penguin Technologies

"Any sufficiently advanced technology
is indistinguishable from magic."
........Arthur C. Clarke

Re: [northernpenguin] Calendar populated with CMS Builder records

By Mikey - September 8, 2010

Zickey:

Very nice calendar! I'm working with it to see if I can add more features, such as highlighting "today", adding a "today" button and allowing the user to select a year (probably from a dropdown). I will post the code here for any to use.

Great post!

Ragi


Cool! I look forward to seeing what you come up with Ragi.
I've been working on this calendar in my spare time and have a bit more of it developed now. Once I get my latest additions finished up, I'll post the most recent version of it.

Today highlighted, today's events button, a week of events button and a drop down selector tool have been on my slate to build as time allows... so I look forward to seeing what you develop and integrating it into this calendar.

Cheers,
Zickey

Re: [chris] Calendar populated with CMS Builder records

By Mikey - September 9, 2010

Hey Chris or anyone who's reading,
Is there a way to add a link to the line I've marked as bold in the code below so that . $day . becomes a link using the following code?:
echo "<td class='CalDates'>"<a href="<?php echo $record['_link'] ?>">. $day . </a>"<br />";

Thanks, Zickey

Hi Zick,

There are two approaches you could take here:

1. Loop over every event in each day, skipping over elements which have a date which doesn't match the day.

2. Reorganize events into an array indexed by 'day', each element being a list of events on that day.

I've made some changes to your code with the second approach, which is a little more complicated but probably more sensible when dealing with lots of records.

Also, it makes sense to only return records from the database which are in the selected month. I've added a 'where' clause to getRecords() to do that. I had to move it below your $cMonth and $cYear code to do this.

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

require_once "C:/wamp/www/sb/CMS Builder/cmsAdmin/lib/viewer_functions.php";

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/calendar1.css" type="text/css" />
</head>

<body>
<div id="container">
<!-- calendar -->
<?php
$monthNames = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
if (!isset($_REQUEST["month"])) $_REQUEST["month"] = date("n");
if (!isset($_REQUEST["year"])) $_REQUEST["year"] = date("Y");

$cMonth = $_REQUEST["month"];
$cYear = $_REQUEST["year"];

$prev_year = $cYear;
$next_year = $cYear;

$prev_month = $cMonth-1;
$next_month = $cMonth+1;

if ($prev_month == 0 ) {
$prev_month = 12;
$prev_year = $cYear - 1;
}
if ($next_month == 13 ) {
$next_month = 1;
$next_year = $cYear + 1;
}

// get event records for the selected month
list($eventsRecords, $eventsMetaData) = getRecords(array(
'tableName' => 'events',
'where' => mysql_escapef('MONTH(date) = ? AND YEAR(date) = ?', $cMonth, $cYear),
));

// organize events into an array indexed by 'day', each element being a list of events on that day
$eventsByDay = array();
foreach ($eventsRecords as $event) {
$day = intval(date('d', strtotime($event['date'])));
if (!array_key_exists($day, $eventsByDay)) { $eventsByDay[$day] = array(); }
$eventsByDay[$day][] = $event;
}

?>
<div id="calendar_div" name="calendar_div">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#333333">
<tr align="center">
<td bgcolor="#333333"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left">&nbsp;&nbsp;<a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $prev_month . "&year=" . $prev_year; ?>" class="CalNextPrevious">Previous</a></td>
<td width="50%" align="right"><a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $next_month . "&year=" . $next_year; ?>" class="CalNextPrevious">Next</a>&nbsp;&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr align="center">
<td colspan="7" class="CalMonth" ><?php echo $monthNames[$cMonth-1].' '.$cYear; ?></td>
</tr>
<tr>
<td class="CalDayofWeek">Sunday</td>
<td class="CalDayofWeek">Monday</td>
<td class="CalDayofWeek">Tuesday</td>
<td class="CalDayofWeek">Wednesday</td>
<td class="CalDayofWeek">Thursday</td>
<td class="CalDayofWeek">Friday</td>
<td class="CalDayofWeek">Saturday</td>
</tr>
<?php
$timestamp = mktime(0,0,0,$cMonth,1,$cYear);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];

for ($i=0; $i<($maxday+$startday); $i++) {
if(($i % 7) == 0 ) echo "<tr>\n";
if($i < $startday) {
echo "<td></td>\n";
}
else {
$day = $i - $startday + 1;
echo "<td class='CalDates'>". $day . "<br />";
// check if there are any events for this day
if (array_key_exists($day, $eventsByDay)) {
// list all events for this day
foreach ($eventsByDay[$day] as $record) {
?>
<h3>Title: <?php echo $record['title'] ?></h3>
<h3>Date and Time: <?php echo date("D, M jS, Y g:i:s a", strtotime($record['date'])) ?></h3>
<p>Description: <?php echo $record['description'] ?></p>
<p>Location: <?php echo $record['location'] ?></p>
<p>Content: <?php echo $record['content'] ?></p>
<p>Event Details: <a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a></p>
<?php
}
}
echo "</td>\n";
}
if(($i % 7) == 6 ) echo "</tr>\n";
}
?>

</table></td>
</tr>
</table>
<br />
<!-- /calendar --></div>
<!-- /container --></div>
</body>
</html>

I hope this helps! Please let me know if you have any questions.

Re: [zickey] Calendar populated with CMS Builder records

By Chris - September 9, 2010

Hi Zick,

You can replace this line:

echo "<td class='CalDates'>". $day . "<br />";

...with this:

?><td class='CalDates'><a href="<?php echo $record['_link'] ?>"><?php echo $day ?></a><br /><?php

That might be a little easier to work with. Please let me know if you have any questions.
All the best,
Chris

Re: [zickey] Calendar populated with CMS Builder records

By gkornbluth - September 16, 2010

Here’s a rudimentary implementation for rollover ToolTips that I found using CSS.

Demo: http://thecmsbcookbook.com/calendar2.php

When you rollover the event titles, a tooltip shows the complete information available for the test events.

There’s no particular attempt to format the text.

Here’s the CSS Style that creates the ToolTip:
<style type="text/css">

* {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1em; }
a:hover {background:#ffffff; text-decoration:none;}
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:400px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#2b2b2b;}
</style>

Here's Juergen's original format for the tooltip:
<a href="#" class="tooltip">Here's the Tooltip<span>Suspendisse non metus id dolor accumsan bibendum. Aenean congue, libero at malesuada venenatis, lorem elit porttitor neque, quis sagittis ipsum purus vitae massa. Vivamus sed massa mi. Ut vitae odio ante, a convallis dui.</span></a>

And here’s the modification to the to Zickey’s original calendar code to invoke the rollover ToolTips (Note: My test section only had Title. Date, Location and Content fields. The link opens a detail page created by the code generator.):

// list all events for this day
foreach ($eventsByDay[$day] as $record) {
?>
<div id="calFonts">
<a href="#" class="tooltip"> <h1><?php echo $record['title'] ?></h1>
<span><?php echo $record['title'] ?><br />Time: <?php echo date("g:i a", strtotime($record['date'])) ?><br /><br />Where: <?php echo $record['location'] ?><br /><br />What: <?php echo $record['content'] ?></span></a>

<h3>Time: <?php echo date("g:i a", strtotime($record['date'])) ?></h3>
<!--<h3>Where: <?php echo $record['location'] ?></h3>-->
<p><?php echo maxWords($record['content'], 9); ?>... <a href="<?php echo $record['_link'] ?>">Learn More</a></p><br /><br /></div>

I'm sure that someone will easiy be able to improve on this.

Best,

Jerry Kornbluth
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php