Volunteer Service List View on separate pages

My goal is to have our church use the Volunteer Service module in Arena much more fully and allow our congregation to interact with the scheduling. We will be hiring a new Hospitality person soon and this provides an opportunity to sell this module again. I want a fresh look for the Members Responsive Portal that is uncomplicated.  mentioned that it would be helpful to have the Your serving opportunities and Future serving opportunities tabs separated and set on different pages. I agree. 

Here are the parts that work perfectly. The Volunteer Service List View Module is set on three pages. Below that an Advance HTML Module is added and a css style or css and javascript are saved.

1. To show only the Blackout Calendar and the Open Calendar Details button on a page copy and paste in Advance HTML Module:

<style>
[id$='RadAjaxPanel1'] > div > div > div:nth-child(3), div.row.col-lg-12, div.tab-content {
display: none;
}
</style>

2. To show only the Your serving opportunities on a page copy and paste in Advance HTML Module:

<style>
[id$='RadAjaxPanel1'] > div > div > div:nth-child(-n+3), div.row.col-lg-12 > ul > li:nth-child(2), div[id$='RadGrid2'] {
display: none;
}
</style>

3. To show only the date range date pickers and the Future serving opportunities on a page copy and paste in Advance HTML Module: 

<style>
[id$='RadAjaxPanel1'] > div > div > div:nth-child(-n+2), div.row.col-lg-12 > ul > li:nth-child(1), div[id$='RadGrid1'] {
display: none;
}
</style>

<script type="text/javascript">
// Show second tab on page load
$("div[id$=RadAjaxPanel1] > div > div > div.row.col-lg-12 > ul > li:nth-child(1)").removeClass("active");
$("div[id$=RadAjaxPanel1] > div > div > div.row.col-lg-12 > ul > li:nth-child(2)").addClass("active");

// Show second tab-pane on page load
$("div[id$=RadAjaxPanel1] > div > div > div.tab-content > div#yourServing").addClass("fade out").removeClass("active");
$("div[id$=RadAjaxPanel1] > div > div > div.tab-content > div#futureServing").addClass("fade in").addClass("active");
</script>

The one challenge I haven't solved is keeping the future tab as active after dates are picked. As long as a person stays on the current month it looks great. 

Parents
No Data
Reply
  • Another page configuration is to show the Blackout Calendar and Detail Calendar button on one page and the From-To date pickers, Your serving and Future serving tabs on a second page. The Blackout Calendar & Detail Calendar button script is listed above. To show just the bottom half of the page:

    <style>
    [id$='RadAjaxPanel1'] > div > div > div:nth-child(-n+2) {
    display: none;
    }
    </style>

Children
No Data
More Content