Hide Calendar Options

Prerequisites

This guide assumes you are embedding the Add to Calendar button on your webpage or putting the Add to Calendar links into an email using the custom code block in an email builder (or directly into the email code itself). It also assumes the following:

1. You have already created an event in AddEvent.
2. You have already customized the look of the button or links you are using (if necessary).
3. You have already opened the code editor or custom code block where the Button or Link code will be placed.

For Add to Calendar Links (Emails, Newsletters, and Campaigns)

Each code snippet will hide one option from the list of available options from your users.

Apple: <style> a[title="Apple"] {display:none!important;} </style>

Google: <style> a[title="Google"] {display:none!important;} </style>

Outlook.com (blue icon): <style> a[title="outlookcom"] {display:none!important;} </style>

Outlook Desktop (gold icon): <style> a[title="outlook"] {display:none!important;} </style>

Office 365 (red icon): <style> a[title="office365"] {display:none!important;} </style>

Yahoo: <style> a[title="Yahoo"] {display:none!important;} </style>

Editing the Links

1. Copy the relevant line of code for the option you want to hide.

2. Paste it into the editor or code block where you will paste the Add to Calendar link code.

3. Go to the Event Page for your event, and copy the link code by clicking the <> button.

   
   

4. Click the code that pops up to highlight all of it, and copy the code.

5. Paste the code into your editor or code block immediately after the line of code you just placed in.

6. Save the code.

The result is that you should see every choice except for the one you chose to remove using the first line of code.

📘

If you want to remove multiple options, you can do so by:

1. Pasting each choice you want to remove directly after the one you just pasted in (the order does not matter. For example: <style> a[title="Apple"] {display:none!important;} </style><style> a[title="outlookcom"] {display:none!important;} </style><style> a[title="Yahoo"] {display:none!important;} </style>
2. Combing them into one line. This can be done by pasting in your first choice, then by copying everything between the <style> tags of your next choice, and pasting that in directly between the } and the </style> at the end of your first choice. Again, order does not matter. For example, if you want to remove Google and Office 365, the resulting line of code would be this: <style>a[title="Google"] {display:none!important;} a[title="office365"] {display:none!important;}</style>

For Add to Calendar Buttons (Websites)

1. Copy the code for the Add to Calendar button found on the Event Page for your event, using the <> button

2. Paste the code into the appropriate editor or code block

3. Copy and paste the following code snippet directly above the button code in the editor or code block

   HTML

   <!-- AddEvent Settings -->
   <script type="text/javascript">
     window.addeventasync = function(){
     addeventatc.settings({
       appleical  : {show:true, text:"Apple Calendar"},
       google     : {show:true, text:"Google <em>(online)</em>"},
       office365  : {show:true, text:"Office 365 <em>(online)</em>"},
       outlook    : {show:true, text:"Outlook"},
       outlookcom : {show:true, text:"Outlook.com <em>(online)</em>"},
       yahoo      : {show:true, text:"Yahoo <em>(online)</em>"}
     });
   };
   </script>

4. Find the option(s) you want to hide on the button and change the "true" on each line of code to "false"

   📘

   For example, the resulting line of code to remove the Outlook Desktop option would look like:

   outlook : {show:true, text:"Outlook"},

5. Save your code, and try the button to confirm the option was hidden correctly.

For Add to Calendar Buttons on Event Landing Pages

📘

These steps are only possible if you are subscribed to the Professional or Enterprise plan. To learn about our plans and pricing, see our page here: Plans and Pricing

1. Create or edit an existing event landing page design template.

   1. To learn more about event landing page designs, see our help docs here.

2. Within the Design, select the Advanced tab.

   

3. For event landing page designs (Add to Calendar buttons), you can apply the following CSS, depending on which calendar options you would like to hide.

   CSS

   Example CSS:
   
   .addeventatc_dropdown .ateoffice365 {display:none;}
   .addeventatc_dropdown .ateoutlook {display:none;}
   .addeventatc_dropdown .ateoutlookcom {display:none;}
   
   The above snippet example will hide all three Outlook options from your Add to Calendar button on your event landing page.
   
   Below is the full list of calendar options you can hide.
   
   Apple:
     .addeventatc_dropdown .ateappleical {display:none;}
   
   Google:
   .addeventatc_dropdown .ategoogle {display:none;}
   
   Office 365:
     .addeventatc_dropdown .ateoffice365 {display:none;}
   
   Outlook (desktop app):
   .addeventatc_dropdown .ateoutlook {display:none;}
   
   Outlook.com (browser version):
   .addeventatc_dropdown .ateoutlookcom {display:none;}
   
   Yahoo:
   .addeventatc_dropdown .ateyahoo {display:none;}
   
   You can apply any of the above lines of CSS to the CSS section to hide the specific calendar option that each line applies to (Apple, Google, Office 365, Outlook (desktop app), Outlook.com, and Yahoo).

4. Ensure you click the Apply changes button after applying the above CSS.

   

5. Click the Create design or Save design button on the bottom of the page:

   

6. Apply the event landing page design to your event.

   1. To learn how to apply a design to your event landing page, see our help doc here.

For Follow Calendar Buttons on Calendar Landing Pages

📘

These steps are only possible if you are subscribed to the Professional or Enterprise plan. To learn about our plans and pricing, see our page here: Plans and Pricing

1. Create or edit an existing calendar landing page design template.

   1. To learn more about calendar landing page designs, see our help doc here.

2. Within the Design, select the Advanced tab.

   

3. For calendar landing page designs (Follow Calendar buttons), you can apply the following CSS, depending on which calendar options you would like to hide.

   CSS

   Example CSS:
   
   .addeventstc_dropdown .ateoffice365 {display:none;}
   .addeventstc_dropdown .ateoutlook {display:none;}
   .addeventstc_dropdown .ateoutlookcom {display:none;}
   
   The above snippet example will hide all three Outlook options from your Follow Calendar button on your calendar landing page.
   
   Below is the full list of calendar options you can hide.
   
   Apple:
   .addeventstc_dropdown .ateappleical {display:none;}
   
   Google:
   .addeventstc_dropdown .ategoogle {display:none;}
   
   Office 365:
   .addeventstc_dropdown .ateoffice365 {display:none;}
   
   Outlook (desktop app):
   .addeventstc_dropdown .ateoutlook {display:none;}
   
   Outlook.com (browser version):
   .addeventstc_dropdown .ateoutlookcom {display:none;}
   
   Yahoo:
   .addeventstc_dropdown .ateyahoo {display:none;}
   
   You can apply any of the above lines of CSS to the CSS section to hide the specific calendar option that each line applies to (Apple, Google, Office 365, Outlook (desktop app), Outlook.com, and Yahoo).

4. Ensure you click the Apply changes button after pasting the CSS.

   

5. Click the Create design or Save design button on the bottom of the page:

   

6. Apply the calendar landing page design to your calendar.

   1. To learn how to apply a design to your calendar landing page, see our help doc here.