When showing event tooltip,
The header will be display name of event,
So I want to click this name to redirect to another page ( example: detail page )
How can I doing that?
Maybe, I think please guide me set <a> tag for this name or handle event click in this name then I can use Angular for redirect
Support Forum
- Attachments
-
- eventtooltip.png (30.29 KiB) Viewed 626 times
As to redirect, it would be probably easiest to add a new tool. Clicking on that gives control to your javascript code where you can do whatever you want.
You can put time before the title in onBeforeShow
function.
See the source of https://bryntum.com/examples/scheduler/tooltips/ for the reference.
This is a bit tricky, but doable, because the time is part of the event header and name of event body. The workaround would be to hide the event header with css and add the time to the renderer. For that:
CSS to hide the header:
.b-dayview-day-container .b-event-header {
display:none;
}
Week mode renderer:
week : {
// Render an icon showing number of invitees (editable in the event editor)
// showTime : false,
eventRenderer : ({ eventRecord, renderData }) => {
if (eventRecord.important) {
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
}
else if (eventRecord.nbrAttachments > 0) {
renderData.iconCls['b-fa b-fa-paperclip'] = 1;
}
else if (eventRecord.invitees.length > 0) {
renderData.iconCls['b-fa b-fa-user-friends'] = 1;
}
return `
<span class="b-event-name">${DateHelper.format(eventRecord.startDate, 'LT')} ${StringHelper.encodeHtml(eventRecord.name)}</span>
${eventRecord.image ? `<img src="${eventRecord.image}" alt="${
StringHelper.encodeHtml(eventRecord.name)}" class="b-event-image"/>` : ''}
`;
}
Note: There is showTime
property intended for configuring show/hidden time but it is not public and there is a bug related to it. The ticket is here https://github.com/bryntum/support/issues/3239
After the bug is fixed, there will be a better and simpler method of achieving that.