Customize the Job Calendar Page

Style the Job Calendar Page with CSS

The Job Calendar page uses a cascading style sheet (CSS). Volunteers for Salesforce provides the JobCalendarCSS.css file as a Document in Salesforce. Customize the CSS with your own CSS styles so that the Volunteers for Salesforce part of the webpage matches the rest of your website's look and feel.

Follow the instructions provided for styling the Volunteer Signup form, making sure that you edit the JobCalendarCSS.css file.

Here's how the page looks with minimal styling.

Change the Job Calendar Color Scheme

In a given calendar month, each Job (and all of its Shifts) is displayed in a unique color. To change the color scheme, edit the color values that are stored in a custom label.

1. From Setup, enter Custom Labels in the Quick Find box, then select Custom Labels.
2. In the list of labels, find and then click labelColorValues.
3. Click New Local Translations/Overrides.
4. Select your language.
5. In the Translation Text field, enter all of the colors that Jobs can be assigned to. Specify colors by the names that are recognized by most Web browsers, such as PowderBlue or YellowGreen. Don't include spaces within the names, surround each name with double quotes, and separate names with commas.
6. Save your changes.

Each Job is uniquely assigned to a color and that color remains constant no matter which month of the calendar you're viewing the Job in. While you can control which colors are available, you can't control the color assignments—Volunteers for Salesforce assigns them automatically.

Note V4S runs code on the JobID to map it to one of the available colors, so Jobs can end up using the same color. If you want to change the color of a Job, you can play around with adding and removing color names from the custom label, to see if that gives you results you prefer.

Customize the Job Calendar's Link Text and Styling for Past Shifts

When someone clicks on a past Shift, or a Job with all Shifts in the past, Volunteers for SalesforceVolunteers for Salesforce displays the Job without a signup link. Instead, Volunteers for SalesforceVolunteers for Salesforce shows a message that there are no upcoming shifts and shows the date of the Job's first Shift.

You can customize the display of past Shifts to visually distinguish them from active Shifts.

• Change the text of the message by editing the custom label, labelEventInThePast. See Translate Volunteers for Salesforce into Other Languages or Customize Terminology for more information.
• Style past events differently by editing the CSS class, pastEvent, in the VolunteerJobListingCSS file.

IFRAME Tag for the Job Calendar Page

Give your web developer this IFRAME tag so they can insert the Job Calendar page into your website. Use the appropriate format for HTTP sites or secure HTTPS sites.

Sample IFRAME in HTTP format:

<iframe src="http://mydomain.force.com/yoursitelabel/GW_Volunteers__JobCalendar" 
    frameborder="0" scrolling="false" height="600" width="500"></iframe>

Sample IFRAME in HTTPS format:

<iframe src="https://mydomain.secure.force.com/yoursitelabel/GW_Volunteers__JobCalendar" 
    frameborder="0" scrolling="false" height="600" width="500"></iframe>

A few reminders to keep your code snippet clean:

• mydomain is a placeholder value for your domain name. Be sure to include your actual domain name in place of the placeholder text.
• yoursitelabel is a placeholder value for the Default Web Address. Include it only if you specified one when you created your Site.
• There are two underscore characters between Volunteers and JobCalendar.
• If you're using one or more URL parameters, add them to the end of the URL. Separate the first parameter from the rest of the URL with a ? character. Separate multiple parameters with the & character.

Supported URL Parameters for the Job Calendar Page

Use one or more of these optional URL parameters in your IFRAME tag to further customize how jobs and shifts are displayed in the Job Calendar.

For details about adding URL parameters to an IFRAME tag, see Customize the Volunteer Job Listing Page.

The Job Calendar supports all the URL parameters that are supported on both Job Listing pages. For the complete list of supported URL parameters for the Job Calendar, refer to the parameters in both of these sections . . .

• Customize the Volunteer Job Listing Page
• Customize the Volunteer Job Listing Page

. . . as well as these additional parameters that are specific to the Job Calendar page:

Name	Value	Description
CalendarView	agendaWeek agendaDay month (default)	Set the calendar's initial display format.
initialDate	Today's date (default) in the format yyyy-mm-dd	Set the calendar's initial display date. For example, setting this parameter to 2017-03-01 will set the calendar to display March 2017.
Print	0 (don't optimize; default) 1 (optimize)	Show the calendar in a view that's optimized for printing on a single page.
ShowNumberAvailable	0 (hide; default) 1 (show)	Show the number of volunteers confirmed and the number still available for each Shift. In a tooltip on the Shift when viewed in Month format. In the Shift when viewed in Week or Day format. Note We repeat this listing of the same parameter from VolunteersJobListingFS to highlight the small differences in how the Job Calendar displays the information.