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

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.

Monthly exposed date filter

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?

1 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 id="year" name="year">

<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");
  • I had to change this line of code in your example to make it work: location.href = Drupal.settings.basePath + 'VIEW_URL/' + year + '-' + month; Also notice you can use the function date_month_names() to get the current language version of each month.
    – Roger
    Jun 27, 2017 at 8:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.