Calendar view: Making year+month exposed filter go to the right URL

Question

Using the calendar module, I've created a monthly calendar:

The built-in navigation using << Prev and Next >> links works great, and correctly navigate to the previous and next month, using URLs like: http://example.com/calendar?field_event_date_value[value][year]=&field_event_date_value[value][month]=&date=2014-07

The 2nd navigation is the year + month select lists. I got a requirement to navigate directly to a specific year and month using a dropdown selection. So I've added an exposed filter on the "Event: start date" field (see screen below), which tries to do it but the URL gets broken on the way. I get: http://example.com/calendar?field_event_date_value%5Bvalue%5D%5Byear%5D=2014&field_event_date_value%5Bvalue%5D%5Bmonth%5D=7. However, even if I manually fix the URLs displays empty data.

I tried to put a custom date selection form using this tip, but the form doesn't print. I also tried to create a custom submit handler like this in order to create a custom redirect but views behavior doesn't change. Also, changing the form action doesn't work since the target of the redirect depends on the user's selection and it still appends the extra query parameters.

Any idea on how to fix it?

Answer 1

I dunno but I ended up just doing it all manually with markup and JS, probably is an easier way but yeh:

<select id="month" name="month">
  <option id="01" value="January">January</option>
  <option id="02" value="February">February</option>
  <option id="03" value="March">March</option>
  <option id="04" value="April">April</option>
  <option id="05" value="May">May</option>
  <option id="06" value="June">June</option>
  <option id="07" value="July">July</option>
  <option id="08" value="August">August</option>
  <option id="09" value="September">September</option>
  <option id="10" value="October">October</option>
  <option id="11" value="November">November</option>
  <option id="12" value="December">December</option>
</select>

<select id="year" name="year">
</select>

<button id="gotomonth">Go</button>


$('#gotomonth').click(function() {
  var month = $("#month option:selected").attr('id');
  var year = $("#year option:selected").attr('id');
  location.href = year + '-' + month;
});

var currentMonth = ("0" + (new Date().getMonth() + 1)).slice(-2);
var currentYear = new Date().getFullYear();
for (i = (currentYear - 3); i < (currentYear + 3); i++) {
  $('#year').append('<option id="' + i + '" value="' + i + '">' + i + '</option>');
}
$('#month #' + currentMonth).attr("selected", "selected");
$('#year #' + currentYear).attr("selected", "selected");