Search code examples
jqueryuislider

Jquery weekly planner


I want to create a weekly schedule planner. I have found on the net a widget that does half of what I need. The widget, plus minor modifications can be found here: http://jsfiddle.net/inadcod/GyanJ/ My problem is that for each individual day, I would like to be able to add new time interval sliders to capture different hour intervals for a single day. Something like for Monday I would like to set three intervals, one between 8:00 and 12:00, another between 12:45 and 16:30, and yet another between 17:00 and 21:45. If anyone can help me I would really appreciate it. Thanks.


Solution

  • $('.addNewInterval').click
    

    You forgot the . for the class! Add the interval slider relative to $(this) inside the button click handler now you will add it everywhere.

    Add youre new configuration inside the new .slider() function. Also mind that I'm only selecting the new one and not all sliders (using the class reference like you did).

    http://jsfiddle.net/GyanJ/5/

    Edit

    You will have to insert new input fields to populate. (or you will override) And you can fetch the value afterwards but it is always 0 at the point you where trying. Better is when the value changes inside the slide handler.

    It may be wise to put the configuration/options object into a variable so you can use it not only when first created but also for every extra added slider rather then writing twice the same code.

    this might help, I added some comments.

    http://jsfiddle.net/GyanJ/8/

    Edit

    done a little more work on it: (might need some styling)

    http://jsfiddle.net/GyanJ/16/