Our powerful JS Calendar component


Post by tinuc80 »

Hello, is it possible to append the existing out-of-box tooltip and add new field in there vs replacing as shown in https://bryntum.com/examples/calendar/tooltips/ example ?


Post by Animal »

Maybe in a beforeshow listener?


Post by tinuc80 »

Animal wrote: Mon Jan 17, 2022 4:54 pm

Maybe in a beforeshow listener?

Do you have an example showing how to append a new field in tool tip using beforeshow listener?


Post by Animal »


Post by Animal »

Tooltips like all Containers have a contentElement: https://www.bryntum.com/docs/calendar/api/Core/widget/Tooltip#property-contentElement

You can do anything you like with that.


Post by Animal »

I just added a little code to an example:

Screenshot 2022-01-17 at 16.12.22.png
Screenshot 2022-01-17 at 16.12.22.png (63.93 KiB) Viewed 906 times

Post by tinuc80 »

Animal wrote: Mon Jan 17, 2022 5:13 pm

I just added a little code to an example:

Screenshot 2022-01-17 at 16.12.22.png

Thank you. Can you divert me to the documentation for onBeforeShow and source.add? I am trying to add note value from the eventRecord in tooltip.


Post by Animal »

Here's the beforeShow event : https://www.bryntum.com/docs/calendar/api/Core/widget/Widget#event-beforeShow

When an event is fired, it also calls a method on itself called "on" plus the capitalized event name, so onBeforeShow will be called if you configure it in.

The add function. A Tooltip is a Panel which is a Container:

https://www.bryntum.com/docs/calendar/api/Core/widget/Container#function-add


Post by tinuc80 »

I am using OnBeforeShow to include additional information in tool tip and behavior is inconsistent.

below is my tool tip code snip

      features: {
        eventTooltip: {
          layout: 'vbox',
          // Configuration options are passed on to the tooltip instance.
          // Override the default which is to show on click.
          showOn: 'hover',
          // Configuration options are passed on to the tooltip instance
          // We want the tooltip's left edge aligned to the right edge of the event if possible.
          align: 'l-r',
          // Mustn't shrink because of large, graphical content
          minWidth: null,
          tools: {
            addtoOutlook: {
              cls: 'b-fa b-fa-calendar-alt',
              weight: 20,
              tooltip: 'Add to Outlook (.ics)',
              //tooltip: {
              //  getHtml: '',
              //  newInstance: true
              //},
              handler() {
                const eventRecord = this.eventRecord;
                // Add some custom ICS values (See https://tools.ietf.org/html/rfc5545 for more information)
                eventRecord.exportToICS({
                  LOCATION: eventRecord.location
                });
              }
            },
            viewmoreInfo: {
              cls: 'b-fa b-fa-info-circle',
              weight: 10,
              tooltip: 'More Info',
              //tooltip: {
              //  getHtml: 'More Info',
              //  newInstance: true
              //},
              handler() {
                let eventRecord = this.eventRecord;
                let eventDetailURL = hostingBaseURL + '/Main?ScreenId=CR306030&NoteID=' + eventRecord.id;
                window.open(eventDetailURL, '_blank');
              }
            }
          },
          //renderer: data => `<dl>
          //    ${data.eventRecord.get('note') ? `<dd>${data.eventRecord.note}</dd>` : ''}
          //</dl>`,
          onBeforeShow({ source }) {
            // Delete & Edit toolbar button always hidden
            this.tools.delete.hidden = true;
            this.tools.edit.hidden = true;

        if (typeof this.eventRecord.note != 'undefined' && this.eventRecord.note) {
          source.add({
            type: 'displayfield',
            cls: 'acmtooltipCSS',
            label: ''
          });

          source.add({
            type: 'displayfield',
            cls: 'acmtooltipCSS',
            label: this.eventRecord.note
          });
        }
      }
    },
    // No Editor since this is view only
    eventEdit: null
  }

At times, though there's value it doesnt show additional note in tooltip
at times, it keeps adding additional time like in attachment

Attachments
TooltipDuplication.png
TooltipDuplication.png (47.87 KiB) Viewed 800 times

Post by alex.l »

Checked in our online basic example, it works well to me.
I had to remove line

if (typeof this.eventRecord.note != 'undefined' && this.eventRecord.note) {

from my version.

How to reproduce that in our examples?

All the best,
Alex


Post Reply