Summary Block Date Filter

Description

adding date slider range filter on Summary Block (Events)
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. Hover on top right of section where you use Summary Block Event > Click EDIT SECTION

at Design > Anchor Link > enter word: summary-date-filter

#1.2. Hover on Page where you use Summary Block Event > Click Gear icon

Click Advanced > Paste this code

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 06.26c11v1 Summary Block Date Range Filter -->
<script>
window.SummaryDateFilterConfig = {
  filterBarSelector: 'section[id*="summary-date-filter"]',
  label: 'Filter by Date',
  fontSize: '13px',
  marginBottom: '24px',
  sliderMinWidth: '200px',
  trackColor: '#9a5151',
  activeTrackColor: '#000',
  handleColor: '#9a5151',
  labelColor: '#9a5151',
};
</script>
<script src="https://code.beaverhero.com/summaryblock/0626c11v1summaryblockdatefilter.js"></script>

#2. Customize

#2.1. To change text “Filter by Date”, change Line 05

label: 'Filter by Date',

#2.2. To change size of text “Filter by Date” & Date range text, change Line 06

fontSize: '13px',

#2.3. To change style of Slider, change Line 08 to Line 12

sliderMinWidth: '200px',
trackColor: '#9a5151',
activeTrackColor: '#000',
handleColor: '#9a5151',
labelColor: '#9a5151',

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Block under Summary Block

Choose Markdown

Add this code into Markdown

<script>
window.SummaryDateFilterConfig = {
  filterBarSelector: 'section[id*="summary-date-filter"]',
  label: 'Filter by Date',
  fontSize: '13px',
  marginBottom: '24px',
  sliderMinWidth: '200px',
  trackColor: '#9a5151',
  activeTrackColor: '#000',
  handleColor: '#9a5151',
  labelColor: '#9a5151',
};
</script>
<script src="https://code.beaverhero.com/summaryblock/0626c11v1summaryblockdatefilter.js"></script>