Skip to content

Instantly share code, notes, and snippets.

@nocodesupplyco

nocodesupplyco/add-to-cal-button-js.html Secret

Created December 19, 2022 14:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nocodesupplyco/d74a64bfcf286fd6b32277ce8b36c479 to your computer and use it in GitHub Desktop.
Save nocodesupplyco/d74a64bfcf286fd6b32277ce8b36c479 to your computer and use it in GitHub Desktop.
Download ZIP
Add to Calendar Button
Raw
add-to-cal-button-js.html
<!-- Add to the before </body> code -->
<script src="https://cdn.jsdelivr.net/gh/commonpike/add-to-calendar-buttons@master/add-to-calendar.min.js"></script>
Raw
add-to-cal-button.css
<!-- Custom styles to add to <head> -->
.add-to-calendar-widget {
margin: 5px 0 !important;
}
.add-to-calendar-label {
color: #1d1d1c !important;
background-color: #fff !important;
background-image: none !important;
border-radius: 0 !important;
padding: 10px 16px !important;
border: none !important;
box-shadow: none !important;
transition: all .3s ease-out !important;
font-size: 14px !important;
margin: 0 !important;
}
.add-to-calendar-label:hover {
background-color: #f7f4f0 !important;
}
.add-to-calendar-dropdown {
padding: 4px 0px !important;
border-radius: 0 !important;
box-shadow: 0px 10px 26px rgba(0, 0, 0, 0.2) !important;
width: 180px;
}
.add-to-calendar-dropdown a {
padding: 4px 12px;
opacity: 1 !important;
background-color: #fff;
transition: all .3s ease-out;
}
.add-to-calendar-dropdown a:hover {
background-color: #f7f4f0;
}
.add-to-calendar-checkbox+div.add-to-calendar-dropdown a:before {
position: relative;
top: 2px;
}
.add-to-calendar-dropdown .icon-google:before {
background-image: url(https://www.addevent.com/gfx/icon-google-t5.svg) !important;
background-position: center;
background-repeat: no-repeat;
}
.add-to-calendar-dropdown .icon-yahoo:before {
background-image: url(https://www.addevent.com/gfx/icon-yahoo-t5.svg) !important;
background-position: center;
background-repeat: no-repeat;
}
.add-to-calendar-dropdown .icon-off365:before {
background-image: url(https://www.addevent.com/gfx/icon-office365-t5.svg) !important;
background-position: center;
background-repeat: no-repeat;
}
.add-to-calendar-dropdown .icon-ical:before {
background-image: url(https://www.addevent.com/gfx/icon-apple-t5.svg) !important;
background-position: center;
background-repeat: no-repeat;
}
.add-to-calendar-dropdown .icon-outlook:before {
background-image: url(https://www.addevent.com/gfx/icon-outlook-t5.svg) !important;
background-position: center;
background-repeat: no-repeat;
}
Raw
add-to-cal-button.html
<!-- Example HTML for main button element -->
<div title="Add to Calendar" class="add-to-calendar">
<span class="start">{{START DATE}} {{START TIME}} {{AM/PM}}</span>
<span class="end">{{END DATE}} {{END TIME}} {{AM/PM}}</span>
<span class="timezone">America/Chicago</span>
<span class="title">{{NAME}}</span>
<span class="location">{{LOCATION}}</span>
<span class="description">{{DESCRIPTION}}</span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment