Skip to end of metadata
Go to start of metadata

This is a how-to article that will explain a step-by-step guide to creating and customizing the "Add to Calendar" button for the announcements website.

Step-by-step guide

  1. Login to the Announcements Dashboard
  2. Create a new post or if you already have a preexisting post, navigate to the post and edit it.
  3. Click on the HTML button of the block
  4. Copy and paste this code into the editor and it should look like the image below
    1. <!-- Button code -->
      <div title="Add to Calendar" class="addeventatc">
          Add to Calendar
          <span class="start">06/01/2019 08:00 AM</span>
          <span class="end">06/01/2019 10:00 AM</span>
          <span class="timezone">America/New_York</span>
          <span class="title">Change to Event Title</span>
          <span class="description">Change to Event Description</span>
          <span class="location">Change to Location of Event</span>
      </div>


  5. Format the start and end date as seen above with the correct data
  6. Change "Change to Event Title" to the title of your event
  7. Change "Change to Event Description" to your description of the event
  8. Change "Change to Location of Event" to the location of your event
  9. After saving, view your post and test out your new Add to Calendar button
  10. It is important that you do not change any of the <div> or <span> areas as these are necessary for the button to work