Large Date

This render template produces a list of upcoming events, each wrapped in a link. Each event contains separate sections for event date and details. Event details include name, location, and time.

For a complete list of best practices, visit the main portlet page: Upcoming Events

HTML Structure


<div class="upcomingEvents largeDate">
	<div class="sectionTitle">
	  <h3>Upcoming Events</h3>
  </div>
    <div class="eventsList">
      <a href="" class="event"> 
	    <div class="inside">
		 <div class="eventDate">
			 <div class="date">
			 Jun 
			 <span>06</span> 
			</div>
		  </div>
	 <div class="eventDetails">
	   <div class="eventName">Event Name</div>
		 <span class="location">Location (if listed)</span>
		 <span class="time">10:00AM - 12:00PM (or All Day)</span>
	   </div>
    </div>
  </a><!-- end Event -->
  <!-- Copy/paste a.event and contents for more events of the same type -->
 </div>
</div>

Default Styling

No Events Found

Custom Styling Example

No Events Found

Custom Styling Example

No Events Found