My current project requires that a user can login and setup a weekly availability schedule and I've been thinking long and hard about the UX for inputing that data. It just donned on me that the best UI that I've seen, and used, in the wild to accomplish the same goal is the Scheduler in uTorrent. Here's a screenshot, for those that haven't used it.

Wondering if anyone knows of any JQuery plugins that I could leverage to accomplish this same look & feel.

  • Did you ever figure out a solution? I am needing exactly what you were looking for here. Dan Davidson over 6 years ago

3 answers

2
points

I haven't stumbled across a plugin that does that. Except for the paint mode on onMouseDown it's an easy behavior. I've set up a quick mockup for you here.

It's not finished but a start :)

If it's a online application and should support non-js users (as web applications always should do) you'll have to add a form to the mix. Checkboxes inside the <td> I guess.

jQuery UI could also be of service of course: http://jqueryui.com/demos/selectable/#display-grid

Answered almost 7 years ago by Jens Hedqvist
  • I actually stopped looking and started on my own, which looked a lot like yours. Here's the JQuery $(function() { $(".selectable").click(function() { $(this).toggleClass('on'); return false; }); }); (hopefully that displays correctly). Is there a way to change multiple boxes at the same time? Not a huge deal, but would be great to be able to click and drag across a day to have all the boxes change. Thanks again. Rob Kitson almost 7 years ago
  • As I said. It might get tricky. As different browsers and platforms try do drag the actual element or containing text when you click and hold the mouse button. It's standard browser behavior. You might check out jQuery UI though (se update of question above). Jens Hedqvist almost 7 years ago
  • Good job guys, will be following this thread to see how it goes :) o.k.w almost 7 years ago
  • I took a look at the jQuery UI display-grid before I posted the question. It's very close, but doesn't allow you to un-check boxes (at least in the demo that I saw). Rob Kitson almost 7 years ago
o.k.w 2355
1
point

This ain't an answer but just some inputs/considerations to help brainstorm this interesting idea.

A) The requirement of the scheduler. The uTorrent's scheduler GUI is based on a 24Hr X 7days grid. I assume that's what you need as well, yea?

B) The individual grid node. Is it just on-off, busy-free? Or something more like the uTorrent's FullSpeed-Limited-TurnOff-Seeding or perhaps others?

C) Point B will determine how feasible/easy it is to perform drag-and-fill UI. uTorrent's one takes me some tries to get the hang of the concept but I must say it was pretty well-done. A 2-state grid node will be easier for users to grasp.

Point A also might affect this aspect. Imagine it is 24 X 4 quarters X 7 days = 672 nodes. There will be a lot of clicking and dragging to configure a complex schedule. Hence something else might be needed to complement this method of input.

D) Browsers' capability in terms of JS/DOM/CSS/etc compliance. This could be tricky if your users come from all over the place using variety of browsers. Like what Jens commented, dragging across UI elements might be not have the same effect across browsers or even OSes.

E) Persistency of the grid data. Is it save-as-you-click/drag or there is a 'save' action? Or perhaps a timer running behind the save every number of ticks/seconds? The reverse should be easier, that is how to populate the grid from the saved data-set.

PS: You might want to explore Google Calendar (Weekly and Monthly views) as a reference. The dragging mode seems to work well on most standard browsers. Of course the grid model is different.

Google Calendar

Answered almost 7 years ago by o.k.w
  • Great points. Thanks. A.) For me it's an hourly thing, but could see it getting granular down to 15 minutes. B.) I would be okay with on/off as the only options. C.) Agreed. D.) True, dragging may be more trouble than it's worth. E.) Was thinking persistence would happen after a 'save' button was clicked, but that's just my bias from my experience using the uTorrent version. Rob Kitson almost 7 years ago
0
points

This should take care of your checkboxes:

<ol id="selectable">
    <li class="ui-state-default"><input type="checkbox" value="1" /></li>
    <li class="ui-state-default"><input type="checkbox" value="2" /></li>
    <li class="ui-state-default"><input type="checkbox" value="3" /></li>
    <li class="ui-state-default"><input type="checkbox" value="4" /></li>
    <li class="ui-state-default"><input type="checkbox" value="5" /></li>
    <li class="ui-state-default"><input type="checkbox" value="6" /></li>
    <li class="ui-state-default"><input type="checkbox" value="7" /></li>
    <li class="ui-state-default"><input type="checkbox" value="8" /></li>
    <li class="ui-state-default"><input type="checkbox" value="9" /></li>
    <li class="ui-state-default"><input type="checkbox" value="10" /></li>
    <li class="ui-state-default"><input type="checkbox" value="11" /></li>
    <li class="ui-state-default"><input type="checkbox" value="12" /></li>
</ol>

<script>
$(function() {
    $("#selectable").selectable({
      selected: function(event, ui) {
        $(ui.selected).find("input").attr('checked', true);

      },
      unselected: function(event, ui) {
      $(ui.unselected).find("input").attr('checked', false);
      }
    });
});
</script>
Answered almost 7 years ago by Christopher McCulloh