Is there a way to use some degradable javascript wizardry to change the values of the event end date/time based upon the values that the user has selected for the event start?

For example, when I'm creating events far into the future, I'd like the event end form values to automatically set themselves based upon what I've just entered in the event start fields. Not sure on the logic, but it would make sense to set the end time equal to the start time (or +1 hour) as a default.

OR......

What about a javascript function that would require user action to set the event end time? The user would select the start time, and then choose from one of several default event durations to automatically set the event end form values.

MOCKUP:

-----------------------------------
| Start time form fields |
-----------------------------------

Set event duration: 1 hour 2 hours 3 hours ... (links to javascript calls)

-----------------------------------
| End time form fields |
-----------------------------------

Comments

Owen Barton’s picture

Owen Barton CreditAttribution: Owen Barton commented

If you want to use javascript to do this it's pretty easy. Add the following code:

function setDuration(minutes) {
  year = parseInt(document.getElementById('edit-startyear').value);
  month = parseInt(document.getElementById('edit-startmonth').value) - 1; // JS months start from 0;
  day = parseInt(document.getElementById('edit-startday').value);
  hour = parseInt(document.getElementById('edit-starthour').value);
  minute = parseInt(document.getElementById('edit-startminute').value) + parseInt(minutes); // Make adjustment
  var endDate=new Date(year, month, day, hour, minute, 0, 0);
  document.getElementById('edit-endyear').value = endDate.getFullYear();
  document.getElementById('edit-endmonth').value = endDate.getMonth() + 1; // JS months start from 0
  document.getElementById('edit-endday').value = endDate.getDate();
  document.getElementById('edit-endhour').value = endDate.getHours();
  document.getElementById('edit-endminute').value = endDate.getMinutes();
}

To event.js (or your theme)

You can then add buttons under the 'End' controls (event_nodeapi) in event.module:

          $form .= t('Set Duration: '); 
          $form .= form_button(t('1 hour'), 'duration-60', 'button', array('onclick'=>'setDuration(60)'));
          $form .= form_button(t('90 minutes'), 'duration-90', 'button', array('onclick'=>'setDuration(90)'));
          $form .= form_button(t('2 hours'), 'duration-120', 'button', array('onclick'=>'setDuration(120)'));

You could also do this in your theme if you prefer.

To add an event duration on theming on an event please see:
http://drupal.org/node/4072

If event.module maintainers are interested in a patch for this let me know.

killes@www.drop.org’s picture

killes@www.drop.org CreditAttribution: killes@www.drop.org commented
Status: Active » Closed (fixed)

This version of event.module is no longer supported. Please update your site. If the issue is still valid, don't hesitate to re-open it against a more recent version.