German translation / Show current date on init

[stolarek]

Hello,
I am using the plugin for a small project now. It's very nice piece of software.
I have small issues, but hope somebody can help me :-)

I use the hour mode for the timeline.
In german language (chrome browser 89) I get the text "11 Uhr" instead of "11" on the headline.
I set the ruler to "numeric". What can be the problem?

Second point: My timeline is very big (hours) so is it possible to jump on start to the current date?

Here are my options:

var startstop = GetMinMaxDate();
window.tlOpts = {
type: 'point',
startDatetime: getDateString(startstop[0]),
endDatetime: getDateString(startstop[1]),
scale: 'hour',
rowHeight: rowHeight,
minGridSize: minGridSize,
headline: {
display: false,
title: 'Bewässerungstabelle',
range: false,
locale: 'de',
format: {
hour12: false,
}
},
sidebar: {
list: listItems,
sticky: true
},
rows: listItems.length,
ruler: {
top: {
fontSize: 14,
height: 24,
lines: [ 'day', 'hour', 'weekday'],
format: {
hour: 'numeric',
weekday: 'long'
},
locale: "de"
},
bottom: {
display: false
}
},
hideScrollbar: false,
zoom: false,
eventData: createEvents(),
effects: {
horizontalGridStyle: "solid",
verticalGridStyle: "dotted"
},
colorScheme : {
event : {
text :'#343A40',
border :'#6C757D',
background :'#0000FF'
}
}
};

Best regards
Damian

[ka215]

Hi there,

In german language (chrome browser 89) I get the text "11 Uhr" instead of "11" on the headline.
I set the ruler to "numeric". What can be the problem?

Firstly, the format of the datetime displayed in the ruler depends on the behavior of the native JavaScript Date.prototype.toLocaleString method. Therefore, it is a specification that when the format is applied to the value of a single part of a datetime object, such as an individual hour, minute, or day, a unit might be given.
As a practical example, the behavior is as follows.

console.log(new Date().toLocaleString('de'));// 24.3.2021, 19:10:31
console.log(new Date().toLocaleString('de', { hour: 'numeric' }));// 19 Uhr
console.log(new Date().toLocaleString('de', { hour: '2-digit' }));// 19 Uhr

Currently, the plugin does not have an option to solve this.

Therefore, to avoid this problem, we need to filter the ruler values from outside this plugin.

$('#myTimeline').Timeline(tlOpts).Timeline('initialized', function(instance){
    // Filter displayed rulers
    $(instance).find('[data-ruler-scope="hour"]').children().each(function(){
        $(this).get(0).innerHTML = '<span>' + parseInt($(this).get(0).innerText, 10) + '</span>'
    })
});

Second point: My timeline is very big (hours) so is it possible to jump on start to the current date?

By adding rangeAlign: 'currently' to the options for initializing the timeline, if the current date and time is included in the drawn timeline, it will be moved to the pointer of the current date and time for display.

Or, if you want to do it by picking up a user event after the timeline is displayed, use the alignment method as shown below.

<button type="button" id="to-now">To Now</button>

$('#to-now').on('click', function(){
    $('#myTimeline').Timeline('alignment', 'now', 'fast');
});

Please try them.

Thank you,

[stolarek]

Hello ka215,
thank you very much for you help, now it looks much better.

But I think it'a really a bug in the webbrowser 2-digit can not be "19 Uhr"

Scroll on startup works perfect too.

