My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
Timeline_DayLabel  
Adding a day label with your month when your interval unit are days
Updated Feb 4, 2010 by rdq...@gmail.com

I'll make a french example since I'm a french-speaking guy ;)

  1. Create a '''fr''' folder in the '''l10n''' folder
  2. Create a new '''labellers.js''' in the '''fr''' folder
  3. add the following in the js file:
  4. Timeline.GregorianDateLabeller.dayNames["fr"] = ["lun", "mar", "mer", "jeu", "ven", "sam", "dim"];
  5. Go to the '''script''' folder
  6. Open up '''labellers.js''' and add the following function under the '''getMonthName''' function at the beginning of the file (near line 15)
  7. Timeline.GregorianDateLabeller.getDayName = function(day, locale){return Timeline.GregorianDateLabeller.dayNames[locale][day];}
  8. find the '''defaultLabelInterval''' function in the '''labellers.js''' file and modify the '''Timeline.DateTime.DAY''' case in the switch to the following:
  9. text = Timeline.GregorianDateLabeller.getDayName( date.getDay() , this._locale) + ", " + Timeline.GregorianDateLabeller.getMonthName(date.getUTCMonth(), this._locale) + " " + date.getUTCDate();

Here's what it looks like:

Comment by wit.jing...@gmail.com, May 24, 2010

dfdf

Comment by mole...@canisius.edu, Jun 11, 2010

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 line

Lines 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:

Timeline.GregorianDateLabeller.getDayName( B.getUTCDay() , this._locale) + " " + 

Lines 1791..1793 in my modified file:

// MXM: modified line to add day name
case SimileAjax.DateTime.DAY:D=Timeline.GregorianDateLabeller.getDayName( B.getUTCDay() , this._locale) + " " + Timeline.GregorianDateLabeller.getMonthName(B.getUTCMonth(),this._locale)+" "+B.getUTCDate();
// end modified line
Comment by vincent....@gmail.com, Sep 23, 2010

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.

Comment by kevinlao...@gmail.com, Oct 24, 2011

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.

Comment by fred.h...@gmail.com, Feb 28, 2012

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.

Comment by fred.h...@gmail.com, Feb 28, 2012

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.

Comment by cubapi...@gmail.com, Mar 27, 2012

Hello,

Everyone, This is not working for me. Can anyone upload the modified file?


Sign in to add a comment
Powered by Google Project Hosting