Feature Request: Rich Snippet Support

For anyone else looking to do this, here’s how I marked up the event:

<div class="event" itemscope itemtype="https://schema.org/Event">
   <h3 class="event-title" itemprop="name">[event-title]</h3>
   [if-description]<div class="event-description" itemprop="description">[description]</div>[/if-description]
   <div class="event-times">
      <div class="event-start">
         <meta itemprop="startDate" content="[start-date]T">
         <span class="event-bold">Starts:</span> [start-date] at [start-time]
      </div>
      <div class="event-end">
         <meta itemprop="endDate" content="[end-date]T">
         <span class="event-bold">Ends:</span> [end-time]
      </div>
   </div>
   <div class="event-location" itemprop="location" itemscope itemtype="https://schema.org/Place">
      <a class="event-location-name" itemprop="url" href="https://www.leegov.com/parks?Project_Num=0259"><span itemprop="name">NFM Community Park Recreation Center</span></a>
      <div class="event-location-address" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
         <span class="event-location-city" itemprop="addressLocality">North Fort Myers</span>,
         <span class="event-location-state" itemprop="addressRegion">Florida</span>
      </div>
   </div>
   <div class="more-link" >[link newwindow="true"]More details...[/link]</div>
</div>

I hard coded the location, because there wasn’t one included in my events. I’m not sure if the information you get from the calendar can be used directly, or if you won’t have the right information accessible. This method would work if you had a separate listing for every location.

Then you can use some CSS to make it pretty (display mode: list).

.gce-navbar {
    font-size: 14px;
    background-color: #F0F0F0;
    padding: 10px 20px;
    margin-bottom: 40px;
    display: none;
}

.gce-list .event {
    border: 1px solid #F0F0F0;
    padding: 20px;
    margin-bottom: 20px;
}

.gce-list span {
    color: #000 !important;
}

.gce-list .event-bold {
    font-weight: bold;
}

.gce-list .event-description {
    font-style: italic;
    font-size: 18px;
    margin-bottom: 20px;
}

.gce-list .event-times {
    overflow: auto;
    margin-bottom: 20px;
}

.gce-list .event-start,
.gce-list .event-end {
    float: left;
    width: 66%;
}

.gce-list .event-end {
    width: 34%;
}

.gce-list .event-location {
    text-indent: -9999px;
    height: 0;
}

.gce-list .more-link {
    text-align: right;
}

Hey thanks for posting your solution for everyone. You can also submit a feature request here:

https://philderksen.com/google-calendar-events-feature-requests/

Thanks!

Thanks Nick, will do!

In what file did you put the event markup?

That just went in the post editor: Dashboard > Calendars > Add New