Event Page 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. Click Gear icon on Event Page

#1.2. Click Advanced > Page Header Code Injection

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

#1.3. Paste this code

<!-- 06.26c11v1 Event Page Date Filter -->
<script>
window.EventDateFilterConfig = {
  filterBarSelector: 'section[data-sqsp-section="events-list"]',
  filterMode: 'day',
  dayRangeDays: 180,
  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/event/0626c11v1eventpagedatefilter.js"></script>

#2. Customize

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

label: 'Filter by Date',

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

fontSize: '13px',

#2.3. To change style of Slider, change Line 10 to Line 14

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

#2.4. To change to Month mode, change line 05

filterMode: 'day',

filterMode: 'month',

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Event Page > Add a Section > Add a Block

Choose Markdown

Then add this code into Markdown

<script>
window.EventDateFilterConfig = {
  filterBarSelector: 'section[data-sqsp-section="events-list"]',
  filterMode: 'day',
  dayRangeDays: 180,
  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/event/0626c11v1eventpagedatefilter.js"></script>