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 <[email protected]> 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<[email protected]> 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 <[email protected]> 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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en
-~----------~----~----~----~------~----~------~--~---
