Calendar Search Plugin
Administrators can create a Event Search Plugin to be included on any web page. When users click the search button, a popup opens with a list of found events. Clicking on an event in the list opens a popup with events details.
Follow the steps below to set options for the Search Plugin, then copy and paste the JavaScript code into your web page wherever you would like the plugin to appear.
Note: Your web page must have a suitable DOCTYPE declaration in the first line for the Search Plugin to operate correctly in Internet Explorer. For example:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Preview of Theme
The Preview shows what your Search Plugin will look like on a web page. Changing the color, font and style options will automatically update the preview. Saving your options will change the appearance on your web page where the plugin is installed.
You must Save your settings before changes will appear on your web page.
The preview headline indicates which Search Plugin Theme you are editing. You can define multiple themes, each having different categories, size, color and style for use on different web pages. See instructions below for how to create and manage themes.
Script Tab
Choose One or More Categories: Click on category names to select categories for which events will appear in the Search results.
Only public categories are available for searches to protect the security of private categories. You may choose different categories for each theme.
JavaScript Code For Theme: The JavaScript code contained in this field, when place into a web page, will produce a Search Plugin containing events for a specific theme. Note that the JavaScript contains the name of the theme to be displayed by that script.
Note: Blank spaces in the theme name will be represented by %20 to insure the link works with all browsers.
Using your web page editing software’s code view, copy and paste the code into your web page wherever you want the Search Plugin to appear.
The code can be placed between <td> and </td> or between <div> and </div> html tags. The code will cause the Search Plugin to expand within the tags when your web page is viewed.
IMPORTANT: JavaScript is often entered in a web page’s <head> tag or after the </html> tag. Do not enter the Search Plugin JavaScript code in these areas on your web page.
Plugin Tab
Search Plugin Border: Choose the width, style and color of the border surrounding the Search Plugin.
Search Plugin Layout: Choose either a tall or wide layout for the search plugin to best fit your web page design.
Select Search Methods To Display: Choose the types of search methods to include in the Search Plugin form. The chosen methods will be shown in the preview. The following methods are available:
- Date Range (required): Finds events only within the given start and end dates
- Text Search: Finds events with text strings anywhere in the event title, description or location fields.
- Zip Code Proximity: Finds events with a location zip code within the specified number of miles of the given zip code. Note: Only US zip codes are available for the proximity search. None US postal codes can be found using the Zip/Postal field in the Location Text search method.
- Category List: Finds events in the categories checked in the category drop down check list.
- Locations List: Finds events occurring at the locations checked in the locations drop down check list. The locations in the list only the reusable saved locations defined in the calendar.
- Locations Text: Finds events having any of the text entered into the location name, street address, city/town, state/province, zip/postal code or country.
Heading Text: Enter text that will appear in the heading at the top of your Search Plugin. The maximum number of characters allowed for the heading text is 250.
Heading Style: Choose the heading font, style, size and text color.
Form Tab
Captions: Captions are the text and line outlining each search type. Choose the text font, text size, text color and line color for all captions on the Search Plugin form.
Labels: Choose the text font, size and color for the labels for each field in the Search Plugin form.
Fields: Choose the text font, size and color for text inside each Search Plugin form field.
Note: All colors on this tab relate to the Search Plugin form view. Use the Popup tab to control the colors in the search results popup.
Popup Tab
Search Results Popup Width: Enter the number of pixels for the width of the Search Plugin results popup. The minimum width is 250 and the maximum width is 600.
Search Results Popup Height: Enter the number of pixels for the height of the Search Plugin results popup. The minimum height is 300 and the maximum height is 600.
Search Results Background Colors: The list of events in the search results popup uses alternating colors as background for the events in the list. Choose two colors for this purpose.
Search Results Titles Style: Choose the text font, style, size, alignment, and color for all event titles that will be shown in the popup list.
Search Results Dates and Locations Style: Choose the text font, style, size, alignment, and color for all event dates and location names that will be shown in the popup list.
Event Detail View Style: Choose the text font, size, text and background colors for the popup when the user clicks on an event to view event details.
Themes Tab
You can create one or more themes to display customized Search Plugin on your different web pages. Each theme can have different sizes, colors, styles and categories.
The JavaScript code you insert into your web page contains a reference to the theme name. Be sure to use the correct JavaScript code in your web page and update the code if you delete or change the name of the theme.
The Master Theme: Your calendar always has a theme named the master theme, which cannot be deleted.
The master theme is indicated in the theme list by the ‘(master)’ suffix. You can change and save any setting for the master theme and Save the settings. You can also rename the master theme.
Note: The master theme is always loaded for editing when you first enter the Search Plugin administration screen.
If you intend to only have one Search Plugin on your website, you do not need to create any additional themes – just use the Master Theme.
The Button Theme: Your calendar always has a theme named the button theme, which cannot be deleted.
The button theme defines the options for the Search Plugin used for the search button located on the main calendar navigation bar when the Search Plugin option is checked on the Admin Menu>Options screen.
The button theme is indicated in the theme list by the ‘(button)’ suffix. You can change and save any setting for the button theme and Save the settings. You can also rename the button theme.
Create a New Theme: Click on the New button to create a new theme. Enter a name for the new theme and click OK. The new theme will be opened with the default or “factory” settings and can then be edited and Saved.
Save As New Theme: Click on the Save As button to save the current settings as a new theme. Enter a name for the new theme and click OK. The new theme will then be open for editing and also appear in the themes list.
Open A Theme For Editing: Select a theme in the list and then click on the Open button. The selected theme will then be open for editing.
Delete A Theme: Delete a theme by selecting the theme from the list and clicking Delete. Be careful, deleting cannot be undone. You cannot delete the master theme.
Rename A Theme: Rename a theme by clicking Rename and entering the new name. Remember to update the JavaScript on web pages using the old theme name.
Note: You can rename a theme without that theme being open for editing. Renaming a theme does not open that theme for editing.
Load Default Settings: Load default or “factory” settings into the currently open theme. You can then edit and use Save or Save As to save settings. Save, Back and Help Buttons
You Must Save Your Settings For Changes To Be Visible On Your Web Page.
Save: This button will save your settings and remain at the Search Plugin Administration screen.
Note: We recommend using the Save button when you are fine tuning the Search Plugin appearance by having both the Administration screen and your web page with the JavaScript code open in separate browser windows or tabs. Remember to refresh your web page to view changes to settings.
Back: Returns to the Admin Menu without saving.
Help: Opens this help screen.
Still have questions?