Our powerful JS Calendar component


Post by SHQK »

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

Attachments
eventtooltip.png
eventtooltip.png (30.29 KiB) Viewed 610 times

Post by SHQK »

Another question,
How can I move time of event next to name of event
For example: Team Hackathon - 10 AM
Or move name of event next to time of event
For example: 10 AM - Team Hackathon


Post by saki »

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.


Post by SHQK »

I mean there (see attachment) not in eventTooltip
I want to make them in the same line

Attachments
eventtooltip.png
eventtooltip.png (20.99 KiB) Viewed 597 times

Post by saki »

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.


Post by SHQK »

Many many thank Saki.


Post Reply