Embed a Club 1.0 calendar on your website

1. Log into your site and navigate to your desired public page
2. Click to Edit the desire section of the page
3. Click Insert Template
4. Choose Embedded Calendar
5. Click OK
6. Click Save Page

The calendar, like any other section template, can be accessed by selecting to Edit the desired section, then choosing the Insert Template option from the toolbar. In the pop-up, select the Embedded Calendar option and click OK. This will insert the basic calendar into the section. This defaults to showing the full month with the current date as the default shown date.

For most basic uses this works. However, if you would like to customize your calendar and/or embed it into a third-party site, please see the Configure Your Calendar section below.

The calendar basics will include some core settings that will let you create your desired calendar. Note that only the organization URL is required.

Organization URL: Your organization's Uplifter URL is required in order to generate a calendar. This should include any applicable subdomain (ex. www., register., etc.) and .com/ca/org. Please note that your organization's URL will depend on any DNS changes you have made. Thus, you will want to verify the domain that browsers show when users land on your organization's site.
Default View: The defaulting view your calendar displays. Further views can be accessed by your users by adding view buttons in the Header/Footer section. Defaults to Month View.

The following view options are available:
Day View: A compressed day-long calendar split by slot duration.
Week View: A compressed week-long calendar split by days.
Month View: A compressed month-long calendar split by days.
Day View (Time Slots): An expanded day-long calendar split by slot duration.
Week View (Time Slots): An expanded week-long calendar split by days.
Day View (List): A list of all events during the displayed day.
Week View (List): A list of all events during the displayed week.
Month View (List): A list of all events during the displayed month.
Year View (List): A list of all events during the displayed year.

The Dates/Times section will let you get more specific about which dates show, how long each day is, and how long each time slot is displayed as.

Default Date: Controls the date the calendar shows on load. By default, this will be the current date.
Slot Duration: Controls the amount of time each slot consists of. Each day is broken down into slots to better display length of events. Only noticeable on the Day view. Defaults to 30 minutes.
Day Start Time: Controls the time at which a "day" starts at. Only noticeable on the Day view. Defaults to 12:00 AM.
Day End Time: Controls the time at which a "day" ends at. Only noticeable on the Day view. Defaults to 11:59 PM.

The Display Information section will allow you to toggle and adjust various factors that display on the calendar. Things like cost, button verbiage, and legend location.

Pricing Display: Controls how the pricing is displayed in the event pop-up. This can display the price as a total, as installments (if applicable for the program), or hide the cost entirely. Defaults to total.
Button Text: Controls the verbiage on the "register" button in the event pop-up. This can display "Register" or hide the button. Defaults to "Register".
Legend Position: Controls the location of the calendar legend. This can display above the calendar, below the calendar, or be hidden. Defaults to below.

The Header/Footer section will allow you to control the buttons and interface of your calendar. It gives you complete control over which buttons display and in which location. Each of the following locations can have any of the below-listed options, in any order. They can either be separated by a space (creating a small space between the buttons) or by commas (merging the buttons into a single menu-like series).

Header Left: Controls what is displayed at the top left of the widget. Defaults to "Previous", "Next", "Today", comma-separated.
Header Center: Controls what is displayed at the top center of the widget. Defaults to "Title".
Header Right: Controls what is displayed at the top right of the widget. Defaults to "Month View", "Week View", "Day View", comma-separated.
Footer Left: Controls what is displayed at the bottom left of the widget. Defaults to no buttons.
Footer Center: Controls what is displayed at the bottom center of the widget. Defaults to no buttons.
Footer Right: Controls what is displayed at the bottom right of the widget. Defaults to no buttons.

Each option can use any of the following options:
Title: Show the title of the calendar.
Previous: Show a Previous button to move the calendar to the previous day/week/month.
Next: Show a Next button to move the calendar to the next day/week/month
Previous Year: Show a Previous Year button to move the calendar to the previous year.
Next Year: Show a Next Year button to move the calendar to the next year.
Today: Focus the calendar on today's date in the current view.
Day View: A compressed day-long calendar split by slot duration.
Week View: A compressed week-long calendar split by days.
Month View: A compressed month-long calendar split by days.
Day View (Time Slots): An expanded day-long calendar split by slot duration.
Week View (Time Slots): An expanded week-long calendar split by days.
Day View (List): A list of all events during the displayed day.
Week View (List): A list of all events during the displayed week.
Month View (List): A list of all events during the displayed month.
Year View (List): A list of all events during the displayed year.