Now I have the problem when I navigate back from my timeline page to another page (other url on my derver) and then back I get the click events fired twice.
Here is my initialisation:
$('div#timeline').Timeline(tlOpts).Timeline('openEvent', function(targetEvent, viewerContents) {....}

I think the problem is here:
$(document).on(Event.CLICK_EVENT, "".concat(this._selector, " ").concat(Selector.EVENT_NODE), function (event) {
return _this2.openEvent(event);
});
As workaround i added in your source:
$(document).off(Event.CLICK_EVENT).on(Event.CLICK_EVENT...
But I think it's not the best way.
Have you a better solution for this?
Best regards
Damian

[ka215]

Unfortunately, I have not been able to reproduce the symptoms of duplicate firing of the event you reported in my environment.
Please tell me in detail how to reproduce the defect.
For example,

• Does "navigate back from page" mean browser's history back?
• What happens if I move from a timeline page to a page without a timeline and then relink to the timeline page?
• Please tell me what kind of processing is done by the function of the openEvent method.

Thank you,

[stolarek]

Hello,
I navigate from my timeline page to another "sub" page on my testserver and back to the timeline.
I see the line is called again:
$(document).on(Event.CLICK_EVENT, "".concat(this._selector, " ").concat(Selector.EVENT_NODE), function (event) {
return _this2.openEvent(event);
});
After this I get 2 events, next time I get 3 events.
In my openEvent its only possible to delete events:

$('div#timeline').Timeline(tlOpts).Timeline('openEvent', function(targetEvent, viewerContents) {
var delEvent = {
timestamp: targetEvent.extend.timestamp,
row: targetEvent.row,
eventId: targetEvent.eventId
}

// Zeichne Dialogbox
var HTML = '<div id="dialogDelEvent" title="'+targetEvent.content+'">';
	HTML += '<label class="ml30p">Beginn: '+targetEvent.start+'</label><br><br><br>';
	HTML += '<label class="ml30p">Ende: '+targetEvent.end+'</label><br>';
HTML += '</div>';

$('body').append(HTML);

// Dialog Funktionalitaet
$('#dialogDelEvent').dialog({
	modal: true,
	closeOnEscape: true,
	dialogClass: 'ohneSchliessenButton',
	draggable: false,
	resizable: false,
	width: window.innerWidth * 0.8,
	height: window.innerHeight * 0.8,
	close: function (event, ui) {
		$(this).remove();
	},
	buttons: [
		{
			text: lang('main.ok'),
			class: "farbe-gruen",
			click: function() {
				$('#dialogDelEvent').dialog("close");
			}
		},
		{
			text: lang('main.delete'),
			class: "farbe-rot leftButton",
			click: function() {
				$('div#timeline').Timeline( 'removeEvent', [delEvent.eventId],
					function(elm, opts, usrdata) {
						if (delEvent.row-1 < belegungsStatus.length) {
							//belegungsStatus[delEvent.row-1].bewaesserungsZeitpunkt.remove(delEvent.timestamp);
							const index = belegungsStatus[delEvent.row-1].bewaesserungsZeitpunkt.indexOf(delEvent.timestamp);
							if (index > -1) {
								belegungsStatus[delEvent.row-1].bewaesserungsZeitpunkt.splice(index, 1);
							}
							setSettings(delEvent.row-1);
							$('#dialogDelEvent').dialog("close");
						}
						else {
							alert('boom');
						}
					}
				);
			}
		}
	]
});

});

Anothe parts are done with click. With Click is it possible to add (if not exist) edit and delete events.
Best regards
Damian

[ka215]

Thank you for disclosing the source.
As your source code looked, I recognized that open dialog to delete event node when fire the "openEvent". However, by such algorithm it will create and append to DOM new dialog element every calling openEvent method, then I think that calling dialog is lastest added dialog element. I think better to isolate and execute the processes of the dialog creation and initialize from an openEvent method, and modify dialog elements by using $.attribute() and $.text() in an openEvent method.

You may find the demo on the CRUD page below helpful.

https://ka2.org/jqtl-v2/sample-crud.html

Also for reference, the source of the above page is disclosed here.

https://gist.github.com/ka215/72cfc07da6d813842b9113e898260892

Thank you,

[stolarek]

Hello ka215,
thank you for your suggestions. To change the dialog can be a solution, but I see the openevent is fired twice in my application.
(Because the _init method is called twiced when I navigate in my application with different url's)
Unfortunaly I don't have a public server to show the application running, it's need a java backend.

Now I have another question:

In my timeline I implement scrollbuttons to use the alignment function.
I call it:

	$('a#timelinePrevious').off('click').on('click', function() {
		$('div#timeline').Timeline('alignment', 'left', 1000)
	});
	
	$('a#timelineNext').off('click').on('click', function() {
		$('div#timeline').Timeline('alignment', 'right', 1000)
	});

It works fine, but it scrolls to the start and to the end of the timeline.
Is it possible to change left, right to scroll of pixel or percent of the view?
Thanks in advance.
Best regards
Damian

[ka215]

Unfortunately, we can not move to any custom alignment position because an alignment method is supporting the preset values and event id number only. Therefore, we should be directly handling DOM of the timeline instance without using an alignment method.
e.g.

$('#timelinePrevious').on('click', function(){
    customAlignment(20);
});
$('#timelineNext').on('click', function(){
    customAlignment('80%');
});

function customAlignment( moveTo, speed=1000 ) {
    var timelineContainer = $('#myTimeline').find('.jqtl-container'),
        timelineMain = $('#myTimeline').find('.jqtl-main');
    if (/%$/.test(moveTo)) {
        moveTo = Math.floor(timelineMain.get(0).clientWidth * (parseInt(moveTo, 10) / 100));
    } else {
        moveTo = parseInt(moveTo, 10);
    }
    timelineContainer.animate({scrollLeft: moveTo}, speed);
}

Please try it.
Thank you,

[stolarek]

Hello ka215,
thank you for the fast response.
I understand, now I use your solution to scroll, it works perfect.
Can it be an improvement for the alignment in next release? Now left / right do the same like start/end.
Thank you again.
Best regards
Damian