My website's CMS creates a table as a calendar, but does not sort the events in order by time (or give me the option to manually sort them); it just adds them one after another. I'd like to add an inline script that reorders the events based on the time that is included within the link text. Some dates do not have any events, however, these cells still contain a link because each date's number is a link. Some only have one event, so those cells would contain two links, but do not need to be reordered. So the script should first look for each cell that has more than two links and then should reorder links 2-? (skipping the first link, which is just the date's number). Examples:
June 30 doesn't have any dates, so it only has one link, the number 30. It should be ignored.
July 1 has one event: "Birthday Party (4:00 PM)". This cell can also be ignored because there's no reason to reorder.
July 2 has three events: "Swimming (2:00 PM)", "Pick up Mom (1:00 PM)", and "Pick up cake (11:00 AM)". This cell would have four links with the three events and the date's number. The script should skip the first link (the date) and reorder the other three, using the time as reference for the order.
As you can see, the time is automatically put in parenthesis after the event title. Unfortunately, the time text is entered manually, so there is a chance the time could be put in as 2:00 PM or 2:00 p.m. or 2 PM or 1400 hours. While we will strive to make sure a similar style is used by each user, there's always the chance it will look different until we notice and can fix it. It would be nice if the script was smart enough to look for discrepancies. Barring that, it should treat unknowns as non-numbers. More on that:
Something else to consider is if the time is not a time. For instance, July 4th has this: "July 4th (Holiday)". I'd like the script to know that any non-numerical "time" should be put first and in alphabetical order.
A snippet of the generated table to know how it codes the days and events:
- <table id="ctl00_ContentMain_1_ctl00_ctl00_cal" title="Calendar" border="1" style="border-width:1px;border-style:solid;width:100%;border-collapse:collapse;">
- <tbody>
- <tr>
- <td class="day" align="center" valign="top" style="width:14%;"><a href="javascript:__doPostBack('ctl00$ContentMain$1$ctl00$ctl00$cal','5664')" style="color:Black" title="July 05">5</a><a href="/calendar.aspx?eventid=672">Morning Worship -P (9:45 AM)</a><a href="/calendar.aspx?eventid=676">Adult Christian Education Classes -P (11:00 AM)</a><a href="/calendar.aspx?eventid=680">Bible Study -P (6:00 PM)</a></td>
- <td class="day" align="center" valign="top" style="width:14%;"><a href="javascript:__doPostBack('ctl00$ContentMain$1$ctl00$ctl00$cal','5665')" style="color:Black" title="July 06">6</a><a href="/calendar.aspx?eventid=684">Exercise -M (9:30 AM)</a><a href="/calendar.aspx?eventid=688">Ceramics -P (3:00 - 5:00 PM)</a><a href="/calendar.aspx?eventid=692">Line Dancing -M (5:15 PM)</a><a href="/calendar.aspx?eventid=696">Ceramics -P (6:00 - 8:00 PM)</a><a href="/calendar.aspx?eventid=650">Low Vision Support Group -M (1:30 PM)</a><a href="/calendar.aspx?eventid=641">Nazarene Fellowship -M (10:00 AM)</a><a href="/calendar.aspx?eventid=645">Carter House Prayer Hour -M (7:00 PM)</a></td>
- <td class="day" align="center" valign="top" style="width:14%;"><a href="javascript:__doPostBack('ctl00$ContentMain$1$ctl00$ctl00$cal','5666')" style="color:Black" title="July 07">7</a><a href="/calendar.aspx?eventid=637">Men's Bible Study -M (8:30 AM)</a><a href="/calendar.aspx?eventid=632">Pastor Rick's Bible Study -P (10:00 AM)</a><a href="/calendar.aspx?eventid=700">Game Night -M (6:30 PM)</a></td>
- <td class="day" align="center" valign="top" style="width:14%;"><a href="javascript:__doPostBack('ctl00$ContentMain$1$ctl00$ctl00$cal','5667')" style="color:Black" title="July 08">8</a><a href="/calendar.aspx?eventid=507">Bus Trip - Publix -M (8:45 AM)</a><a href="/calendar.aspx?eventid=511">Bus Trip - Publix -M (9:00 AM)</a><a href="/calendar.aspx?eventid=517">Bus Trip - Walmart -M (1:15 PM)</a><a href="/calendar.aspx?eventid=523">Bus Trip - Walmart -M (1:30 PM)</a><a href="/calendar.aspx?eventid=618">Prayer Meeting -P (6:00 PM)</a><a href="/calendar.aspx?eventid=613">Bridge Club -M (1:00 PM)</a><a href="/calendar.aspx?eventid=608">Exercise -M (9:30 AM)</a></td>
- <td class="day" align="center" valign="top" style="width:14%;"><a href="javascript:__doPostBack('ctl00$ContentMain$1$ctl00$ctl00$cal','5668')" style="color:Black" title="July 09">9</a><a href="/calendar.aspx?eventid=623">Artist Workshop -M (10:00 AM)</a><a href="/calendar.aspx?eventid=367">Divine Health & Wholeness -P (1:30 PM)</a><a href="/calendar.aspx?eventid=704">Bus Trip - FL Gateway College - Footloose -P (5:30 PM)</a><a href="/calendar.aspx?eventid=711">Good Samaritan Center Memorial Service -P (10:00 AM)</a></td>
- <td class="day" align="center" valign="top" style="width:14%;"><a href="javascript:__doPostBack('ctl00$ContentMain$1$ctl00$ctl00$cal','5669')" style="color:Black" title="July 10">10</a><a href="/calendar.aspx?eventid=707">Park of the Pines Bible Study -M (9:45 AM)</a><a href="/calendar.aspx?eventid=628">Dowling House Bible Study -M (4:00 PM)</a><a href="/calendar.aspx?eventid=656">Exercise -M (9:30 AM)</a><a href="/calendar.aspx?eventid=666">Sit N Stitch -M (2:00 PM)</a><a href="/calendar.aspx?eventid=661">Handbell Choir Rehearsal -P (10:15 AM)</a></td>
- <td class="day" align="center" valign="top" style="width:14%;"><a href="javascript:__doPostBack('ctl00$ContentMain$1$ctl00$ctl00$cal','5670')" style="color:Black" title="July 11">11</a><a href="/calendar.aspx?eventid=705">Movie Matinee -P (2:00 PM)</a></td>
- </tr>
- </tbody>
- </table>
The tables' IDs are always the same, so that's a known variable for any month. You'll have noticed that there are no breaks between each event. The CSS does that.
Is what I want possible? Looking at examples of sorting using jQuery, I see how it should be able to be possible; I just don't have the know-how to alter what is available to do what I want. I'm pretty good at manipulating JavaScript, but jQuery still uses a lot of stuff I don't understand yet.
These are the steps I foresee:
1. Count the number of cells.
2. Loop through each cell.
3. In each cell:
a. Count the number of links.
b. More than two links?
I. Yes - Look at links 2 through the end's innerHTML for what is between ( and ).
II. Convert times into 24 hours.
III. Sort according to times.
IV. Move any non-numerical times to top of list.
V. Alphabetize all non-numerical times above numerical times.
Can anyone help me? Oh, and I'm sticking this in to get the jQuery to work:
And I have an event listener coded to make the script wait until the page is fully loaded before it runs because all of my script needs to go before the table.
Thanks in advance!