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
  • Would anyone have input on the javascript portion to keep the Future serving opportunities tab as the active and showing tab after using the date pickers and applying filter?

    Here is my attempt so far for, which needs help. I am trying to follow an example that works for hiding a button through pages changes that we have in place. 

    // Set second tab as active on Apply Date Filter

    $("body").on('DOMSubtreeModified', "div[id$=RadAjaxPanel1] > div > div > div.row.col-lg-12 > ul > li:nth-child()", function() {
    Running();
    });

    function Running(){
    console.log("Running");
    if($("div.row.col-lg-12 > ul > li:nth-child(1).active").length > 0){
    setTimeout(function(){
    SecondTabActive();
    },50);
    }
    }

    function SecondTabActive(){
    $("div[id$=RadAjaxPanel1] > div > div > div.row.col-lg-12 > ul > li:nth-child(1).active").html(function(){
    return $(this).html().removeClass("active");
    }).html(function(){
    return $(this).html().addClass("active");
    });
    }

    This is just for the tab itself. The same process needs to be done for the tab-panel also but I didn't want this to get too long. Once these are set the Volunteer Service List View can be presented to site guests on three separate pages. Thanks!

Children
No Data
More Content