Customize the Date Finder

You have a lot of control over how the Date Finder looks and behaves. In this topic, you'll learn how to customize:

• Customize how the Date Finder looks
• Enable/disable event popups
• Use custom images for paging buttons

I'm looking for an explanation for why the Date Finder and main calendar seem to be out of sync.

Customize how the Date Finder looks

Compare the three versions of the Date Finder promotion spud shown below.

The version on the left shows the way the spud looks by default. The default state has Buttons selected rather than Images on the Paging Buttons tab (see the "Tip" about this just below). The middle example employs some of the configurations available within the Date Finder spud. The third example shows paging buttons using the default images (with Images selected rather than Buttons on the Paging Buttons tab).

Tip This topic includes information about setting up either default or custom images as paging buttons in the Date Finder spud. This may make sense if you have your own custom images available and/or you want to tailor the button style to the style of the spud. For more information, go to: Use custom images for paging buttons.

IMPORTANT You can instead set up built-in paging buttons, which apply automatically and globally wherever they're displayed. For more information, go to: Paging Buttons tab.

If you select Buttons rather than Images on the Paging Buttons tab, the Paging Buttons section doesn't appear in the Date Finder spud (on the Settings tab), because that section only covers setting up images as paging buttons:



In this case, paging buttons are set up on the base Paging Buttons tab and not in the Date Finder spud. You can override some of the sizing settings, however, for the Date Finder spud on the Styles tab, under the Paging Buttons section.



For example, you may want to make the buttons smaller to better fit in with the Date Finder on your website, as set up by default (see the screenshot just above).

Note that if you select Images on the Paging Buttons tab, the Paging Buttons section doesn't appear on the Styles tab because that section only covers configuring the base paging buttons, not images.

How to customize the Date Finder spud:

The following instructions assume that you already published the calendar for which you're customizing the Date Finder spud.

I haven't yet published the calendar, how can I do that?

1. In the editing environment, make the published calendar active. Click Publish Settings.
2. In the Publishing Control Panel, click the Promotion Spuds tab.
3. In the Date Finder section, click Edit Settings & Styles.
4. On the Edit Settings... page, click the Settings or Styles tabs.
5. In each section of the tab, set the colors and other settings you want. Each section is described in more detail below.

   Tip With each change you make, it's a good idea to preview the specific effects of the change. To preview, click the Preview button at the bottom of the form.

6. When you're satisfied with your settings, click OK.

Styles tab section settings

Some base settings apply in all of the Styles tab's sections:

• Fonts used in the spud are set globally. If you want to specify a different first font for the Date Finder, you can override the base settings by clicking in a font field, and then deleting or moving a font.

  

  Changing the base font settings. Click the button to the right (outlined in red) to restore base settings.

• If you set a base color palette, you can access that palette as you set text, background, and border colors for this spud.

How do I set fonts and a color palette globally?

Style settings section links

• Header, paging buttons, and border
• Calendar days/weekday/weekend
• Day of week heading
• Today
• Other month days

Header, paging buttons, and border

Version	Settings and tips
	This version's header has a background and border color assigned. This version uses the built-in paging buttons, with the default smaller size settings for the Date Finder. Note how the size of the buttons fits well in the title bar. The calendar border setting reflects the header border setting but the colors can be different or one can have a border and not the other. The calendar border surrounds the calendar as a whole as well as each day individually.
	This version's header has a transparent background, which you set, as shown in the image, by clicking the Make transparent button. The header has a transparent border, which you set by typing transparent in the Header border color field. The calendar border setting reflects the header border setting but you can assign a border to one and not the other. If you want a header border but no calendar border, type transparent in the Calendar border color field.

Calendar days/weekday/weekend

Version

Settings and tips

Three sections, Calendar Days, Weekday, and Weekend, have almost the same setting options. The Weekday and Weekend sections take their settings from Calendar Days but you can modify any setting on a section-by-section basis. For example, to distinguish weekends from weekdays give weekend days unique background colors (as shown in the version to the left). Or, you could experiment with text colors and sizes. To color the entire calendar background, including the Day of Week headers, set the background color in the Calendar Days section. To set the Day of Week header background to transparent while giving the calendar days a background color, set the background color in the Calendar Days section to transparent. In the Weekday and Weekend sections, set the calendar days background color you want to use. Days with events are links. Clicking the link displays the event on the full calendar. Set link colors that make dates with events stand out. You can also draw more attention to dates with events, for example, by using settings in the Calendar Days section to underline the links. Tip In all of the examples shown, the week begins on Sunday and ends on Saturday. This is a calendar-level setting. If you want the week to begin on Monday, for example, and end on Sunday, go to the editing environment, make the appropriate calendar active, and then click Calendar Settings. In the Display Options section, for Week display starts, select Monday. Click OK. This settings change affects all of the calendar's spuds.

