The Calendar Website Widget provides a calendar view of all your opportunities for volunteers to browse on your volunteer landing page or on your main website.
Please note: You may need your web developer to assist with the process to add "code" to a page if you choose to add it to your main website. VolunteerLocal is not able to do this for you as we cannot access your website.
Add Calendar Widget to your VolunteerLocal landing page
Step 1:
In VolunteerLocal, navigate to Account > Settings and expand the section labeled "Landing Page Options"
- Scroll to the following setting and enable the toggle 'Show a calendar (grid style) of all shifts
- Click Save Landing Page Options
Step 2:
Ensure your Events/Programs have Shift Visibility enabled
- Open the "Edit Detail" page for the event(s)/program(s) and update the Shift visibility setting:
Add Calendar Widget to your External / Main Website
Step 1:
In VolunteerLocal, navigate to Account > Settings and expand the section labeled "Calendar Website Widget". There are two pieces of code that will be copied to make this work.
- the first code block is the container that will hold the calendar itself
- the second code block is the script that does all the work of getting shifts for the calendar
Step 2:
Decide which webpage will present the calendar view and open the HTML editor for that page*.
Within the HTML editor** you will paste the code reviewed in Step 1.
(a) Copy the container code and paste it on the webpage exactly where you want the calendar to appear.
(b) Copy the script code and paste it near the bottom of the page, but inside the </body> (closing 'body' tag). You are also welcome to paste the script code at the top of the page in the <head> element.
* Tip/suggestion: test this process on webpage that is not part of your website - for example, create a stand-alone page that can be deleted later.
** When pasting code, the HTML editor will need to be in an "HTML view" or "HTML mode" to properly handle the pasted code. If the editor is in a visual or design mode, this will not work.
Step 3:
Save the changes in the HTML editor and reload/refresh the webpage (the public view).
You should see a calendar with your upcoming shifts - if so: congrats, you did it!
If you do not see your shifts, it is possible the events/programs are not set to allow shift previews. Open the "Edit Detail" page for the event(s)/program(s) and update the Shift visibility setting: