Our powerful JS Calendar component


Post by jhemela »

Hi,

I was wondering but can't find a working documentaion reference to this, on how you can add a custom action in the tooltip and also passing the event to it.

	eventTooltipFeature: {
		// Configuration options are passed on to the tooltip instance.
		// Override the default which is to show on click.
		titleRenderer: eventRecord => eventRecord.name,
		showOn       : 'hover',
		header       : {
			titleAlign: 'start'
		}, // We want the tooltip's left edge aligned to the right edge of the tooltip window if possible.
		align        : 'r-l',
		// Mustn't shrink because of large, graphical content
		minWidth     : null,
		renderer     : data => `<dl>
                <dt> ${data.eventRecord.eventType ? data.eventRecord.eventType : ''}</dt>
                <dt style="margin-bottom:15px">${JSON.stringify(data.eventRecord.isRecurring)}</dt>
                <dt style="margin-bottom:3px"> <i style="font-size:18px" class="fas fa-clock"></i><span style="margin-left:10px">${moment(data.eventRecord.startDate).format('HH:mm')}</span></dt>
                <dt style="margin-bottom:3px"> <i style="font-size:18px" class="fas fa-clock"></i><span style="margin-left:10px">${moment(data.eventRecord.endDate).format('HH:mm')}</span></dt>
            </dl>
            `
	},
Attachments
2020-12-14 12_45_16-https___ol-d-ict.corpads.aurubis.com_#_calendar.png
2020-12-14 12_45_16-https___ol-d-ict.corpads.aurubis.com_#_calendar.png (24.39 KiB) Viewed 1121 times

Post by mats »

Here's some sample code for you to try:

features : {
    eventTooltip : {
        tools : [
            {
                cls     : 'b-fa b-fa-cut',
                handler : function() {
                    this.eventRecord.split();
                    this.hide();
                }
            },
            {
                cls     : 'b-fa b-fa-trash',
                handler : function() {
                    this.eventRecord.remove();
                    this.hide();
                }
            },
            {
                cls     : 'b-fa b-fa-angle-left',
                handler : function() {
                    this.eventRecord.shift(-1);
                }
            },
            {
                cls     : 'b-fa b-fa-angle-right',
                handler : function() {
                    this.eventRecord.shift(1);
                }
            }
        ],

    header : {
        titleAlign : 'start'
    },

    onBeforeShow({ source : tooltip }) {
        tooltip.title = tooltip.eventRecord.name;
    },

    template : data => `<dl>
        <dt>Assigned to:</dt>
        <dd>
             ${data.eventRecord.resource.get('image') ? `<img class="resource-image" src="../_shared/images/users/${data.eventRecord.resource.get('image')}"/>` : ''}
             ${data.eventRecord.resource.name}
        </dd>
        <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>
    `
    // You can also use Tooltip configs here, for example:
    // anchorToTarget : false,
    // trackMouse     : true
}
},

Post by jhemela »

Hi Mats,

How do you need to add this to the config and component?
Because when i add it my events are nor displaying anymore
Now i have:

eventTooltipFeature: {
		tools: [
			{
				cls    : 'b-fa b-fa-cut',
				handler: function () {
					this.eventRecord.split();
					this.hide();
				}
			},
			{
				cls    : 'b-fa b-fa-trash',
				handler: function () {
					this.eventRecord.remove();
					this.hide();
				}
			},
			{
				cls    : 'b-fa b-fa-angle-left',
				handler: function () {
					this.eventRecord.shift(-1);
				}
			},
			{
				cls    : 'b-fa b-fa-angle-right',
				handler: function () {
					this.eventRecord.shift(1);
				}
			}
		],
		// Configuration options are passed on to the tooltip instance.
		// Override the default which is to show on click.
		titleRenderer: eventRecord => eventRecord.name,
		showOn       : 'hover',
		}
   <calendar
                ref="calendar"
                :eventTooltipFeature="calendarConfig.eventTooltipFeature"
        ></calendar>

Post by mats »

Seems like this might require a fix on our end, we will try to fix this for next release. https://github.com/bryntum/support/issues/2106


Post by jhemela »

Hi mats,

Okay, and thank you!


Post Reply