Day of week heading

Version	Settings and tips
	Day of week heading settings are based on the Calendar Days settings but you can modify any setting. For example, to make the day of week headings stand out, you can increase the font size (as shown in the version to the left) and/or change the text or background color.

Today

Version	Settings and tips
	Tip Mark today boldly. Use a distinctive color integral to your brand. Set Today link and hover colors that show up clearly on the background color you choose.

Other month days

Version

Settings and tips

The Other Month Days settings are based on the Calendar Days settings but you can change any of the settings you want. In this section, you control how visible to make days from past and future months. For example, you might make the days stand out by giving them a different background color. Or, you might partially or completely hide the other month days, as shown in the version on the left. To completely hide the other month days, make the text, link, and hover colors match the other month days background color (as shown above). Tip If the other month background is transparent, type transparent in the text, link, and hover color fields to make the text transparent as well.

Enable/disable event popups

As the two examples below demonstrate, you have two options for setting up Date Finder interactions.

No popups In this spud, popups are disabled. When a visitor pauses the cursor over a date with events: The date is underlined indicating a link. Clicking the link displays that date's events in the main calendar.

With popups In this spud, popups are enabled. When a visitor pauses the cursor over a date with events: The date is underlined indicating a link and a popup opens that lists events on that date. Clicking the date link displays that date's events in the main calendar. Clicking an event title (outlined in red) in the popup opens that event's detail page. Can I customize the way the popup looks?.

How to enable/disable popups

The popup associated with the Date Finder is actually a Day Summary spud that you can customize.

You disable popups by changing the Date Finder popup details spud from Day Summary to None.

Where can I learn more about the Day Summary spud?

The following instructions assume that you already published the calendar for which you're customizing the Date Finder spud.

Bad assumption. I need help publishing a calendar.

To enable/disable popups

1. In the editing environment, make the published calendar active. Click Publish Settings.
2. In the Publishing Control Panel, click the Promotion Spuds tab.
3. In the Date Finder section, click Edit Settings & Styles.
4. On the Edit Settings... page, click the Settings tab.
5. For Popup details spud:

   

   • If you want popups enabled, leave Day Summary selected.
   • If you want to disable popups, select None.
6. At the bottom of the tab, click OK.

Use custom images for paging buttons

If you select Images (rather than Buttons) on the Paging Buttons tab, the Paging Buttons section appears in the Date Finder spud (on the Settings tab):

Using custom images for the paging buttons on the Date Finder spud may make sense if you have your own images available and/or you want to tailor the button style to your website style.

Otherwise, we recommend that you instead set up built-in paging buttons, which apply automatically and globally wherever they're displayed, including on the Date Finder spud. For more information, go to: Paging Buttons tab.

To use custom images for the paging buttons on the Date Finder spud:

1. From the Publishing Control Panel, click the Promotion Spuds tab. Under the Promotion Spuds section, go to the Date Finder spud, and then click Edit Settings & Styles.
2. On the Settings tab, under the Paging Buttons section, select the common paging button images you want from the Previous month and Next month fields.

   Click the blue down arrows to display the available, common paging button image choices. The paging button options are preceded by "Icon: Next Page" or "Icon: Previous Page" in the list; the default is "Icon: Previous Page Tiny (9x11)" and "Icon: Next Page Tiny (9x11):

   

   To switch to a different, common size, select the size you want from the drop-down list.

   Tip You might have to click a More images link to see the other default sizes.

3. To replace the default button with your own custom image, click New to select an image you already uploaded or to upload or link to a new one.

   

   I need help using the image field controls.

   Tip Before you upload a paging button image, be sure to set the image to an appropriate size. For guidance, use the width x height pixel dimensions of the default icons that are displayed along with the icon names. The default images for the Date Finder spud, for example, are 9X11 pixels.

4. To preview your icon settings, at the bottom of the tab, click Preview.
5. When you're satisfied with your paging button choices, click OK.