CINXE.COM

<!DOCTYPE html> <html lang="en">  <head> <meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> <title> Events - Pierce County Library System </title> <link rel="shortcut icon" href="/images/favicon/piercecounty/ICON_1color_280C.png" type="image/x-icon" /> <link rel="icon" href="/images/favicon/piercecounty/ICON_1color_280C.png" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="client" content="piercecounty"> <meta name="location" content=""> <meta name="apiserver" content="https://api-us.communico.co"> <meta name="region" content="us"> <meta name="location-id" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">  <link href='/css/animate.css' rel='stylesheet' type='text/css' /> <link href='//cdnjs.cloudflare.com/ajax/libs/rome/2.1.14/rome.min.css' rel='stylesheet' type='text/css' /> <link href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css' /> <link href='/css/amfont.css' rel='stylesheet' type='text/css' /> <link href='//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css' rel='stylesheet' type='text/css' /> <link href='//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' rel='stylesheet' type='text/css' /> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css' /> <link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css' rel='stylesheet' type='text/css' /> <link href='//cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css' rel='stylesheet' type='text/css' /> <link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css' rel='stylesheet' type='text/css' /> <link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css' rel='stylesheet' type='text/css' /> <link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css' rel='stylesheet' type='text/css' /> <link href='//cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.min.css' rel='stylesheet' type='text/css' /> <link href='/css/shared.css' rel='stylesheet' type='text/css' /> <link href='/css/anywhere.css?version=2.36.2' rel='stylesheet' type='text/css' /> <link href='//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.1.0/css/intlTelInput.css' rel='stylesheet' type='text/css' /> <link id='contrastsheet' href='' rel='stylesheet' type='text/css' /> <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' ></script> <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js' ></script> <script type='text/javascript' src='//cdn.jsdelivr.net/bluebird/3.5.0/bluebird.min.js' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js' ></script> <style> .err404 { background-image: none !important; } .err404-map { display: none; } .err404 div { margin-left: 30px !important; } #body > div > div.row.events-filter-row:after{ } </style><script> $(document).ready(function(){ try{ (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:894191,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); //20241115.3 (function ($) { $(document).ready(function () { //OCR issue 108 and 117 - keyboard accessibility for Clear Filters link and branch hours prev/current/next links //OCR issue 115 (partial) - keyboard accessibility for close link in filter menus $('.events-filter-clear, .prev_openingtimes, .curr_openingtimes, .next_openingtimes, .events-filter-close').attr({'tabindex': '0', 'role': 'link'}).on('keyup', function (e) { if (e.key === 'Enter') { $(this).trigger('click'); } }); //OCR issue 111 (in progress) - skip link to skip filtering options and get straight to event list $('<div><a id="skip_filters" class="pcl-skiplink" href="#skip_target">Skip to event list</a></div>').insertAfter('#eventsearch'); $('<div id="skip_target" class="pcl-skiptarget sr-only" tabindex="-1">Filtering options skipped</div>').insertBefore('.events-page .events-right'); $("#skip_filters").click(function () { $("#skip_target").focus(); }); //OCR issue 115 (partial) - filter menu accessibility //adjust menu div to have appropriate aria attributes, and add elements to help manage keyboard focus lock $('.events-filter-section') .attr({'role': 'dialog', 'aria-modal': 'true', 'aria-label': 'filter menu'}) .prepend('<div class="pcl-focuslock pcl-firstfocusable sr-only" tabindex="0"></div><div class="pcl-modalfocus" tabindex="-1"></div>') .append('<div class="pcl-focuslock pcl-lastfocusable sr-only" tabindex="0"></div>'); //set close link descriptive text, and set button to aria-expanded="false" when clicked: $('.events-filter-close') .append('<span class="sr-only">聽filter menu</span>') .on( 'click', function (e) { //this sets aria-expanded="false" on all the filter buttons, which is fine since only one is open at a time $('.events-option-dropdown[data-show-filter]').attr('aria-expanded', 'false'); //place focus on the button that triggered the modal $('.events-option-dropdown[data-show-filter="' + $(this).attr('data-pcl-filter') + '"]').trigger('focus'); }); //when focus is somewhere inside the menu, esc key closes the menu: $('.events-filter-section').on('keyup', function (e) { if (e.key === 'Escape') { $(this).find('.events-filter-close').trigger('click'); } }); //filter button accessibility: // Button given aria-haspopup="dialog", and aria-expanded set to true or false depending on menu visibility // On button activation (if menu is not yet open): // (a) Ensure the menu that opens has descriptive aria-label; // (b) Ensure all menu buttons have correct aria-expanded; // (c) Set focus to an element inside the menu. $('.events-option-dropdown[data-show-filter]') .attr({'aria-haspopup': 'dialog', 'aria-expanded': 'false'}) .on( 'click', function (e){ if ( $(this).attr('aria-expanded') == 'false') { //if the menu isn't open: var filterClass = $(this).attr('data-show-filter'); //grab the identifying class of the menu that will open var filterClassSplit = filterClass.split('-'); //split so we can pull the specific filter from it (location, age, or type) $( "." + filterClass).attr('aria-label',filterClassSplit[1] + " filter menu"); //give the menu a descriptive aria-label that includes which filter it is $( "." + filterClass + " .events-filter-close").attr('data-pcl-filter', filterClass); //this will make it easier to set focus back on the button when menu is closed $('.events-option-dropdown[data-show-filter]').attr('aria-expanded', 'false'); //make sure all other buttons say their menus are closed $(this).attr('aria-expanded', 'true'); //make sure this button says its menu is open //Give any other click events the opportunity to fire, so that: // (a) the menu is visible before setting focus to an element inside it, and // (b) stopping propagation of the click event will *only* prevent the newly-focused link from being activated, and not block any needed handlers setTimeout( function(){ //e.stopImmediatePropagation(); // (not working) prevent the current click event from activating the newly-focused close link and immediately closing the menu $( "." + filterClass + " .pcl-modalfocus").trigger('focus'); //set focus to the first element in the open menu }, 0); } else { //if the menu is already open when the click occurs, it will be closed, so: $(this).attr('aria-expanded', 'false'); //make sure the button says it's closed } }); //when user tabs past end of the filter list, loop back to top (focus lock) $('.pcl-lastfocusable').on('focus', function (e) { //this element receives focus when user tabs past the last checkbox $(this).siblings('.events-filter-close').trigger('focus'); //set focus to the close link at the top }); //TODO: when user shift-tabs past top of filter list, loop back to bottom (focus lock) //OCR issue 116 - skip links for map and event list (in progress) //$('iframe[src*="google.com/maps"]').each(function (index) { // $('<div><a id="skip_map_' + index + '" class="pcl-skiplink" href="#after_map_' + index + '">Skip map</a></div>').prependTo(this); // $('<div id="after_map_' + index + '" class="pcl-skiptarget sr-only" tabindex="-1">Map skipped</div>').insertAfter(this); // $("#skip_map_" + index).click(function () { // $("#after_map_" + index).focus(); // }); //}); //OCR issue 118 - logical tab order for Add to Calendar links setTimeout( function() { // setTimeout helps this run after addtocalendar.com code creates the .atcb-link elements $('.atcb-link').attr('tabindex', '0'); }, 28); //OCR issue 123 - alt text for branch images // pulls something that is usually the branch name from the filename of the img src attribute... not ideal //var imgElement = $('.locimg'); //var imgSrcSplit = imgElement.attr('src').split('/'); //var imgSrcSplit2 = imgSrcSplit[imgSrcSplit.length - 1].split('.'); //imgElement.attr('alt','Photo of ' + imgSrcSplit2[0] + ' Pierce County Library'); // applies a blanket alt to all branch photos - also not ideal, but at least you won't risk // generating alt text like "Photo of icon_2_color_180x180 Pierce County Library" $('.locimg').attr('alt','Library location photo'); }); })(jQuery); } catch (e) { if (console) console.log('custom js error', e); } }); </script><script> window.addEventListener('WebComponentsReady', function() { var components = [ 'coAddress', 'coBirthdate' ]; for(var c=0;c<components.length;c++) { var link = document.createElement('link'); link.setAttribute('rel', 'import'); link.setAttribute('href', '/js/es6/components/' + components[c] + '/' + components[c] + '.html'); document.getElementsByTagName('head')[0].appendChild(link); } }); </script><link id='customstyle' href='/css/style/1322' rel='stylesheet' type='text/css' />    <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-9846192-1', 'auto'); ga('send', 'pageview'); ga('set', 'userId', 'piercecounty'); </script> <script> ga('create', 'UA-121068198-1', 'auto', {'name': 'clientTracker', 'allowLinker': true}); ga('clientTracker.require', 'linker'); ga('clientTracker.send', 'pageview'); </script> </head> <body> <a class="skip-main" href="#body">Skip to main content</a> <div id="header"> <div class='hidden-md hidden-lg content' id='responsiveheader'><div id='responsiveheaderaltmessage'><p></p></div><div id='responsiveheaderimage'></div><div id='responsiveheadermessage'><p></p></div></div> <div id="htmlheader"> <h4 style="text-align: center;"></h4> <div class="fixed-width"> <div id="top_nav"> <ul> <li><a href="https://mypcls.org/">Main Website</a></li> <li><a href="https://polariscatalog.piercecountylibrary.org/">Library Catalog</a></li> <li><a href="https://polariscatalog.piercecountylibrary.org/polaris/patronaccount/default.aspx">Log In</a></li> </ul> </div> <div id="logo-container"><span><a href="https://mypcls.org/"><img id="pcl-logo" src="https://piercecounty.libnet.info/frontend-images/tile/piercecounty/Web-Assets/logo-2color-400px.jpg" alt="Pierce County Library System Logo" width="220px"></a></span></div> <div id="navbar" class="navbar"> <div class="navbar yamm navbar-top"> <div class="navbar-header visible-xs nav-mobile"><span class="burger-button" data-toggle="collapse" aria-hidden="true" data-target="#navbar-collapse-grid"><i class="fa fa-bars"></i></span></div> <div id="navbar-collapse-grid" class="navbar-top navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="https://mypcls.org/get-started/">Get Started</a></li> <li><a href="https://mypcls.org/visit-the-library/">Visit the Library</a></li> <li><a href="https://mypcls.org/learn-explore/" style="cursor: default;">Learn & Explore</a></li> <li><a href="https://calendar.piercecountylibrary.org/events">Attend</a></li> <li><a href="https://mypcls.org/get-involved/">Get Involved</a></li> </ul> </div> </div> </div> </div> <div id="separator"></div> </div> </div> <div class="content"></div> <div id="accessibility" class="content"> <div class='accessibility-topbar'> <a class="button" href="#" onclick="openAccessibility()">close</a> </div> <div class="fluid-container"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-sm-6"> <div class='accessibility-icons'> <a href="#" onclick="document.body.style.fontSize='100%';return false;"><img border="0" src="/images/accessibility/accessibility-a-small-icon.png" alt="font 1"></a> <a href="#" onclick="document.body.style.fontSize='140%';return false;"><img border="0" src="/images/accessibility/accessibility-a-medium-icon.png" alt="font 2"></a> <a href="#" onclick="document.body.style.fontSize='160%';return false;"><img border="0" src="/images/accessibility/accessibility-a-large-icon.png" alt="font 3"></a> <br /> <a href="#" onclick="document.body.style.fontSize='100%';return false;">Reset to standard size</a> </div> </div> <div class="col-sm-6"> <div class='accessibility-text'> <span class='accessibility-heading'>Font size options</span> <div>Increase or decrease the font size for this website by clicking on the 'A's.</div> </div> </div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-sm-6"> <div class='accessibility-icons'> <a href="#" onclick="setStyleSheet('/accessibility.pcss?style=yellow%20on%20black')"><img border="0" src="/images/accessibility/accessibility-contrast-y-b.png" alt="Yellow on Black"></a> <a href="#" onclick="setStyleSheet('/accessibility.pcss?style=white%20on%20black')"><img border="0" src="/images/accessibility/accessibility-contrast-w-b.png" alt="White on Black"></a> <a href="#" onclick="setStyleSheet('/accessibility.pcss?style=soft%20greys')"><img border="0" src="/images/accessibility/accessibility-contrast-softgreys.png" alt="Soft Greys"></a> <a href="#" onclick="setStyleSheet('/accessibility.pcss?style=black%20on%20linen')"><img border="0" src="/images/accessibility/accessibility-contrast-b-l.png" alt="Black on Linen"></a> <a href="#" onclick="setStyleSheet('/accessibility.pcss?style=black%20on%20white')"><img border="0" src="/images/accessibility/accessibility-contrast-b-w.png" alt="Black on White"></a> <br /> <a href="#" onclick="setStyleSheet('')">Reset to default contrast</a> </div> </div> <div class="col-sm-6"> <div class='accessibility-text'> <span class='accessibility-heading'>Contrast options</span> <div id="accessibilityText">Choose a color combination to give the most comfortable contrast.</div> </div> </div> </div> </div> </div> </div> </div> <div id='body' class="content default events-page "> <div class="events bodysize content"></div> <script type="text/javascript"> $(document).ready(function() { $('.events').amEvents({ client: 'piercecounty', timezone:'America/Los_Angeles', type:'0', locations:[], excludedLocations: [], view:'list', range:'today', term:'', end: '', start: '', apiServer:'https://api-us.communico.co', eventsGroupCalenderBAge:false, eventsCalendarShowCancelledEvents:true, filterMaxItems: '15', private:false, types:[], excludedTypes:[], ages:[], excludedAges:[], showBrochure: false, showRSS: false, showICAL: false, singleBranch: false, limitWaitlist: false, customEventsLabel: "events", customEventLabel: "event", allowSubs: true, allowWaitlistSubscription: false, customInterestedText: "Notify Me", brochureNoPopup: false, showImagesInListGrid: false, testMode: 0, duration: '' }); }); </script> </div> <div id="footer">  <div id='footer'> <div id="pcls-footer" class="clearfix"> <div id="footer-left" class="footer-column"> <a href="#"><img class="pcl-logo" src="https://piercecounty.libnet.info/frontend-images/tile/piercecounty/Web-Assets/PCLS_LOGO_White.png" alt="PCLS Logo" title="PCLS Logo" width="250"></a> <h4>Subscribe To Our Newsletter</h4> <form id="newsletter" class="clearfix" action="https://piercecountylibrary.us1.list-manage.com/subscribe/post"> <input type="hidden" value="2a045ea6e4345625b10f9497c" name="u"> <input type="hidden" value="25f83c7c90" name="id"> <input type="text" class="form-control" placeholder="Email" name="MERGE0"> <input type="submit" class="button" value="Submit"> </form> <h4><a href="https://pubweb.mypcls.org/mobile-app/">Download the Library App</a></h4> </div> <div id="footer-right" class="footer-column"> <div id="footer-buttons"> <h4>Donate To Library Services</h4> <h4><a class="button" href="https://host.nxt.blackbaud.com/donor-form/?svcid=renxt&formId=0510c8a8-6be1-46ac-ba76-2e62fd1c85cd&envid=p-ooZuF_tXZkGenJjgQBiTAg&zone=usa">Donate</a></h4> <h4>Search For Open Jobs</h4> <h4><a class="button" href="https://jobs.silkroad.com/PierceCountyLibrary/Careers/">Careers</a></h4> </div> <ul id="footer-link-list"> <li><a href="https://pubweb.mypcls.org/contact-us/">Contact Us</a></li> <li><a href="https://pubweb.mypcls.org/about-us/">About Us</a></li> <li><a href="https://pubweb.mypcls.org/policies/">Policies</a></li> <li><a href="https://pubweb.mypcls.org/library-news/">Library News</a></li> </ul> </div> </div> <div id="footer-address"><span>Pierce County Library System<br>3005 112th St. E. Tacoma, WA 98446-2115<br>Washington Relay TTY: 711</span></div> </div> </div> <div id="default_footer"> <a class='sideload' href='/privacy'>Privacy and cookie policy</a> | <a href='#' onclick='openAccessibility()'>Accessibility</a> | <a href='http://communico.co'>Communico</a><br/><br/> <span style='font-size:80%'>Connected content from Communico. © 2024.</span> </div> <script type='text/javascript' src='/js/lib/jquery.shapeshift.min.js?v=1265' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js' ></script> <script type='text/javascript' src='/js/am-shared.js?v=1265' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js' ></script> <script type='text/javascript' src='/js/lib/bootstrap-timepicker.js?v=1265' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js' ></script> <script type='text/javascript' src='/js/lib/jquery.cycle2.min.js?v=1265' ></script> <script type='text/javascript' src='/js/jquery.tweet.min.js?v=1265' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.2/jquery.dotdotdot.min.js' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/rome/2.1.14/rome.min.js' ></script> <script type='text/javascript' src='/js/jquery.zrssfeed.min.js?v=1265' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js' ></script> <script type='text/javascript' src='/js/lib/jquery.cookie.min.js?v=1265' ></script> <script type='text/javascript' src='/js/lib/json3.min.js?v=1265' ></script> <script type='text/javascript' src='/js/am-events-listings.js?v=1265' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery.payment/3.0.0/jquery.payment.min.js' ></script> <script type='text/javascript' src='/js/am-reserve-booker.v3.js?v=1265' ></script> <script type='text/javascript' src='/js/am-reserve-room.v3.js?v=1265' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js' ></script> <script type='text/javascript' src='/js/am-room-info.js?v=1265' ></script> <script type='text/javascript' src='/js/am-room-picker.js?v=1265' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.4.1/moment-timezone-with-data.min.js' ></script> <script type='text/javascript' src='/js/am-reserve-picker.v3.js?v=1265' ></script> <script type='text/javascript' src='/js/am-subscriptions.js?v=1265' ></script> <script type='text/javascript' src='/js/am-subscriptions.js?v=1265' ></script> <script type='text/javascript' src='/js/am-channel.js?v=1265' ></script> <script type='text/javascript' src='/js/card-signup.js?v=1265' ></script> <script type='text/javascript' src='/js/custom.js?v=1265' ></script> <script type='text/javascript' src='/js/es6/dist/coUtilsComp.js?v=1265' ></script> <script type='text/javascript' src='/js/es6/dist/coEventBillingComp.js?v=1265' ></script> <script type='text/javascript' src='/js/es6/coRooms/coRooms-comp.js?v=1265' ></script> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.min.js' ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/custom-elements-es5-adapter.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js"></script> <script type="text/javascript"> $(function () { var accessibilityText = ''; switch (document.querySelector('meta[name=region]').content) { case 'us': accessibilityText = 'Choose a color combination to give the most comfortable contrast.'; break; default: accessibilityText = 'Choose a colour combination to give the most comfortable contrast.'; break; } document.getElementById('accessibilityText').innerText = accessibilityText; }); </script> </body> </html>