Search code examples
jquerydatetimeline

How can I attach dates to my timeline?

I've created a timeline with marker increments to show time in between two dates, and it works fine but I want to now attach the date to it's appropriate increment marker.

See me Fiddle: http://jsfiddle.net/vK8WA/

As you can see, we get the dates, figure out how many markers to display and how much spacing to give them to make them equally placed on the timeline, and create the elements.

If the amount of days in between two dates is equal to or less than 31 we display markers for each day, but if the amount of days is equal to or greater than 32, we display markers in weeks (7 days).

How can I attach the date of each increment to it's respective marker <div>? Help?

Edit

As suggested below, I used i in my method to increment date numbers on the timeline. See my new Fiddle: http://jsfiddle.net/vK8WA/1/

My problem now is the numbers just keep getting higher. I need to extract the month name, as well as roll over the number back to 1 once the date gets to 31 (or 30, 28, depending on the month) as well as get the next month in order. Can anyone help with this?

Solution

  • I updated your fiddle, and I think you'll be happy with the results.

    • Created variables for startDate and endDate
    • Produced the markers based on a markerDate variable that gets incremented by either 1 or 7 days, based on your existing logic.
    • Added a list of month abbreviations and an ordinal function to assist in producing formatted output
    • Added text-align: center; to your css for time-increment

    The result now looks like this:

    Timeline Image