Error on OpenEvent... It's not working.

[manjoca]

Hi, I did that google inspect in your example and I tried to implement an example page like yours. In my example when I click in some event it is not showing any informations in <div class="timeline-event-view"> as yours example. In your case, when you click on the event this DIV is replaced for the title and content of the event. But it's not happening in my implementation and I can't find why...

Below you can find my script... `

    $(function () {
        $("#myTimeline").Timeline({
            type: "bar",
            startDatetime: "currently",
            scale: "day",
            range: 3,
            rows: 2,
            minGridSize: 60,
            loader: "selector",
            sidebar: { sticky: true, overlay: true, list: ["<label>Row 1</label>", "<label>Row 2</label>"] },
            headline: { display: true, range: true, format: { custom: "%Y-%m-%d" } },
            ruler: {
                truncateLowers: false,
                top: {
                    lines: ["year", "month", "weekday", "day"],
                    height: 26,
                    fontSize: 12,
                    color: "#333",
                    background: "transparent",
                    //locale:     "de-DE",
                    format: {
                        timeZone: "UTC", weekday: "short", year: "numeric", month: "long", day: "numeric"
                    }
                },
                bottom: {
                    lines: ["week"],
                }
            },
            debug: false,
            //eventMeta: {
            //    display: true,
            //    scale: 'hour',
            //},
            eventData: [{ eventId: 1, start: '2020-06-05 10:00:00', end: '2020-06-06 14:00:00', row: 1, label: '6000011111', content: 'Testes OP 6000011111', bgColor: '#FFE7E7', extend: { toggle: 'tooltip', placement: 'botton' } },
                        { eventId: 2, start: '2020-06-06 08:30:00', end: '2020-06-07 10:00:00', row: 2, label: '6000022222', content: 'Testes OP 6000022222', bgColor: '#E7E7FF', extend: { toggle: 'tooltip', placement: 'top' } },
                        { eventId: 3, start: '2020-06-07 11:30:00', end: '2020-06-08 16:00:00', row: 1, label: '6000033333', content: 'Testes OP 6000033333', bgColor: '#FFE7E7', extend: { toggle: 'tooltip', placement: 'botton' } },
                        { eventId: 4, start: '2020-06-09 00:00:00', end: '2020-06-10 00:00:00', row: 2, label: '6000044444', content: 'Testes OP 6000044444', bgColor: '#E7E7FF', extend: { toggle: 'tooltip', placement: 'top' } }],
            zoom: true
        }).tooltip({
            selector: '[data-toggle="tooltip"]',
            html: true
        });


        $("#myTimeline").Timeline("dateback", { scale: "day", range: 5, shift: false })

        $("#myTimeline").Timeline("initialized", function (self, data) { console.log(["User's callback", self, data]) })

        


    })


    $(document).on('click', '.jqtl-event-node', function () {
        $('#viewer> label.h5').text('The timeline event details are displayed in this block.')



    })

    function openEvent(e) {
        alert('Custom Callback Local Function!')
        console.log(e)
    }

</script>`

[jorgefspf]

@manjoca Did you solve this problem? I'm having the same issue. Best Regards

[ka215]

Hi there, and sorry for my late reply.

This was a bug. In the current plugin, when parsing the selector of the timeline instance itself, the string is converted to lowercase and judged. Therefore, setting a selector that contains uppercase letters on a timeline element will not trigger some internal event methods.

I will release a fixed version of this bug as soon as possible.

Until then, I'm sorry, but please do not include uppercase letters in the selector of the timeline element.

cf.

<div id="myTimeline"></div> <-- NG

<div id="mytimeline"></div> <-- OK

Thank you.

[ka215]

Hi,

I fixed a bug that some methods did not work if the selector of the timeline instance contained uppercase letters, at version 2.1.1.

Thank you.

[wimurk]

Hi,

First of all, great package. But... it seems running behind somethings. The docs are very unclear and the demo isn't working. The click events don't work at all. At least im not getting it to work.

Isn't there a click event like

  $('#mytimeline').Timeline(type, [{
      eventId: id,
      start: "start",
      end: "end",
      color : '#ffff',
      row: 1,
      label: "event",
      eventClicker : (event) => {
         //show added event
      }
  }]);
  
  //or
  
  $(document).on('click', '#mytimeline:event', (event) => {
     //show added event
  });