Created
February 7, 2012 18:24
-
-
Save coderforhire/1761099 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="ec-calendar"style="width: 500px;"><table class="ec-calendar-header" cellpadding="0" cellspacing="0"><thead><tr><th colspan="2" class="ec-month-nav ec-previous-month"><< <a href="/calendar/2012/1">January</a></th><th colspan="3" class="ec-month-name">February 2012</th><th colspan="2" class="ec-month-nav ec-next-month"><a href="/calendar/2012/3">March</a> >></th></tr></thead></table><div class="ec-body" style="height: 498px;"><table class="ec-day-names" style="height: 18px;" cellpadding="0" cellspacing="0"><tbody><tr><th class="ec-day-name" title="Sun">Sun</th><th class="ec-day-name" title="Mon">Mon</th><th class="ec-day-name" title="Tue">Tue</th><th class="ec-day-name" title="Wed">Wed</th><th class="ec-day-name" title="Thu">Thu</th><th class="ec-day-name" title="Fri">Fri</th><th class="ec-day-name" title="Sat">Sat</th></tr></tbody></table><div class="ec-rows" style="top: 18px; height: 480px;"><div class="ec-row" style="top: 0px; height: 96px;"><table class="ec-row-bg" cellpadding="0" cellspacing="0"><tbody><tr><td class="ec-day-bg ec-other-month-bg"> </td><td class="ec-day-bg ec-other-month-bg"> </td><td class="ec-day-bg ec-other-month-bg"> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td></tr></tbody></table><table class="ec-row-table" cellpadding="0" cellspacing="0"><tbody><tr><td class="ec-day-header ec-other-month-header ec-weekend-day-header" style="height: 18px;">29</td><td class="ec-day-header ec-other-month-header " style="height: 18px;">30</td><td class="ec-day-header ec-other-month-header " style="height: 18px;">31</td><td class="ec-day-header " style="height: 18px;">1</td><td class="ec-day-header " style="height: 18px;">2</td><td class="ec-day-header " style="height: 18px;">3</td><td class="ec-day-header ec-weekend-day-header" style="height: 18px;">4</td></tr><tr><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell" colspan="1" style="padding-top: 1px;"><div class="ec-event ec-event-5 ec-event-bg" style="background-color: #9aa4ad; padding-top: 2px; height: 16px;" data-event-id="5" data-event-class="event" data-color="#9aa4ad" ><a href="/events/5" title="TEST EVENT2134">TEST EVENT2134</a></div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td></tr></tbody></table></div><div class="ec-row" style="top: 96px; height: 96px;"><table class="ec-row-bg" cellpadding="0" cellspacing="0"><tbody><tr><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg ec-today-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td></tr></tbody></table><table class="ec-row-table" cellpadding="0" cellspacing="0"><tbody><tr><td class="ec-day-header ec-weekend-day-header" style="height: 18px;">5</td><td class="ec-day-header " style="height: 18px;">6</td><td class="ec-day-header ec-today-header " style="height: 18px;">7</td><td class="ec-day-header " style="height: 18px;">8</td><td class="ec-day-header " style="height: 18px;">9</td><td class="ec-day-header " style="height: 18px;">10</td><td class="ec-day-header ec-weekend-day-header" style="height: 18px;">11</td></tr><tr><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td></tr></tbody></table></div><div class="ec-row" style="top: 192px; height: 96px;"><table class="ec-row-bg" cellpadding="0" cellspacing="0"><tbody><tr><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td></tr></tbody></table><table class="ec-row-table" cellpadding="0" cellspacing="0"><tbody><tr><td class="ec-day-header ec-weekend-day-header" style="height: 18px;">12</td><td class="ec-day-header " style="height: 18px;">13</td><td class="ec-day-header " style="height: 18px;">14</td><td class="ec-day-header " style="height: 18px;">15</td><td class="ec-day-header " style="height: 18px;">16</td><td class="ec-day-header " style="height: 18px;">17</td><td class="ec-day-header ec-weekend-day-header" style="height: 18px;">18</td></tr><tr><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td></tr></tbody></table></div><div class="ec-row" style="top: 288px; height: 96px;"><table class="ec-row-bg" cellpadding="0" cellspacing="0"><tbody><tr><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td></tr></tbody></table><table class="ec-row-table" cellpadding="0" cellspacing="0"><tbody><tr><td class="ec-day-header ec-weekend-day-header" style="height: 18px;">19</td><td class="ec-day-header " style="height: 18px;">20</td><td class="ec-day-header " style="height: 18px;">21</td><td class="ec-day-header " style="height: 18px;">22</td><td class="ec-day-header " style="height: 18px;">23</td><td class="ec-day-header " style="height: 18px;">24</td><td class="ec-day-header ec-weekend-day-header" style="height: 18px;">25</td></tr><tr><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td></tr></tbody></table></div><div class="ec-row" style="top: 384px; height: 96px;"><table class="ec-row-bg" cellpadding="0" cellspacing="0"><tbody><tr><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg "> </td><td class="ec-day-bg ec-other-month-bg"> </td><td class="ec-day-bg ec-other-month-bg"> </td><td class="ec-day-bg ec-other-month-bg"> </td></tr></tbody></table><table class="ec-row-table" cellpadding="0" cellspacing="0"><tbody><tr><td class="ec-day-header ec-weekend-day-header" style="height: 18px;">26</td><td class="ec-day-header " style="height: 18px;">27</td><td class="ec-day-header " style="height: 18px;">28</td><td class="ec-day-header " style="height: 18px;">29</td><td class="ec-day-header ec-other-month-header " style="height: 18px;">1</td><td class="ec-day-header ec-other-month-header " style="height: 18px;">2</td><td class="ec-day-header ec-other-month-header ec-weekend-day-header" style="height: 18px;">3</td></tr><tr><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td><td class="ec-event-cell ec-no-event-cell" style="padding-top: 1px;"><div class="ec-event" style="padding-top: 2px; height: 16px;" > </div></td></tr></tbody></table></div></div></div></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Event.observe(window, "load", function() {
var highlight_color = "#2EAC6A";
// highlight events that have a background color
$$(".ec-event-bg").each(function(ele) {
ele.observe("mouseover", function(evt) {
event_id = ele.readAttribute("data-event-id");
event_class_name = ele.readAttribute("data-event-class");
$$(".ec-"+event_class_name+"-"+event_id).each(function(el) {
el.setStyle({ backgroundColor: highlight_color });
});
});
ele.observe("mouseout", function(evt) {
event_id = ele.readAttribute("data-event-id");
event_class_name = ele.readAttribute("data-event-class");
event_color = ele.readAttribute("data-color");
$$(".ec-"+event_class_name+"-"+event_id).each(function(el) {
el.setStyle({ backgroundColor: event_color });
});
});
});
// highlight events that don't have a background color
$$(".ec-event-no-bg").each(function(ele) {
ele.observe("mouseover", function(evt) {
ele.setStyle({ color: "white" });
ele.select("a").each(function(link) {
link.setStyle({ color: "white" });
});
ele.select(".ec-bullet").each(function(bullet) {
bullet.setStyle({ backgroundColor: "white" });
});
ele.setStyle({ backgroundColor: highlight_color });
});
ele.observe("mouseout", function(evt) {
event_color = ele.readAttribute("data-color");
ele.setStyle({ color: event_color });
ele.select("a").each(function(link) {
link.setStyle({ color: event_color });
});
ele.select(".ec-bullet").each(function(bullet) {
bullet.setStyle({ backgroundColor: event_color });
});
ele.setStyle({ backgroundColor: "transparent" });
});
});
});