Our pure JavaScript Scheduler component


Post by jnarowski »

I have tooltips now working in the calendar, but they are not working in the scheduler view (nothing is showing up either onhover or onclick).

We're embedding the scheduler within the calendar.

I have this in modes.

modes: {
    day: {
    type: 'scheduler',
    displayName: 'Timeline',
    features: {
      eventTooltip: {
        // Tooltip configs can be used here
        align: 'l-r', // Align left to right,
        // A custom HTML template
        template: (data) => `<dl>
          <dt>Assigned to:</dt>
             <dt>Time:</dt>
             <dd>
                 ${DateHelper.format(
                   data.eventRecord.startDate,
                   'LT'
                 )} - ${DateHelper.format(data.eventRecord.endDate, 'LT')}
             </dd>
             ${
               data.eventRecord.get('note')
                 ? `<dt>Note:</dt><dd>${data.eventRecord.note}</dd>`
                 : ''
             }

         ${
           data.eventRecord.get('image')
             ? `<dt>Image:</dt><dd><img class="image" src="${data.eventRecord.get(
                 'image'
               )}"/></dd>`
             : ''
         }
     </dl>`,
  },
}
 }

Post by tasnim »

Hi,

Are you able to reproduce it here with our online demo https://bryntum.com/products/calendar/examples/calendar-scheduler/
If yes, could you please provide the steps to reproduce it?


Post by Animal »

It looks like a bug. It's looking like the Calendar overrides the eventTooltip property in the configuration of its captive Scheduler. I will check into it.


Post by Animal »

OK, no, the Calendar's eventTooltip is supposed to handle that, so in theory, configure it on the Calendar.


Post by Animal »

So on the Calendar:

        eventTooltip   : {
            // Tooltip configs can be used here
            align: 'l-r', // Align left to right,
            // Custom content
            renderer : data => 'I am a tooltip!'
        }

The options you pass in there will configure an instance of this class: https://bryntum.com/products/calendar/docs/api/Calendar/widget/EventTip


Post by Animal »

And note that in Calendar, https://bryntum.com/products/calendar/docs/api/Calendar/feature/EventTooltip#config-showOn defaults to 'click' to avoid lots of tooltips showing when you just move over the schedule


Post by jnarowski »

This seemed to do the trick. I think I might have been overriding the defaults at some level in the config tree. Appreciate the help!


Post by jnarowski »

Different but related question: How would I customize the entire tooltip if I wanted to? IE replace the header etc with all of my own HTML. It appears renderer only replaces the body but the header is unaffected.

https://jmp.sh/NkybXQtO


Post by marcio »

Best regards,
Márcio


Post by jnarowski »

That does seem like exactly what I am looking for. It didn't appear to work as expected though:

    features: {
      eventTooltip: {
        // Tooltip configs can be used here
        align: 'l-r', // Align left to right,
        // Custom content
        template: (data) => `<dl>Template</dl>`,
        // renderer: (data) => 'I am a tooltip!',
      },
    },

Renderer does work.

After adding template and commenting out renderer, when I click the tooltip in calendar or scheduler view, it now looks like this:
https://jmp.sh/diJwdKew


Post Reply