|
Timeline_DayLabel
Adding a day label with your month when your interval unit are days
I'll make a french example since I'm a french-speaking guy ;)
Timeline.GregorianDateLabeller.dayNames["fr"] = ["lun", "mar", "mer", "jeu", "ven", "sam", "dim"]; Timeline.GregorianDateLabeller.getDayName = function(day, locale){return Timeline.GregorianDateLabeller.dayNames[locale][day];}text = Timeline.GregorianDateLabeller.getDayName( date.getDay() , this._locale) + ", " + Timeline.GregorianDateLabeller.getMonthName(date.getUTCMonth(), this._locale) + " " + date.getUTCDate(); Here's what it looks like:
|
► Sign in to add a comment
dfdf
These notes refer to the api-2.3.0 distribution. I had to modify some terms to get it to work.
timeline_js/scripts/l10n/en/labellers.js already contains the necessary array. For my purposes, I changed the full names of the days ("Sunday".."Saturday") to abbreviations:
Lines 10..12
Timeline.GregorianDateLabeller.dayNames["en"] = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ];/ labellers.js / is at line 1758 in timeline_js/timeline-bundle.js
Line 1765 is where Timeline.GregorianDateLabeller?.getMonthName is located:
Timeline.GregorianDateLabeller.getMonthName=function(B,A){return Timeline.GregorianDateLabeller.monthNames[A][B]; }; // MXM: added from http://code.google.com/p/simile-widgets/wiki/Timeline_DayLabel Timeline.GregorianDateLabeller.getDayName = function(day, locale){return Timeline.GregorianDateLabeller.dayNames[locale][day]; ;} // end modified lineLines 1777..1780 after adding those lines above to my file has the switch statement that needs to be modified:
Timeline.GregorianDateLabeller.prototype.defaultLabelInterval=function(B,C){var D; var F=false; B=SimileAjax.DateTime.removeTimeZoneOffset(B,this._timeZone); switch(C) ...Note that the names of the parameters have changed to "B" and C" and the var "D" used in the return statement (line 1806: return{text:D,emphasized:F}).
"getUTCday" has to be used to obtain the number to be used to select the string from the array created or modified in the language file.
The code snippet to be inserted therefore becomes:
Lines 1791..1793 in my modified file:
You must define the french day names array like this : ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"]; Because when B.getUTCDay() return 0, it's for Sunday and not Monday.
When you say "Lines 1777..1780", may I ask which example code are you referring to? I have no idea where you are supposed to insert these code to re-produce this case.
He's not referring to sample code, he's directly editing the source code. I got it to work, but now my labels for DAY are too long, so they wrap... now I need to dig into CSS to add a no-break somewhere.
D'oh... if you are having problems with wrapping date labels that are now too long, override the width of the class ".timeline-date-label" to something greater than 5em (the default). No need to edit their CSS file, just load your CSS after their's.
Hello,
Everyone, This is not working for me. Can anyone upload the modified file?