Reefine filter events by month

reefine-filter-events-by-month.html

{exp:reefine
	channel="event"
	filter:type:category_group="1"
	filter:type:join="none"
	filter:month:type="month_list"
	filter:month:fields="event_from|event_to"
	filter:month:join="none"
	filter:month:where_after="{current_time}"
	parse="inward"
	url="/{segment_1}/{type}/{month}"
}

      <div class="left-panel" role="search">
  	<form method="get" action="/{segment_1}">
      	<h3>Calendar</h3>
        <div class="select-filter">
        <fieldset>
            <label id="month_label" for="month_select">Filter by month</label>
            <select name="month" id="month_select" aria-describedby="month_label month_select">
			<option value="">Any month</option>
			{month}
			{filters}<option value="{filter_value}" {if filter_active}selected{/if}>{filter_title} ({filter_quantity})</option>{/filters}
		  {/month}
            </select>
        </fieldset>
        <fieldset>
            <label id="type_label" for="type_select">Filter by type</label>
            <select name="type" id="type_select" aria-describedby="type_label type_select">
			<option value="">Any type</option>
			{type}
			{filters}<option value="{filter_value}" {if filter_active}selected{/if}>{filter_title} ({filter_quantity})</option>{/filters}
		  {/type}
            </select>
        </fieldset>
        <button type="submit" class="apply-filter filter1">Apply Filter</button>
        <a href="/{segment_1}" class="apply-filter filter2 selected">Show All</a>
        </div>
      </form>
      </div>
	  <div class="centre-panel generic calendar" role="main">
          <table class="calendar-list" border="0" cellspacing="0" cellpadding="0" role="presentation" >
	  	<thead>
              <tr>
                <th><em>Event</em></th>
                <th>Date</th>
                <th>Type</th>
              </tr>
		</thead>
		<tbody>
		  {entries}
			{exp:channel:entries entry_id="{entry_ids}" 
			disable="category_fields|member_data" 
			dynamic="no" orderby="event_from" sort="asc" status="not closed" limit="20" paginate="yes"}
              <tr>
                <td><h2>{if page_content==''}{title}{if:else}<a href="/{segment_1}/event/{url_title}">{title}</a>{/if}</h2></td>
                <td><strong><span aria-label="Event dates"></span>{event_from format="%d/%m/%Y"} {if event_to!="" AND "{event_from format='%d/%m/%Y'}"!="{event_to format='%d/%m/%Y'}" } - {event_to format="%d/%m/%Y"}{/if}</strong></td>
                <td><strong><span aria-label="Event type"></span>{categories backspace="2"}{category_name} / {/categories}</strong></td>
              </tr>
			  {paginate}<tr><th colspan="3" class="paging">Page {current_page} of {total_pages} pages {pagination_links}</th></tr>{/paginate} 
		  {/exp:channel:entries}
		  {/entries}
			</tbody>
		</table>

	  </div>
      <div class="clear-float"></div>          
   </div>
{/exp:reefine}