HubSpot CMS

Add Calendar Reminder (Add to calendar)

Enable "Add to calendar" buttons on landing pages and email templates, for Google Calendar and Outlook Calendar

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.

1 Recommendation

View on:

GitHub

HTML + HUBL
{% if module.activate %}
  <p>
    <a class="btn-google-calendar" title="Agéndalo en tu Google Calendar" target="_blank" style="padding: 6px 10px; margin-right: 10px;border-radius: 6px;color: rgb(255,255,255);background:#277ec5; display: inline-block; text-decoration: none;" href="https://calendar.google.com/calendar/r/eventedit?text={{ module.evento }}&dates={{ module.fechainicio|datetimeformat('%Y%m%dT%k%M%S') }}/{{ module.fechacierre|datetimeformat('%Y%m%dT%k%M%S') }}&ctz={{ local_time_zone }}&details={{ module.detalles }}">Google Calendar &nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i></a>
    <a class="btn-outlook" title="Agéndalo en tu Calendario de Outlook" target="_blank" style="padding: 6px 10px;border-radius: 6px;color: rgb(255,255,255);background:#277ec5; display: inline-block; text-decoration: none;" href="https://outlook.live.com/owa/?path=/calendar/view/Month&rru=addevent&startdt={{ module.fechainicio|datetimeformat('%Y%m%dT%k%M%S', 'GMT') }}&enddt={{ module.fechacierre|datetimeformat('%Y%m%dT%k%M%S', 'GMT') }}&subject={{ module.evento }}&body={{ module.detalles }}">Outlook Calendar &nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i></a>
  </p>
{% else %}
  <p>Agregar a tu calendario, ve a la configuración del módulo para personalizarlo</p>
{% endif %}
          
        
CSS
          
            
          
        
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


Add Calendar Reminder (Add to calendar)

Enable "Add to calendar" buttons on landing pages and email templates, for Google Calendar and Outlook Calendar.

Activar

Some considerations

Google Calendar:

This module uses the Hubspot account timezone to set the event's exact date and time, be sure to verify this setting before using this module.

Outlook Calendar:

This module reformats the event date and time to GMT time.

How to use this module

You can use this module in a page/email drag-and-drop template, and fill the fields with the required information:

Use

Activate Enable/Disable the "add to calendar" buttons.

Event name Set the event name.

Start date Set the start date of the event.

End date Set the end date of the event.

Details Set additional details about the event.

Have Questions?

If you have questions, please email me at csanchez (at) dinterweb.com or slack me @carlosguisan in the HubSpot Developer Community Slack.

 
1 Recommendation

Carlos Sánchez

Dinterweb

Frontend web programmer

View Carlos Sánchez’s Gallery (1 Entry)

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