Skip to content

Instantly share code, notes, and snippets.

@raphaelsaunier

raphaelsaunier/events2template.php

Created March 29, 2011 13:53
Show Gist options
  • Save raphaelsaunier/892397 to your computer and use it in GitHub Desktop.
Save raphaelsaunier/892397 to your computer and use it in GitHub Desktop.
Download ZIP
Planet Earth Institute Worldwide - Events template
Raw
events2template.php
<?php
/**
* Template Name: Events2
*
* @package peiFramework
* @subpackage Template
*/
/* See theme's functions.php for PetersDateConverter() function */
get_header();
?>
<style type="text/css" media="screen">
#pei-calendar-wrapper {position:relative;}
#pei-calendar-wrapper .pei-event { overflow: hidden; background-color: #DC0000; padding: 3px; height: 6px;
display: inline-block; cursor: default;}
#pei-calendar-wrapper .pei-event:hover, #pei-calendar-wrapper .pei-event.hover {cursor:pointer;}
#pei-calendar-wrapper .pei-event:hover p, #pei-calendar-wrapper .pei-event.hover p {text-decoration:underline;}
#pei-month-title {display:inline-block;width:160px;text-align:center;}
.pei-calendar .off-left-right {border-radius: 7px; -moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px; }
#footer {z-index:10;}
.pei-calendar-events {position:absolute;background:rgba(255,255,255,0);width:100%;height:100%; z-index:9;top:0;left:0;}
.pei-calendar {border:0 !important;}
.pei-last-day {border-right-color:white !important;}
.pei-event {cursor:pointer;overflow:hidden;width:90px;position:absolute;}
.eventforcarousel {min-height:450px;}
.deactivated {visibility:hidden;}
#pei-calendar thead td {width:98px !important;}
</style>
<noscript>
<style type="text/css" media="screen">
.pei-title, .pei-calendar-wrapper {display:none;}
</style>
</noscript>
<script type="text/javascript" charset="utf-8">
(function(){
// Aliases
var $ = jQuery,
_l = function(s){if(window.console) return console.log(s)};
// Constants
var DAY = 1000 * 60 * 60 * 24; // miliseconds * sec * min * hours
var MONTHS = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December "]
// Helpers
var _z = function(i){return i<10? '0'+i:i}
if(!Array.indexOf){
Array.prototype.indexOf = function(obj){
for(var i=0; i<this.length; i++){
if(this[i]==obj){
return i;
}
}
return -1;
}
}
Date.prototype.getDayOfTheWeek = function(){
return (this.getDay() + 6) % 7;
}
Date.prototype.getFormattedDate = function (separator){
return _z(this.getDate())+separator+_z(this.getMonth()+1)+separator+this.getFullYear();
}
// Code borrowed from http://goo.gl/Rkp4u
Date.prototype.getWeek = function () {
var target = new Date(this.valueOf());
target.setDate(target.getDate() - this.getDayOfTheWeek() + 3);
return 1 + Math.ceil(((target - (new Date(target.getFullYear(), 0, 4))) / DAY) / 7);
}
Date.prototype.isInSameWeekAs = function (date) {
return this.getWeek() === date.getWeek();
}
var events = {}, lastDate = 0, lastEvent;
var currentMonth = (new Date).getMonth(),
currentYear = (new Date).getFullYear();
var thisMonth = new Date(currentYear, currentMonth, 1);
var nextMonth = function(){
if(currentMonth == 11) { currentMonth=0; currentYear++ }
else currentMonth++;
displayMonth();
}
var prevMonth = function(){
if(currentMonth == 0) { currentMonth=11; currentYear-- }
else currentMonth--;
displayMonth();
}
var displayMonth = function(){
var _html = '';
var firstDayOfMonth = new Date(currentYear, currentMonth, 1);
if(firstDayOfMonth.valueOf() == thisMonth.valueOf()) $("#calendar-prev").addClass("deactivated");
else $("#calendar-prev").removeClass("deactivated");
if(firstDayOfMonth.valueOf() > lastEvent.valueOf()-28*DAY) $("#calendar-next").addClass("deactivated");
else $("#calendar-next").removeClass("deactivated");
// Update title
$("#pei-month-title").html(MONTHS[currentMonth]+" "+currentYear);
// Draw calendar
while(firstDayOfMonth.getMonth() === currentMonth){
_html += drawRow(firstDayOfMonth);
firstDayOfMonth = new Date(firstDayOfMonth.getTime()
+ (7-firstDayOfMonth.getDayOfTheWeek())*DAY);
}
$("#pei-calendar tbody").html(_html);
// Fix borders on the edges
$("#pei-calendar tr td:first-child").css({borderLeftColor:"white"});
$("#pei-calendar tr td:last-child").css({borderRightColor:"white"});
var sidebarEvents = {};
window.weeks = {};
// Display events for current month
$("#pei-calendar-events, #sidebar-events").empty();
// Draw events
$.each(events, function(i,item){
var _s = i.split("-"), _d = new Date(_s[2],(_s[1]-1),_s[0]);
var week = _d.getWeek();
$.each(item, function(_i,_item){
var _el ="#"+_item.id;
// Is the event listed in the sidebar?
if(!sidebarEvents[_item.id]){
sidebarEvents[_item.id] = true;
var newspicker = $("<div />", {"class":"newspicker"});
var sideTitle = $("<div />", {"class":"side-title"}).appendTo(newspicker);
var anchor = $("<a />",{click:function(){
displayEvent(_el);
currentMonth=_s[1]-1;
currentYear=parseInt(_s[2],10); displayMonth(); return false;
}, html:_item.title}).attr("href", _el).appendTo(sideTitle);
var sideExcerpt = $("<div />", {"class":"side-excerpt", html:_item.excerpt}).appendTo(newspicker);
$("#sidebar-events").append(newspicker);
}
var cell = $("#d-"+i);
// Is the date visible in the current calendar view?
if(cell.size() !== 0){
weeks[week] = weeks[week] || {"events":[],"masks":[0,0,0,0,0]};
if(!~weeks[week].events.indexOf(_item.title)){
weeks[week].events.push(_item.title);
var startsThisWeek = _item.begins.isInSameWeekAs(_d), endsThisWeek = _item.ends.isInSameWeekAs(_d);
var size = 0;
while((_d.valueOf() + size*DAY) < _item.ends
&& new Date(_d.valueOf() + size*DAY).getDayOfTheWeek() < 6 )
size++;
size++; //(sic)
// Hardcore binary math
var eventmask = ((1 << size) -1) << _d.getDayOfTheWeek();
for(var row = 0; row < 4; row++){
if ( (~weeks[week][row] & eventmask) == eventmask ){
break;
}
}
weeks[week][row] |= eventmask;
var pos = row < 3 ? row*17 : row < 4 ? 8 : 25;
var offset = cell.position();
var el = $("<div />", {html:'<p>'+_item.title+'</p>', title:_item.title})
.bind("click", function(){
document.location.hash = _el;
displayEvent(_el);
})
.bind("mouseenter", function(){
//displayEvent(_el);
$("#pei-calendar-wrapper .pei-event-"+_item.id).addClass("hover")
}).bind("mouseleave", function(){
$("#pei-calendar-wrapper .pei-event").removeClass("hover")
})
.css({"top":(offset.top+pos+17)+"px",
"left":(offset.left+($.browser.mozilla ? 0:1))+"px",
"width":(Math.floor($("#pei-calendar").width()/7*size)-8)+"px"})
.addClass("pei-event")
.addClass("pei-event-"+_item.id)
.appendTo("#pei-calendar-events");
if(startsThisWeek) {
el.addClass("off-right");
el.css({width:function(index, value){
return parseFloat(value)-7;
},left:function(index,value){
return parseFloat(value)+6;
}});
}
if(endsThisWeek){
if(el.hasClass("off-right")){
el.addClass("off-left-right");
}
else{
el.addClass("off-left");
}
el.css({width:function(index, value){
return parseFloat(value)-5;
}});
}
}
cell.addClass("pei-has-events");
}
});
});
}
var displayEvent = function(id){
$("#comingnext").remove();
$(id).addClass("visible").slideDown(0, function(){
$("#eventframe .event-item").not(id).removeClass("visible").slideUp(0);
});
}
var drawRow = function(firstDate){
if((firstDate.getDate() === lastDate ) && lastDate !== 1) return; // Fix DST bug
var _html = "<tr>";
var _i = firstDate.getDayOfTheWeek();
if(firstDate.getDate() == 1)
for(var j = _i; j > 0; j--){
_html += drawDate(new Date(firstDate.getTime()-j*DAY), true, j === 1);
}
for(var i = firstDate.getDayOfTheWeek();i<7;i++){
var _d = new Date(firstDate.getTime()+(i-_i)*DAY)
_html += drawDate(_d, _d.getMonth() === firstDate.getMonth() ? false : true, false);
}
_html += "</tr>\n";
return _html;
}
var drawDate = function(date, grey, lastDay){
lastDate = date.getDate();
return '<td class="'+(grey?'pei-last-month ':' ')+(lastDay?' pei-last-day':' ')
+'" id="d-'+date.getFormattedDate("-")+'">'
+ '<span class="pei-day-number">'
+ date.getDate()+'</span></td>';
}
var parseEvents = function(callback){
$("#eventframe .event-item").each(function(i,item){
var id = $(this).attr("id");
var title = $(this).find("span.event-title").html()
var excerpt = $(this).find("span.event-excerpt").find("p").html();
var start = $(this).find("span.event-startdate").html().split("-")
var end = ($(this).find("span.event-enddate").size() !== 0 ?
$(this).find("span.event-enddate").html().split("-") : false) || start;
startDate = new Date(start[2],(start[1]-1),start[0]);
endDate = new Date(end[2],(end[1]-1),end[0]);
lastEvent = endDate;
for(var i = startDate.getTime(); i <= endDate.getTime(); i+=DAY){
var _d = (new Date(i).getFormattedDate("-"));
events[_d] = events[_d] || [];
events[_d].push({"id":id, "title":title, "excerpt":excerpt, "begins":startDate, "ends":endDate });
}
});
callback();
}
$(function(){
// Mouse events
$("#calendar-prev").not(".deactivated").bind("click", function(){ prevMonth(); return false; });
$("#calendar-next").not(".deactivated").bind("click", function(){ nextMonth(); return false; });
$("#sidebar-events a").live("mouseenter", function(){
// displayEvent($(this).attr("href"));
$("#pei-calendar-wrapper .pei-event-"+$(this).attr("href").slice(1)).addClass("hover")
}).live("mouseleave", function(){
$("#pei-calendar-wrapper .pei-event").removeClass("hover");
}).live("click", function(){
displayEvent($(this).attr("href"));
return false;
});
// Init
parseEvents(function(){
displayMonth(currentMonth, currentYear);
})
$("#eventframe .event-item").hide();
$("#eventframe .event-item:eq(0)").addClass("visible").slideDown("fast");
});
})();
</script>
<!--BEGIN #primary-->
<div id="primary" class="article">
<!--BEGIN .calendarframe-->
<div class="calendarframe">
<div class="pei-title" >
<span class="calendararrows"><a href="#" class="prev" id="calendar-prev" title="Previous month"> </a></span>
<span class="pei-month-title" id="pei-month-title"></span>
<span class="calendararrows"><a href="#" class="next" id="calendar-next" title="Next month"> </a></span>
</div>
<div class="pei-calendar-wrapper" id="pei-calendar-wrapper">
<table class="pei-calendar" id="pei-calendar">
<thead>
<tr>
<th class="Monday">Monday</th>
<th class="Tuesday">Tuesday</th>
<th class="Wednesday">Wednesday</th>
<th class="Thursday">Thursday</th>
<th class="Friday">Friday</th>
<th class="Saturday">Saturday</th>
<th class="Sunday">Sunday</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="pei-calendar-events pei-calendar" id="pei-calendar-events">
</div>
</div>
<!--BEGIN .eventframe-->
<div id="eventframe">
<?php rewind_posts(); ?>
<?php $mycount = 0; ?>
<?php if ( have_posts() ) : ?>
<?php $args = array( 'post_type' => 'events',
'post_status' => 'publish',
'cat' => '-3',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'meta_value',
'meta_key' => 'event-date-start'
); ?>
<?php $eventslist = new WP_Query(); ?>
<?php $eventslist->query( $args ); ?>
<?php while($eventslist->have_posts()) : $eventslist->the_post(); ?>
<!--BEGIN .eventforcarousel-->
<div id="event-<?php the_ID(); ?>" class="eventforcarousel event-item">
<!--BEGIN .eventheads-->
<div class="eventheads">
<?php if ( $mycount == 0 ) : ?><h2 class="white">COMING NEXT:</h2><?php endif; ?>
<h2><span class="event-title"><?php the_title(); ?></span>
<span class="event-excerpt" style="display:none;"><?php the_excerpt(); ?></span></h2>
<!--END .eventheads-->
</div>
<!--BEGIN .eventwrapper-->
<div class="eventwrapper">
<!--BEGIN .thecontent-->
<div class="thecontent">
<p class="eventdetails">
<?php $myDate = get_post_meta($post->ID, "event-date-start", true);
$myStartDate = date('jS M, Y', $myDate);
$jsStartDate = date('d-m-Y', $myDate); ?>
<?php if (get_post_meta($post->ID, "event-date-end", true)): ?>
<span class="eventlabel">Start Date:</span><?php echo $myStartDate; ?>
<?php else : ?>
<span class="eventlabel">Date:</span><?php echo $myStartDate; ?>
<?php endif; ?>
<span class="event-startdate" style="display:none;"><?php echo $jsStartDate; ?></span>
<?php if (get_post_meta($post->ID, "event-date-end", true)): ?>
<?php $myDate = get_post_meta($post->ID, "event-date-end", true);
$myEndDate = date('jS M, Y', $myDate);
$jsEndDate = date('d-m-Y', $myDate);
?>
<span class="event-enddate" style="display:none;"><?php echo $jsEndDate; ?></span>
<br /><span class="eventlabel">End Date:</span><?php echo $myEndDate; ?>
<?php endif; ?>
</p>
<p><hr /><span class="eventlabel">Location:</span><?php echo get_post_meta($post->ID, "event-location", true); ?></p>
<?php if (get_post_meta($post->ID, "event-location-google", true)): ?>
<img src="http://maps.google.com/maps/api/staticmap?center=<?php
echo get_post_meta($post->ID, "event-location-google", true); ?>&zoom=4&size=240x240&markers=size:mid%7C<?php
echo get_post_meta($post->ID, "event-location-google", true); ?>&sensor=false" width="240" height="240"
alt="Google map of event location" class="event-map" />
<?php endif; ?>
<!--END .thecontent-->
</div>
<!--BEGIN .thesupplemental-->
<div class="thesupplemental">
<h3 class="eventtop">Details:</h3>
<?php the_content(); ?>
<!--END .thesupplemental-->
</div>
<!--END .eventwrapper-->
</div>
<div class="contentclear"></div>
<!--END .eventforcarousel-->
</div>
<?php $mycount++; ?>
<?php endwhile; ?>
<?php endif; ?>
<!--END .eventframe-->
</div>
<!--END .calendarframe-->
</div>
<!--BEGIN .thesidebar -->
<div class="thesidebar">
<div class="headspace">
<h3>Events</h3>
</div>
<div id="sidebar-events">
</div>
<!--END .thesidebar -->
</div>
<!--END #primary-->
</div>
<?php get_footer(); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment