HubSpot CMS

HubDB Event Listing

This module can be used to create an event listing on any HubSpot page.

Created by: Katelyn

Tags: HubDB, Calendar and events

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

2 Recommendations

View on:

GitHub

HTML + HUBL
          
            {% if dynamic_page_hubdb_row %}  
<div class="event-banner-area" style="background-image: url('{{ dynamic_page_hubdb_row.image.url }}'); background-size: cover;">
  <div class="event-header-container">
    <div class="event-header-content">
      <div class="event-header-text">
        <h1>
          {{ dynamic_page_hubdb_row.name }}
        </h1> 
        <p>
          {{ dynamic_page_hubdb_row.date|datetimeformat('%A, %B %e, %Y') }} | {{ dynamic_page_hubdb_row.region }}
        </p>       
      </div>
    </div>
  </div>
  <div class="event-banner-edge">
    <svg viewBox="0 0 500 50" preserveAspectRatio="xMinYMin meet">
      <path d="M0,50 L0,4 C95,-23 285,115 500,2 L500,50 L0,50 Z" style="stroke: none; fill: #fff;"></path>
    </svg>
  
  </div>
</div>
<div class="events-listing container">
  <div class="event-details-container">
    <div class="event-section">
      <hr>
      <h2 class="event-section-header">
        What to Expect
      </h2>
      <p>
        {{ dynamic_page_hubdb_row.description }}
      </p>
    </div>
    <div class="event-section">
      <hr>
      <h2 class="event-section-header">
        Agenda
      </h2>
      <p>
         {{ dynamic_page_hubdb_row.agenda }}
      </p>
     
    </div>
    <div class="event-section">
      <hr>
      <h2 class="event-section-header">
        Featured Speaker
      </h2>
      <img src="{{ dynamic_page_hubdb_row.speaker_image.url }}" class="speaker-image" />
      {{ dynamic_page_hubdb_row.speakers }}
    </div>
  </div>
</div>
{% elif module.hubdb_table %}
{% set table = hubdb_table_rows(module.hubdb_table, queryparam) %}
<div class="events container">
  <div class="events-results">
    {% for row in table %}
    <div class="event-item">
      <div class="event-item-content">
        <div class="event-image-container">
          <a href="{{ request.path }}/{{ row.hs_path }}">
            <img src="{{ row.image.url }}" />
          </a>
        </div>
        <div class="event-text-container" >
          <h4>
            {{ row.name }}
          </h4>
          <p>
            {{ row.date|datetimeformat('%e of %B %Y') }}, {{ row.region }}
          </p>
          <a href="{{ request.path }}/{{ row.hs_path }}" class="event-cta">Learn more »</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}
          
        
CSS
          
            body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #33475b;
    background-color: rgb(245, 248, 250);
    font-family: "AvenirNext","Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.625;
    margin: 0;
    padding: 0;
}

body .container {
    max-width: 1141px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.event-banner-area {
  color: #fff;
  position: relative;
  padding-bottom: 10%;
  background-color: #425b76;
}

.event-banner-edge {
    position: absolute;
    left: 0;
    width: 100%;
}

.event-header-container {
    padding: 7.5rem 0;
  position: relative;
}

.event-header-content {
    box-sizing: content-box;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}

.event-header-text {
    text-align: center;
    max-width: 710px;
    margin: 0 auto;
}

.event-header-text h1 {
  font-weight: 700;
  font-size: 3.4375rem;
  line-height: 1.1818;
}

.event-header-text p {
    font-size: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}


.event-details-container {
  text-align: center;
}

.event-section {
  margin: 2.5rem 0;
}

.event-section .speaker-image {
  border-radius: 50%;
}

.events-results {
display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    margin-bottom: 2.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.event-item {
    -webkit-box-flex: 1;
    flex: 1 1 33.33%;
    max-width: calc(33.33% - 2rem);
    margin: 1rem;
}

.event-item .event-item-container {
  position: relative;
}

.event-text-container h4 {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3636;
    margin: 0.5em 0!important;
}

.event-text-container p {
    font-size: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.event-text-container a {
    color: #0091ae;
    font-weight: 500;
    text-decoration: none;
}

.event-text-container a:hover {
    color: #007a8c;
    text-decoration: underline;
}

          
        
JS
          
            // js

          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

HubSpot

Code Gallery


Module - HubDB Event Listing w/ Dynamic Pages

This module is intended to be used with HubSpot's HubDB tool to create a listing section for events. Each event card can also link to it's own event details page using HubDB Dynamic Pages.

How to use this module

Before using this module you must create a HubDB table first to store your event listing information. Instructions on how to create and edit a HubDB table can be found here.

Step 1 - Create HubDB table

In order for the HubL contained within this module to work correctly the HubDB table must contain the following columns, column names must match exactly:

| Column Label | Column Name | Column Type | | ------------------- |:---------------------:| ------------: | | Name | name | text | | Date | date | date | | Region | region | text | | Image | image | image | | Description | description | rich text | | Agenda | agenda | rich text | | Featured Speaker Image | speaker_image | image | | Featured Speaker Bio | speakers | rich text |

Step 2 - Allow use of Dynamic Pages

In order to use the HubDB Dynamic Pages in this module this option must be toggled on within your HubDB table settings. See screenshot below:

alt text

step 3 - Place on any HubSpot CMS Page

Once you have your table created and this module downloaded into your design manager you can place the module on any HubSpot template or page. Choose the HubDB table data you wish to use with the module by selecting the 'HubDB Table' module field.

 
2 Recommendations

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co