Propose most upgrade of timeline.js

[GBonnaire]

I have modify your code for :

• for bar : Show bullet event in timeline for event width < 1, and change limit 1 to 15
• Add MessageLoading in Default parameters
• Add setColorEvent for defined color with function
• Add onOpenEvent for defined action in function in clicking on event
• Add option to show period in period by startHour and endHour (for day in work who start to 8:00 to 18:00 for example)
• Add bootstrap chevron for event out of period
• Add move Y position when most event in same cell
• Add "Category" property on Event

In dev : I have making 2 function for nextPeriod and previousPeriod show

Thanks for good base file! timeline.js.txt

[GBonnaire]

Example of use onOpenEvent who call Timeline_openEvent with jdialog JS Code

window.addEventListener( 'load', function(){
   dialog = $( "#PopupEvent" ).dialog({
                            autoOpen: false,
                            height: 400,
                            width: 500,
                            modal: true,
                            buttons: {
                              "Fermer": function() {
                                dialog.dialog( "close" );
                              }
                            },
                            close: function() {

                            } // End Dialog
                          }); // End Load

function Timeline_openEvent(event) {
        $( "#PopupEvent" ).dialog("option", "title", event["category"] + " : " + event["label"]);
        $( "#PopupEvent #EVENT_TITLE" ).text(event["category"] + " : " + event["label"]);
        $( "#PopupEvent #EVENT_PERSON" ).text(Timeline_options["sidebar"]["list"][event["row"]-1]);
        $( "#PopupEvent #EVENT_DATE" ).text(event["start"] + " - " + event["end"] );
        $( "#PopupEvent #EVENT_TEXT" ).text(event["content"]);
        $( "#PopupEvent" ).dialog("open");
    }

Timeline option :

...
 "onOpenEvent": Timeline_openEvent,
...

HTML Code popup

<div id="PopupEvent" title="" style="display:none;">
            <div class="w3-container">
                <H4 id="EVENT_TITLE"></H4>
                <H5 id="EVENT_PERSON"></H5>
                <hr>
                <i class="material-icons">date_range</i> <SPAN id="EVENT_DATE"></SPAN>
                <hr><br>
                <div id="EVENT_TEXT"></div>
                <br>
            </div>          
    </div>

[GBonnaire]

With CSS for chevron

.jqtl-event-node-next {
        color: gray;
        position: absolute;
        right: 0px;
        margin-right: 5px;
    }

    .jqtl-event-node-before {
        color: gray;
    }

[ka215]

Hi there, Guillaume-Bo!

Thank you for awesome PR! I hope to merge your code. Therefore I'm going to add a test to the develop branch. Please wait for merging your code until the completed test.

Thank you very match!

[GBonnaire]

Hi Ka,

Thanks for answer!

Give me news when you start merging your code with the code that i proposed.

Have good day

[danycr90]

* Add "Category" property on Event

Hello Guillaume-Bo!, how are you?

I would like to know how do you configure the event (<li data-timeline-node="{......) or the Timeline options, to achieve more than an event in the same period of time.

Have a nice day, Regards.

[GBonnaire]

Hi @danycr90,

Firstly : Use JS File in First post waiting for @ka215 finish merge the 2 code.

After, nothing change in the line , set a same period time and the TimelineJQ move Y position automatically when detect 2 event in same period.

Other option add for defined startHour and endHour for one day exemple setting for that

var Timeline_options = {
    "type":"bar",
    "loadingMessage":"Chargement...",
    "startDatetime":"currently",
    "endDatetime":"auto",
    "scale":"day",
    "rows":"auto",
    "minGridSize":($("#my-timeline").width()-110)/31,
    "range":true,
    "startHour": 9,
    "endHour": 17,
    "locale":"fr-FR",
    "format":{"timeZone":"Europe\/Paris"},
    "sidebar":{
        "sticky":true,
        "list":[]
    },
    "ruler":{
        "top":{
            "lines":["year","month","day","weekday"],
            "height":26,
            "fontSize":13,
            "color":"#777777",
            "background":"#FFFFFF",
            "locale":"fr-FR",
            "format":{"timeZone":"Europe\/Paris","hour12":false,"year":"numeric","month":"long","day":"numeric","weekday":"short"}
        },
        "bottom":{}
    },
    "reloadCacheKeep":false,
    "zoom":false,
    "debug":false,
    "setColorEvent": Timeline_getColor,
    "onOpenEvent": Timeline_openEvent,
    }

function Timeline_openEvent(event) {
        $( "#PopupEvent" ).dialog("option", "title", event["category"] + " : " + event["label"]);
        $( "#PopupEvent #EVENT_TITLE" ).text(event["category"] + " : " + event["label"]);
        $( "#PopupEvent #EVENT_PERSON" ).text(Timeline_options["sidebar"]["list"][event["row"]-1]);
        $( "#PopupEvent #EVENT_DATE" ).text(event["start"] + " - " + event["end"] );
        $( "#PopupEvent #EVENT_TEXT" ).text(event["content"]);
        $( "#PopupEvent" ).dialog("open");
    }

function Timeline_getColor(event) {
        if(event.category=="CAT1") {
            return {color:"#000",bgcolor:"#f0e68c"};
        }
        if(event.category=="CAT2") {
            return {color:"#000",bgcolor:"#ffdddd"};
        }
        if(event.category=="CAT3") {
            return {color:"#000",bgcolor:"#ddffdd"};
        }
        return null;
    }

I hope helped you Have nice day

[GBonnaire]

In my test, i have use a function to init Timeline

My code :

function Timeline_addEvents(elementId, events) {
        var tl = $("#"+elementId);
        var tl_events = $("#"+elementId+" ul.timeline-events");

        // test container timeline exist
        if(!tl.length) {
            throw new Error("TimeLine Element not exist");
        }

        // test time line exist
        if(!tl_events.length) {
            // is timeline event not exist
            tl.append("<ul class=\"timeline-events\"></ul>");
            tl_events = $("#"+elementId+" ul.timeline-events");
        }

        // read each event
        // if event is an array
        if(Object.prototype.toString.call( events ) === '[object Array]') {
            // for each line
            var id = Timeline_events.length+1;
            var events_rows = Timeline_options["sidebar"]["list"];
            var tl_date_min, tl_date_max;
            events.forEach( ( evt ) => {

                var events_detail =  {};
                var row = events_rows.indexOf(evt["for"]);
                // if exist row
                if(row==-1) {
                    // if now exist row // create row
                    events_rows.push(evt["for"]);
                    row = events_rows.length;
                } else {
                    row++;
                }
                events_detail["uid"] = id;

                events_detail["start"] = evt["start"];
                tl_date_min = tl_date_min ? Math.min(new Date(evt["start"]), tl_date_min): new Date(evt["start"]);
                events_detail["end"] = evt["end"];
                tl_date_max = tl_date_max ? Math.max(new Date(evt["end"]), tl_date_max): new Date(evt["end"]);
                events_detail["content"] = evt["description"].replace(/'/g,"&apos;");
                events_detail["category"] = evt["category"] ? evt["category"].replace(/'/g,"&apos;") : "";
                events_detail["row"] = row;
                var node = JSON.stringify(events_detail);
                Timeline_events.push(events_detail);
                tl_events.append("<li id=\"tl-evt-"+id+"\" data-timeline-node='"+node+"'>"+evt["title"]+"</li>");                

                // Next Event
                id++;
            });
        }

        if($("#" + elementId + " div.jqtl-container").length) {
            tl.Timeline("reload"); 
        } else {
            Timeline_options["sidebar"]["list"] = events_rows;
            tl_date_min = new Date(tl_date_min);
            tl_date_max = new Date(tl_date_min.getFullYear(),(tl_date_min.getMonth()+1), 0 );
            Timeline_options["startDatetime"] = tl_date_min.getFullYear()+"-"+(tl_date_min.getMonth()+1)+"-01";
            Timeline_options["endDatetime"] = tl_date_max.getFullYear()+"-"+(tl_date_max.getMonth()+1)+"-"+tl_date_max.getDate();
            tl.Timeline(Timeline_options);   
        }
    }

the array of event

    var MesEvenements = [];
    MesEvenements.push({for:"Alfred",start:'2019-06-18 09:00',end:'2019-06-20 17:00',title:'CA',description:'test', category: 'CAT1'})
    MesEvenements.push({for:"Guillaume",start:'2019-06-18 12:00',end:'2019-06-19 17:00',title:'CA 1',description:'test', category: 'CAT1'})
    MesEvenements.push({for:"Guillaume 2",start:'2019-06-18 09:00',end:'2019-06-18 17:00',title:'CA 2',description:'test', category: 'CAT1'})
    MesEvenements.push({for:"Guillaume",start:'2019-06-21 09:00',end:'2019-06-21 17:00',title:'CA 3',description:'test', category: 'CAT1'})
    MesEvenements.push({for:"Guillaume 3",start:'2019-06-22 09:00',end:'2019-06-22 17:00',title:'CA 4',description:'test', category: 'CAT1'})
    MesEvenements.push({for:"Guillaume 4",start:'2019-06-22 09:00',end:'2019-06-22 17:00',title:'CA 5',description:'test', category: 'CAT1'})

    MesEvenements.push({for:"Alfred",start:'2019-06-19 12:00',end:'2019-06-19 14:00',title:'Event B',description:'test test', category: 'CAT2'})
    MesEvenements.push({for:"Guillaume 3",start:'2019-06-25 12:00',end:'2019-06-26 12:00',title:"Event L'a vande",description:"test '2'", category: 'CAT3'})
    MesEvenements.push({for:"Guillaume 2",start:'2019-06-26 12:00',end:'2019-06-27 12:00',title:'Event C',description:'test 2', category: 'CAT2'})
    MesEvenements.push({for:"Guillaume 4",start:'2019-06-27 12:00',end:'2019-06-28 12:00',title:'Event C',description:'test 2', category: 'CAT2'})
    MesEvenements.push({for:"Guillaume",start:'2019-06-25 12:00',end:'2019-06-26 12:00',title:'Event C',description:'test 2', category: 'CAT3'})
    MesEvenements.push({for:"Guillaume 2",start:'2019-06-25 12:00',end:'2019-06-26 12:00',title:'Event C',description:'test 2', category: 'CAT2'})
    MesEvenements.push({for:"Guillaume 3",start:'2019-06-26 12:00',end:'2019-06-27 12:00',title:'Event C',description:'test 2', category: 'CAT2'})
    MesEvenements.push({for:"Guillaume 4",start:'2019-06-27 12:00',end:'2019-06-28 12:00',title:'Event C',description:'test 2', category: 'CAT2'})
    MesEvenements.push({for:"Alfred",start:'2019-06-25 12:00',end:'2019-06-26 12:00',title:'Event C',description:'test 2'})
    MesEvenements.push({for:"Guillaume",start:'2019-06-25 12:00',end:'2019-06-26 12:00',title:'Event C',description:'test 2'})

and the launch script

window.addEventListener( 'load', function(){
   Timeline_addEvents("my-timeline", MesEvenements);
}

[danycr90]

Hello dear Guillaume-Bo!

Thank you very much, your example was very helpful to me, this is a very good plugin.

Have nice day, Regards

[ka215]

Hi, @Guillaume-Bo

I'm very sorry. Your PR has closed now because I'd merged a develop branch without merging your PR yet to master branch. However, I'm working to merge your PR now. I'm going to merge your PR when will release next stable v2.0.0. Please wait for until it.

Thank you,

[GBonnaire]

Hi @ka215

It's ok for me. :)

Thank you for your working. If you have question, do not hesitate to ask them

Have nice day,

[GBonnaire]

Hi @ka215

Have you integrate PR in your stable release ?

Have nice day,

[mghulolna]

Is there a working example ready? the code seems changed i.e. hookEventColors vs setColorEvent onOpenEvent: Timeline_openEvent, is not called on click on the events

and furthermore the events are overlapping

[ka215]

I have merged to my develop branch on local this PR as test, then the plugin has seen several problems. I should resolve that problems to be commonly work various use-cases.

Unfortuly I'm thinking that is likely difficult now because I hard to working to develop new version of this plugin for native JavaScript (without jQuery); Sorry!

[GBonnaire]

Hi @ka215, if you need help, ask me (it's long time, but, if you have problem, maybe i can help you)

I am interrested by new version on native (javascript vanilla)