Skip to content

Instantly share code, notes, and snippets.

@jasonmelgoza
Created September 9, 2010 18:55
Show Gist options
  • Save jasonmelgoza/572331 to your computer and use it in GitHub Desktop.
Save jasonmelgoza/572331 to your computer and use it in GitHub Desktop.
Zvents Calendar Widget
<!DOCTYPE html>
<html>
<head>
<title>ZVents Calendar</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<section>
<!-- ZVents Calendar Widget -->
<div class="widget-events widget">
<h3 class="widget-header zvents_icon"><span class="sidebar_icon">Calendar</span></h3>
<style type="text/css">
/*cal style*/
div.widget-events{font: 13px/18px "Helvetica Neue",helvetica,arial,sans-serif; }
div#cal_item_list{color:#444444;}
a.ZventsDayButton{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background: #2CB0E5;background: -moz-linear-gradient(top, #2CB0E5 0%, #1A7CD3 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2CB0E5), color-stop(100%,#1A7CD3));color:#FFFFFF;display:block;text-decoration: none;float:left;font-size:12px;font-weight:bold;margin-right:2px;padding:3px;text-align:center;width:30px;}
a.ZventsDayButton.ZventsDayButtonToday{background: #45484d;background: -moz-linear-gradient(top, #45484d 0%, #141616 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#141616));}
a.ZventsDayButton:hover { text-decoration:none;background: #1e80bc; background: -moz-linear-gradient(top, #26a0cd, #1661ab); background: -webkit-gradient(linear, center top, center bottom, from(#26a0cd), to(#1661ab)); }
a.ZventsDayButton:active { background: #1e80bc; }
a.ZventsDayButton::-moz-focus-inner { border: 0; }
span.ZventsDayButtonDate{display:block;font-weight:normal;}
span.ZventsDayButtonDay{display:block;}
a.ZventsDayButton.ZventsAllButton{font-weight:bold;text-align:center;width:45px;}
a.ZventsDayButton.ZventsAllButton span{font-weight:bold;}
ul.ZventsSponsoredList{background:none repeat scroll 0 0 #EEEEEE;}
ul.ZventsSponsoredList li{color:#333333;font-weight:bold;height:74px;padding-left:76px;position:relative;width:61%;}
span.ZventsEventTime{float:left;font-size:11px;margin-right:5px;}
span.ZventsEventDate{float:left;font-size:11px;}
.ZventsEventList,.ZventsSponsoredList{list-style-type:none;margin:0;padding:3px;width:auto;}
ul.ZventsEventList li{border-bottom:1px solid #DDDDDD;padding:4px 0;}
span.ZventsEventTime{float:left;font-size:11px;margin-right:5px;}
span.ZventsEventDate{float:left;font-size:11px;}
a.ZventsEventName{clear:both;display:block;font-size:13px;}
ul.ZventsQuickDayList{display: block;float: left;margin: 0px auto;padding: 0px;}
ul.ZventsQuickDayList li{float:left;list-style:none outside none;}
div#cal_dates{margin-bottom:10px;}
ul.ZventsSponsoredList a img.ZventsImage{left:0;margin:3px;position:absolute;top:0;vertical-align:middle;}
ul.ZventsEventList li a img.ZventsImage{display:none;}
</style>
<script type="text/javascript" src="http://www.fresnobee.com/static/mercury/modules/events/events.min.js"></script>
<script type="text/javascript">
new FresnobeeCalendar.EventList({
id: 'cal_item_list',
max_title: 25,
max_displayed: 5,
show_images: true,
load: {
srss:10,
fields: 'event.id,event.name,event.zurl,event.starttime,event.images',
search: false
}
});
</script>
<div id="cal_dates">
<script type="text/javascript">
new FresnobeeCalendar.QuickDayCalendar({n_days: 5});
</script>
</div>
<div id="cal_item_list">
</div><!--/cal_item_list-->
</div><!--/widget-->
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment