Sorry, there's one additional "helper funciton" (see below) that you'll need in the "custom functions" library.
-Mark /* ------------------------------------------------------------- Adapted this from code at: http://lawrence.ecorp.net/inet/samples/js-date-fx.shtml Useful for identifying each of the Saturday and Sunday dates in a range. This, in turn, is used to create SIMILE Timeline decorators to highlight weekends. ------------------------------------------------------------- */ Date.prototype.sameDayEachWeek = function (d, date) { /* Returns array of dates of same day each week in range */ var aDays = new Array(); var eDate, nextDate, adj; if (this > date) { eDate = this; nextDate = new Date(date.getTime()); } else { eDate = date; nextDate = new Date(this.getTime()); } /* Find when the first week day of interest occurs */ adj = (d - nextDate.getDay() + 7) %7; nextDate.setDate(nextDate.getDate() + adj); while (nextDate < eDate) { aDays[aDays.length] = new Date(nextDate.getTime() ); nextDate.setDate(nextDate.getDate() + 7); } return aDays }; On Aug 7, 8:49 am, mleden <mle...@yahoo.com> wrote: > Hi Gabriel, > > Sure, I'll try to summarize what I did. Again, just to reiterate, I'm > using Exhibit with the Timeline extension. > > I include this in the <head> tag of my page(s) AFTER loading the > SIMILE libraries: > <!-- This library includes custom functions and overrides to > supplement SIMILE's codebase --> > <script src="../javascript/ce-re-exhibit.v1.2.js" type="text/ > javascript"></script> > > My Timeline view <div> tag includes: > > ex:timelineConstructor="calendarAppTimelineConstructor" > > The "custom functions" library referenced in the <head> tag includes: > /* ------------------------------------------------------------- > Override "Timeline Constructor" for Calendar App Timeline view to > include Weekend and Today highlighters. > ------------------------------------------------------------- */ > function calendarAppTimelineConstructor(div, eventSource) > { > var HIGHLIGHT_WEEKENDS = true; > var HIGHLIGHT_TODAY = true; > var INCLUDE_TOP_DATE_BAND = true; > var HIGHLIGHT_WEEKEND_COLOR = "#A4A4A4"; // gray for WEEKEND > var HIGHLIGHT_TODAY_COLOR = "#A9D0F5"; // transparent blue for TODAY > var TIMELINE_FIRST_DATE = new Date(2009, 00, 01); > var TIMELINE_LAST_DATE = new Date(2009, 11, 31); > var TIMELINE_DIV_HEIGHT = "400px"; > > var theme = Timeline.ClassicTheme.create(); > theme.timeline_start = new Date(TIMELINE_FIRST_DATE); > theme.timeline_stop = new Date(TIMELINE_LAST_DATE); > > if (INCLUDE_TOP_DATE_BAND) > { > var bandInfos = [ > Timeline.createBandInfo({ > width: "5%", > intervalUnit: Timeline.DateTime.DAY, > intervalPixels: 50, > theme: theme > }), > Timeline.createBandInfo({ > width: "80%", > intervalUnit: Timeline.DateTime.DAY, > intervalPixels: 50, > eventSource: eventSource, > theme: theme > }), > Timeline.createBandInfo({ > width: "15%", > intervalUnit: Timeline.DateTime.MONTH, > intervalPixels: 150, > eventSource: eventSource, > overview: true, > theme: theme > }) > ]; > > bandInfos[0].highlight = true; > bandInfos[1].highlight = true; > bandInfos[1].syncWith = 0; > bandInfos[2].syncWith = 0; > } > else > { > var bandInfos = [ > Timeline.createBandInfo({ > width: "85%", > intervalUnit: Timeline.DateTime.DAY, > intervalPixels: 50, > eventSource: eventSource, > theme: theme > }), > Timeline.createBandInfo({ > width: "15%", > intervalUnit: Timeline.DateTime.MONTH, > intervalPixels: 150, > eventSource: eventSource, > overview: true, > theme: theme > }) > ]; > > bandInfos[0].highlight = true; > bandInfos[1].highlight = true; > bandInfos[1].syncWith = 0; > } > > for (var i = 0; i < bandInfos.length; i++) > { > bandInfos[i].decorators = []; > } > > var today = new Date(); > var offsetHours = today.getTimezoneOffset()/60; > > if (HIGHLIGHT_TODAY) > { > var todaysDateBegin = new Date(today); > var todaysDateEnd = new Date(today); > todaysDateBegin.setHours(00-offsetHours); > todaysDateBegin.setMinutes(00); > todaysDateBegin.setSeconds(00); > todaysDateEnd.setHours(23-offsetHours); > todaysDateEnd.setMinutes(59); > todaysDateEnd.setSeconds(59); > > for (var i = 0; i < bandInfos.length; i++) > { > bandInfos[i].decorators.push(new > Timeline.SpanHighlightDecorator({ > startDate: > Timeline.DateTime.parseGregorianDateTime > (todaysDateBegin), > endDate: > Timeline.DateTime.parseGregorianDateTime(todaysDateEnd), > color: HIGHLIGHT_TODAY_COLOR, > opacity: 50, > theme: theme > })); > } > } > > if (HIGHLIGHT_WEEKENDS) > { > var listOfSaturdays = TIMELINE_FIRST_DATE.sameDayEachWeek(6, > TIMELINE_LAST_DATE); //6 = Saturday > var listOfSundays = TIMELINE_FIRST_DATE.sameDayEachWeek(0, > TIMELINE_LAST_DATE); //0 = Sunday > var weekendStartDateTime = new Date(); > var weekendStopDateTime = new Date(); > > for (var i = 0; i < bandInfos.length; i++) > { > for (var i2 = 0; i2 < listOfSaturdays.length; i2++) > { > weekendStartDateTime = new > Date(listOfSaturdays[i2]); > weekendStartDateTime.setHours(00-offsetHours); > weekendStartDateTime.setMinutes(00); > weekendStartDateTime.setSeconds(00); > > weekendEndDateTime = new > Date(listOfSundays[i2]); > weekendEndDateTime.setHours(23-offsetHours); > weekendEndDateTime.setMinutes(59); > weekendEndDateTime.setSeconds(59); > > bandInfos[i].decorators.push(new > Timeline.SpanHighlightDecorator({ > startDate: > Timeline.DateTime.parseGregorianDateTime > (weekendStartDateTime), > endDate: > Timeline.DateTime.parseGregorianDateTime > (weekendEndDateTime), > color: HIGHLIGHT_WEEKEND_COLOR, > opacity: 50, > theme: theme > })); > } > } > } > > div.style.height = TIMELINE_DIV_HEIGHT; > tl = Timeline.create(div, bandInfos, Timeline.HORIZONTAL); > > return tl; > > } > > HTH, > -Mark > > On Aug 7, 7:17 am, Gabriel Jurado <gabriel.jur...@gmail.com> wrote: > > > Hi Mark, can you please let me know how you implement the decorator? > > > Thanks and regards, > > > Gabriel > > > On Wed, Aug 5, 2009 at 7:53 PM, mleden<mle...@yahoo.com> wrote: > > > > Hi Gabriel, > > > > I have implemented a "today highlighter" on the Timeline view. > > > However, I used a decorator. I didn't even know about the "instant > > > highlight painter". If you're interested in how I did it, just let me > > > know. May not be the best/most elegant solution but it works for me. > > > > -Mark > > > > On Aug 5, 11:23 am, Gabriel Jurado <gabriel.jur...@gmail.com> wrote: > > >> Has anyone implemented the instant highlight painter to display a > > >> vertical line corresponding to the actual date (like today) > > > >> Something like > > >> this:http://simile-widgets.googlegroups.com/attach/f126a21ef367683c/today.... > > > >> Taken > > >> fromhttp://groups.google.com/group/simile-widgets/browse_thread/thread/39... > > > >> Regards, > > > >> Gabriel --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en -~----------~----~----~----~------~----~------~--~---
