If you would like to make your calendar of public events discoverable by volunteers, you can use the html code below to place a Calendar Button on your website. 


There are two types of code (Fancy and Standard) from which to choose: 


FANCY CODE - Use this code if you would like to adjust the design elements, e.g., color, font, border to align with your website aesthetics/graphic identity.

<html>

  <head>

    <style>

      .event-button {

        background-color: #5c8de8 !important;

        border-color: #ffffff !important;

        border-radius: 16px;

        border:2px solid;

        color: #ffffff!important;

        display:inline-block;

        font-size: 20px !important;        

        font-weight: 700!important;

        padding: .5em 1.2em !important;

      }

      .event-button:hover{

        border-color: #5c8de8 !important;

      background-color: #ffffff !important;

        color: #5c8de8!important;

      }

    </style>

  </head>

<body>

<a href="https://events.civicchamps.com/organizations/(inset organization code)/opportunities" class="event-button">Sign Up</a>  

  </body>

</html>


STANDARD CODE - Use this code for a simple, basic button to link to your calendar.

<a href="https://events.civicchamps.com/organizations/(inset organization code)/opportunities" style="background-color: #5c8de8 !important; border-color: #ffffff !important; border-radius: 16px; border:2px solid; color: #ffffff!important; display:inline-block; font-size: 20px !important; font-weight: 700!important; padding: .5em 1.2em !important;">Sign Up</a> 


Obtaining your Organization Code 


In order for the links to direct your volunteers to the correct organizations calendar, you will need to input your organization's code where indicated in the html code. 


Note: You will need to have an event on the calendar in order to obtain the code, the event can be live OR in draft mode. 


To start, you will need to be in the Events tab in your Civic Champs Admin portal. 


From here, you can select an event on the calendar and click into the Events Summary Page. 


Your organization code is going to be located in the Webpage URL box. It is the last combination of numbers in the link after the forward slash.


Once you've found your organization code, you are going to need to copy and paste the code and input it where indicated in the Calendar Button html code. 


FANCY CODE 

<html>

  <head>

    <style>

      .event-button {

        background-color: #5c8de8 !important;

        border-color: #ffffff !important;

        border-radius: 16px;

        border:2px solid;

        color: #ffffff!important;

        display:inline-block;

        font-size: 20px !important;        

        font-weight: 700!important;

        padding: .5em 1.2em !important;

      }

      .event-button:hover{

        border-color: #5c8de8 !important;

      background-color: #ffffff !important;

        color: #5c8de8!important;

      }

    </style>

  </head>

<body>

<a href="https://events.civicchamps.com/organizations/2827/opportunities" class="event-button">Sign Up</a>  

  </body>

</html>


STANDARD CODE

<a href="https://events.civicchamps.com/organizations/2827/opportunities" style="background-color: #5c8de8 !important; border-color: #ffffff !important; border-radius: 16px; border:2px solid; color: #ffffff!important; display:inline-block; font-size: 20px !important; font-weight: 700!important; padding: .5em 1.2em !important;">Sign Up</a> 


The hyperlink can also serve as a separate calendar link that you can post on socials or send out to volunteers. 


After you have plugged in your organization code, you can now use the fancyor standard html code to post your calendar of events on your website. 


Related articles: