HTML Custom Input type for schedule

Question

I'm looking for a way to input a 'schedule' for a task from a user of a web app I'm working on, and have it be used on multiple pages in my UI.

I was looking for something that would allow me to configure whether was manually triggered, run monthly/weekly/daily/hourly, etc. and then based on the configured frequency show subfields, like day of month for monthly + time of day, day of week for weekly + time of day, just time of day for daily, etc.

I was thinking I could just use multiple select fields, and use Javascript to hide/show the appropriate subfields when the selected frequency indicated I didn't need them. However, since I want to use this on multiple pages, I don't want to have to do a copy of a bunch of stuff between pages if there's a better way to do this.

Internally, it'll likely be converted to crontab format and use Spring to do the scheduling, but I don't want to display crontab format in a text box, because of its lack of user friendliness.

Anyone have any suggestions? I'm using Struts 2 for the UI, and am not using any Javascript library for anything. Not sure if this is the type of thing something like jQuery would make easy, or what.

Thanks.

Answer 1

jQuery is an option because it makes event handling consistent across browsers, however, writing a simple function that does it is across all browsers in a concise manner is fairly trivial too, so just for this widget I wouldn't recommend creating a dependency on jQuery.

Oh, and think of the input type as a widget or component with a decent public interface that you can just instantiate and embed in any page that needs it. Take a look at how most web calendaring solutions like Google Calendar achieve it, since they need to account for periodical events too, and still keep it simple for the end users. They have a solution to the UI problem of getting really complex recurring times such as:

• Every 5 years on July 13
• Every 2 months on the second Tuesday
• Weekly on Tuesday, Wednesday
• Every 4 days

in a simple manner for an end user. Here are a few examples:

Yearly repetition with a custom step size

Monthly repetition with a custom step size on a certain day of the month

Use a self-contained script file that contains the widget, let's say ScheduleWidget.js that you can reference on each page that needs it, or maybe it gets bundled in a minified/packed script, so all pages have access to it.

Keep the interface simple, so with minimal effort it can be inserted into any DOM element.

var widget = new ScheduleWidget();
var container = document.getElementById("scheduleContainer");
// getElement() returns the root DOM node of the dynamically constructed widget.
container.appendChild(widget.getElement());

When the ScheduleWidget object is instantiated, it sets up all event bindings so list selection, changes, etc. trigger a change in the logic/UI as needed.

Answer 2

OK, so I ended up using the Struts 2 component tag and just passing parameters to that to generate the appropriate code with different names. This worked the best for me since using this I was still able to nest Struts 2 tags and I'm not sure if I would have been able to do that by defining my own taglib.

Answer 3

My Question: My eyes is Bleed