Your iFrame Code, once embedded, will open a small window in the website it is placed in. On the other side of that window will be a picture of your Uplifter site, specifically displaying the calendar you have customized. It may be required at times to adjust the size of the window you are displaying. Additionally, by adjusting the frame (window) you are not necessarily adjusting the image therein. As such, there are two areas where you can adjust height and one where you can adjust width.

iFrame: Adjust the iFrame height and width by adding a height and/or width parameter to the "style" attribute. This is done by typing height or width, just before the last quote, then a colon, then your desired value, then a semicolon.

The suggested value for "height" is "auto". The suggested value for "width" is "100%".
height:auto;width:100%;

Calendar: Adjusting the calendar size will not have any effect until your iFrame is larger than than your calendar. The calendar will only accept a height value and this can be passed to the calendar using the "src" attribute. This is done by typing an ampersand, then height or width, just before the last quote, then an equals sign, then your desired value.

The suggested value for "height" is "auto" or your preferred size (converted to pixels)
height=auto or height=###px

External Embedding: The above-mentioned height suggestions will not work when embedding your Uplifter calendar in an external (non-Uplifter) site. Instead, you will want to use the direct height="###px" directly in the iFrame element.

While the configurator will allow you to toggle between comma (",") separated and space (" ") separated options, you can mix and match these as desired. This can be done by adding your desired header/footer items, toggling the comma/space options as desired, then updating the iFrame Code results as desired.

After the code generates the "src" attribute will have the header/footer elements defined, separated by your selected option. You can then update any/all of these manually bu changing the comma (",") to a space (" ") or vice versa.

Adding custom filters to your calendar requires that you obtain the ID of the item you wish to filter for. This is most easily done by gleaning the ID from the URL of a page that is filtered in the same manner. The programs page is the easiest option for this.

1. Navigate to Products & Programs > Programs
2. Use the desired filter(s) on the left to filter the page in the same manner as you would like your calendar filtered
3. Review the page URL for the filter IDs
4. Use that filter ID within the calendar URL

To add a custom filter first navigate to Products & Programs > Programs and use the page filters on the left to apply your desired filter(s). Click Filter and your page will update. This update includes a change to your URL. Scan through the URL until you find category[]=#, or similar based on your chosen filter(s). This indicates the ID of your desired filter type. If you have filtered by multiple filters it will show each as its own listing, so be sure to note each ID.

With this ID (or IDs) in hand you can now filter your calendar. This is done by adding the filters to your calendar's "src" URL. That is, your full calendar iFrame code will look something like this:

<iframe class="up-calendar" src="//democlub.uplifterinc.com/calendar/" style="border:none;overflow:hidden;width:100%"  frameborder="0" scrolling="yes"></iframe>

Among that code you will see a "src" parameter with a URL in quotes. At the end of this URL (but still within the quotes) you will want to add the filter code (as noted in the table above) with the correct ID for each of the desired you want to include. That will create iFrame code that looks like this (single):

<iframe class="up-calendar" src="//democlub.uplifterinc.com/calendar/?&season[]=1"  style="border:none;overflow:hidden;width:100%" frameborder="0" scrolling="yes"></iframe>

Or like this (multiple):

<iframe class="up-calendar" src="//democlub.uplifterinc.com/calendar/?&season[]=1&season[]=5&category[]=2&location[]=1" style="border:none;overflow:hidden;width:100%" frameborder="0" scrolling="yes"></iframe>

Please note that if you do not yet have any other filters at the end of your URL you will need to prefix your first filter with a question mark. This can be seen in the examples above.

To embed your customized calendar you will first need to copy the iFrame Code generated above. Next, navigate to the desired page on your Uplifter site and select to Edit the preferred section therein. Select the Source Code icon from the toolbar. If there is no content in the source code you can simply paste your copied iFrame Code. If there is content, determine your preferred location and paste in your code. It can help to look for keywords from your content to determine where the best position is.

When finished, click OK and be sure to click Save Page at the top right!

If you would like to embed your calendar in a non-Uplifter site you will need to access the back end of your content system. From here, you will need to either access the raw HTML of your preferred page, or utilize an embedding tool (if your content host offers one) to paste in the code.