Adding a LocalHop Community Calendar

NOTE: Creating a page with your standard LocalHop Calendar is detailed at another Solution Article: Creating a LocalHop Calendar on my Ploud Site. LocalHop and Ploud are working together to provide more calendar options in the near future. Until then, please use this article to create the additional Community Calendar within your website. Once the LocalHop/Ploud integrations are complete, this article will be retired and replaced with a more simple solution to bring in your LocalHop Calendars.

These instructions are for creating Community Calendar on your Ploud site.

Step 1
The first thing you will need to do is get your Community calendar snipit code from LocalHop. 

You must have an account on the Localhop service (https://getlocalhop.com) in order to use LocaHop calendars on your website.

1. Login to LocaHop with your LocalHop account.
   
2. Once you are logged in, you will be directed to your dashboard. Make sure your organization is selected.
   
   
3. From the left pain select (1)  "Calendar Snippets" (2) On that page make sure to use the Community Calendar Snippets 

1. Click on the GET CODE SNIPPET button next to your My Calendar link.
   

2. In the snippet window, select the type of Calendar you would like to display in this case select Mini List and then highlight ALL of the code in the Code Snippet field and copy it to your computer clipboard (CTRL-C, Command-C on mac). This is the code snippet you will paste into your Ploud site.
   

Now your ready to add the calendar to your Ploud Website

1) Log in to your Ploud website 

2.) Go to the location on your website you would like to add the community calendar
3.) From the green bar select "Add New" then scroll down and select "Page"

4.) Enter a tile for your page such as Library Community Library then select from the WYSIWYG editor as indicated by the 
"< >" a pop-up will display this is where you will paste your community calendar snippet code.

5) Click the "OK" button at the bottom of the source code pop-up window. This will return you to your page. You need to click "SAVE" at the bottom to save the calendar to this page.

6.) In order to see a full month calendar you need to allow for more room on the web page otherwise you will get a Calendar list instead of the full month calendar display. 

To create more room you will need to block off the left or right side portlets. You want to block off the portlet on the page the calendar is on so it will only effect that page and not the portlets on every page.

7.) Click the button "Manage Portlets" found at the bottom of the center content are. You will want to change the portlet for this page your calendar will be on so click that button "Manage Portlets" on the calendar page.

8.)  This will bring up the manage portlets configuration page. On the side you want to not display the portlet column select at "Parent Properties" --->" Block" this will block the portlet from showing and allow the full view of the calendar. Make sure to select "Save"  to save the changes to the portlets column.

Full Calendar view with the left portlet blocked so the full calendar can be displayed.

Calendar List View with both the left and right portlet active which will only have room for the calendar list to show in the main content area.