Does anyone know of any way to force the dmx calendar (full calendar) to force the title to rather render as html, I am trying to get as close to this as possible.
I am hoping if i can make the title render some html, then i can add a few badges in the title, I already have all the data in the title correctly, just all renders as a string of text at the moment sadly.
Thanks to @JonL and @ben I managed to achieve the result I was looking for.
The biggest part of this is adding a piece of code inside /public/dmxAppConnect/dmxCalendar/dmxCalendar.js
Find the following
onEventRender: function (e) { var t = new dmx.DataScope({ event: this.getEventProps(e.event) }, this); e.event.source && e.event.source.internalEventSource.extendedProps && e.event.source.internalEventSource.extendedProps.bs4Tooltip ? $(e.el).tooltip({ placement: dmx.parse(e.event.source.internalEventSource.extendedProps.bs4TooltipPlacement, t) || "top", title: dmx.parse(e.event.source.internalEventSource.extendedProps.bs4TooltipTitle, t) || "" }) : this.props["bs4-tooltip"] && $(e.el).tooltip({ placement: dmx.parse(this.props["bs4-tooltip-placement"], t) || "top", title: dmx.parse(this.props["bs4-tooltip-title"], t) || "" }) }
And change to
onEventRender: function (e) { e.el.querySelector('.fc-title').innerHTML = "<i>" + e.event.title + "</i>"; var t = new dmx.DataScope({ event: this.getEventProps(e.event) }, this); e.event.source && e.event.source.internalEventSource.extendedProps && e.event.source.internalEventSource.extendedProps.bs4Tooltip ? $(e.el).tooltip({ placement: dmx.parse(e.event.source.internalEventSource.extendedProps.bs4TooltipPlacement, t) || "top", title: dmx.parse(e.event.source.internalEventSource.extendedProps.bs4TooltipTitle, t) || "" }) : this.props["bs4-tooltip"] && $(e.el).tooltip({ placement: dmx.parse(this.props["bs4-tooltip-placement"], t) || "top", title: dmx.parse(this.props["bs4-tooltip-title"], t) || "" }) }
Now you can add HTML inside the
event-title="'Main Title <br><span class="badge badge-warning">50</span> '+dynamic_data"
attribute, and it will render your html tags instead of just stripping them all.
Please note, this is a hacky workaround for a specific goal, and when Wappler updates the dmxCalendar.js file, your changes will be lost, so it is really not an ideal thing to do, but it does work if you really need it to such as in my case.
Maybe if this solution is not too terrible @patrick may add it as an option.
Now I also needed the tooltips to render a little html too.
Find this part
$(e.el).tooltip({placement:dmx.parse(e.event.source.internalEventSource.extendedProps.bs4TooltipPlacement,t)||"top",title:dmx.parse(e.event.source.internalEventSource.extendedProps.bs4TooltipTitle,t)||""})
Change to
$(e.el).tooltip({placement:dmx.parse(e.event.source.internalEventSource.extendedProps.bs4TooltipPlacement,t)||"top",title:dmx.parse(e.event.source.internalEventSource.extendedProps.bs4TooltipTitle,t)||"",html:true})
I know its a massive speed hit rendering html inside all my events and tooltips, and a possible xss attack security hole according to some articles i have read, but for my situation, the calendar is only pulling a week worth or availability at a time, and its inside a secure admin dashboard for limited users, and not just a general public thing, so I figured this would all be ok.