Upcoming events, with all of each day's events under one column of li
11 posts by 2 authors in: Forums > CMS Builder
Last Post: December 17, 2014 (RSS)
By Mikey - December 15, 2014
I've been racking my brains over this for awhile and can't seem to figure it out, so any help would be appreciated.
So I'm trying to list three columns using ul & li to display upcoming events. What I'm trying to achieve is to list all the events that take place on the same day under that day's event li - however each event is treated as a separate li item with the code I have at the moment.
So if on Dec. 30 there are two events, I need both events to show up under one display:block for [Dec 30] and not as it's on separate list item as it is now.
To better explain I've attached three snap-shots, with titles named according to what I have, what I need to merge and what I need to achieve.
The attached files are named:
- What my code produces.
- Need to merge these into one (note that both Dec 30 list items are highlighted).
- What I am Trying to achieve.
Here's my code I'm using.
<?php if ($home_pageRecord['show_events'] == '1'): ?>
<!-- begin 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;
}
// load records
list($eventsRecords, $eventsMetaData) = getRecords(array(
// 'tableName' => 'events',
// 'where' => 'Date > NOW()',
// 'where' => 'Date < NOW()', showes past events
// 'perPage' => '8',
// 'orderBy' => 'date',
'tableName' => 'events',
'limit' => '3',
'allowSearch' => false,
'where' => 'date > NOW()',
'orderBy' => 'date ASC',
));
// get event records for the selected month
//list($eventsRecords, $eventsMetaData) = getRecords(array(
// 'tableName' => 'events',
// 'where' => mysql_escapef('MONTH(date) = ? AND YEAR(date) = ?', $cMonth, $cYear),
// 'orderBy' => 'date',
//));
// 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;
}
?>
<?php $lastDate = ""; ?>
<div id="upcoming-events-activities">
<h3 style="float:left; margin-bottom:0px; padding-bottom:12px; padding-left:0px;"><a href="events_list.php" title="Upcoming Events & Activites in <?php echo $business_contact_detailsRecord['organization_name'] ?>">Upcoming Events & Activites<img src="images/design-elements/ipage-icons-calendar.png" width="24" height="24" class="inpage-icons-calendar" alt="Upcoming Events & Activites in <?php echo $business_contact_detailsRecord['organization_name'] ?>"/></a></h3>
<div class="clear-both"></div>
<ul class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<?php foreach($eventsRecords as $record):
$showDate = false;
//$formatted_date = date("l, M jS Y", strtotime($record['date'])); // Add a ,Y to display the year as well. Change M to F for full month's name
$formatted_date = date("M d", strtotime($record['date'])); // Add a ,Y to display the year as well. Change M to F for full month's name
if ($formatted_date != $lastDate):
$lastDate = $formatted_date;
$showDate = true;
endif; ?>
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4><?php echo $formatted_date; ?></h4>
<?php /*?><?php echo date("D, M jS, Y g:i:s a", strtotime($record['date'])) ?><?php */?>
<h5 style="font-weight:400; padding-top:16px;"><a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a></h5>
<!-- /upcoming-event-activity --></li>
<?php endforeach ?>
<!-- /upcoming-event-activity --></ul>
<div class="clear-both"></div>
<!-- /upcoming-events-activities --></div>
<?php endif ?>
Thanks, Zick
By claire - December 16, 2014
Ah, foreach loops. I love them really.
Change your loop like this:
<?php foreach($eventsRecords as $idx => $record):
$showDate = false;
//$formatted_date = date("l, M jS Y", strtotime($record['date'])); // Add a ,Y to display the year as well. Change M to F for full month's name
$formatted_date = date("M d", strtotime($record['date'])); // Add a ,Y to display the year as well. Change M to F for full month's name
if ($formatted_date != $lastDate):
$lastDate = $formatted_date;
$showDate = true;
endif; ?>
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4><?php echo $formatted_date; ?></h4>
<?php /*?><?php echo date("D, M jS, Y g:i:s a", strtotime($record['date'])) ?><?php */?>
<h5 style="font-weight:400; padding-top:16px;"><a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a></h5>
<!-- /upcoming-event-activity -->
if(isset($eventsRecords[$idx+1]) : ?>
<?php $nextDate = date('Y-m-d', strtotime($eventsRecords[$idx+1]['date']));
$currDate = date('Y-m-d', strtotime($record['date']));
if($nextDate != $currDate) : ?>
</li>
<?php endif; ?>
<?php else : ?>
</li>
<?php endif; ?>
<?php endforeach ?>
This should close the <li> tag if the next event is not on the same day, and leave it open otherwise. Hopefully I've got the logic right - if not, let me know and I'll take a look at it again.
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By Mikey - December 16, 2014 - edited: December 16, 2014
Hey Claire,
I tried your solution, but it's throwing the following error message:
Parse error: syntax error, unexpected T_ELSE in /home/content/37/9336237/html/bigoakcreativeus/tomh/indexClaire.php on line 1402
any thought on how to fix this?
By claire - December 16, 2014
Yep, I got the logic wrong. Try this loop instead, it should have no more syntax errors:
<?php foreach($eventsRecords as $idx => $record):
$showDate = false;
//$formatted_date = date("l, M jS Y", strtotime($record['date'])); // Add a ,Y to display the year as well. Change M to F for full month's name
$formatted_date = date("M d", strtotime($record['date'])); // Add a ,Y to display the year as well. Change M to F for full month's name
if ($formatted_date != $lastDate):
$lastDate = $formatted_date;
$showDate = true;
endif; ?>
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4><?php echo $formatted_date; ?></h4>
<?php /*?><?php echo date("D, M jS, Y g:i:s a", strtotime($record['date'])) ?><?php */?>
<h5 style="font-weight:400; padding-top:16px;"><a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a></h5>
<!-- /upcoming-event-activity -->
<?php if(isset($eventsRecords[$idx+1])) : ?>
<?php $nextDate = date('Y-m-d', strtotime($eventsRecords[$idx+1]['date']));
$currDate = date('Y-m-d', strtotime($record['date']));
if($nextDate != $currDate) : ?>
</li>
<?php endif; ?>
<?php else : ?>
</li>
<?php endif; ?>
<?php endforeach ?>
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By Mikey - December 16, 2014
Hey Claire,
That fixed the error, but the events are still listed as individual list items... so for example the two events for Dec 30 are two separate list items -VS- being grouped together. I've attached a snap shot to show how it appears now. Any other suggestions on how to get this working?
Thanks for the help!
Zick
By Mikey - December 16, 2014
Hey Claire,
So I was looking at the back-end source code and here's what I think is going on. It's retaining the leading code for same Month/Day events listed below - as seen in bold.
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Dec 30</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?Family-Festival-in-the-park-56">Family Festival in the park</a></h5>
<!-- /upcoming-event-activity -->
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Dec 30</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?City-Council-Meeting-13">City Council Meeting</a></h5>
<!-- /upcoming-event-activity -->
</li>
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Aug 20</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?Spring-Fesitval-38">Spring Fesitval</a></h5>
<!-- /upcoming-event-activity -->
</li>
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Sep 23</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?Family-Festival-in-the-park-55">Family Festival in the park</a></h5>
<!-- /upcoming-event-activity -->
</li>
Yet implementing your solution on the ending <li> just fine as seen in the bolded code below:
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Dec 30</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?Family-Festival-in-the-park-56">Family Festival in the park</a></h5>
<!-- /upcoming-event-activity -->
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Dec 30</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?City-Council-Meeting-13">City Council Meeting</a></h5>
<!-- /upcoming-event-activity -->
</li>
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Aug 20</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?Spring-Fesitval-38">Spring Fesitval</a></h5>
<!-- /upcoming-event-activity -->
</li>
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Sep 23</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?Family-Festival-in-the-park-55">Family Festival in the park</a></h5>
<!-- /upcoming-event-activity -->
</li>
So the trick from here is to remove the second instance for a same Month/Day event's leading <li> and <h4> - for a single instance of these for events falling on the same Month/Day. So the code would ultimately look like this:
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Dec 30</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?Family-Festival-in-the-park-56">Family Festival in the park</a></h5>
<!-- /upcoming-event-activity -->
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?City-Council-Meeting-13">City Council Meeting</a></h5>
<!-- /upcoming-event-activity -->
</li>
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Aug 20</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?Spring-Fesitval-38">Spring Fesitval</a></h5>
<!-- /upcoming-event-activity -->
</li>
<li class="upcoming-event-activity" style="margin-left:0px; padding-left:0px;">
<h4>Sep 23</h4>
<h5 style="font-weight:400; padding-top:16px;"><a href="/event_details.php?Family-Festival-in-the-park-55">Family Festival in the park</a></h5>
<!-- /upcoming-event-activity -->
</li>
By claire - December 16, 2014
Can you send me a link to the page that this is on, and attach a copy here? I'll take another look.
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By claire - December 17, 2014
Thanks for that. I've moved some of the logic around, and now that page works as it should. Take a look and let me know what you think.
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By Mikey - December 17, 2014
Thanks Claire - your the best!
I really appreciate the help with this. So what do I owe Interactive Tools for fixing this for me? Send me a bill for your time.
Cheers,
Zick