--- schema_version: "1" id: 36975f0dec7ad4c21576607aa4cd7574180889b0fdd84e2f2e69096c7df29451 title: Customize the Job Calendar Page collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/sfdo/264-0-0/v4s_setup_customize_job_calendar.md canonical_url: https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_calendar.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: fd988157a51690c3cbd2f7cf1f3657489fc1ff4be1472b27293f356fec59d6bc description: Customize the contents of the Job Calendar page, and make it look and feel like an integral part of your website. products: - Nonprofit release: "264" --- # Customize the Job Calendar Page Customize the contents of the Job Calendar page, and make it look and feel like an integral part of your website. - **[Style the Job Calendar Page with CSS](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_calendar.htm&release=264.0.0&type=5)** 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. - **[Change the Job Calendar Color Scheme](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_calendar.htm&release=264.0.0&type=5)** 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. - **[Customize the Job Calendar's Link Text and Styling for Past Shifts](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_calendar.htm&release=264.0.0&type=5)** 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. - **[IFRAME Tag for the Job Calendar Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_calendar.htm&release=264.0.0&type=5)** 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. - **[Supported URL Parameters for the Job Calendar Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_calendar.htm&release=264.0.0&type=5)** 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. ## 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](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_volunteer_signup.htm&release=264.0.0&type=5 "Customize the contents of the Volunteer Signup page, and make it look and feel like an integral part of your website."), making sure that you edit the JobCalendarCSS.css file. Here's how the page looks with minimal styling. ![Job Calendar page with minimal styling](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/volunteers_for_salesforce/images/pages_job_calendar.png) ## 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](https://www.w3schools.com/colors/colors_names.asp) 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/images/icon_note.png) 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](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_translate.htm&release=264.0.0&type=5 "To help Volunteers for Salesforce speak the language of your volunteer program, you can replace the existing onscreen text (labels) with alternate text that uses your organization's terminology. Or you can translate all terms in the app into another language.") 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: ```html ``` Sample IFRAME in HTTPS format: ```html ``` 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](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5 "Customize the contents of the Volunteer Job Listing page, and make it look and feel like an integral part of your website."). 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](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5 "Customize the contents of the Volunteer Job Listing page, and make it look and feel like an integral part of your website.") - [Customize the Volunteer Job Listing Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5 "Customize the contents of the Volunteer Job Listing page, and make it look and feel like an integral part of your website.") . . . 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
Note We repeat this listing of the same parameter from VolunteersJobListingFS to highlight the small differences in how the Job Calendar displays the information.