fullcalendar / fullcalendar

Full-sized drag & drop event calendar in JavaScript
https://fullcalendar.io
MIT License
18.48k stars 3.6k forks source link

eventContent on official doc not working #7342

Closed linonetwo closed 12 months ago

linonetwo commented 1 year ago

Reduced Test Case

https://codepen.io/linonetwo/pen/ExdMrWy?editors=001

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

Which connector are you using (React/Angular/etc)?

No connector (vanilla JS)

Bug Description

eventContent: function(arg, createElement) {
      var innerText

        innerText = 'urgent event'

      return createElement('i', {}, innerText)
    },

This works in 6.0.2 , but not work after upgrade to 6.1.8

Can't sure which version causes this, because when try to downgrade to 6.1.0 to bysect, it errors about @fullcalendar/premium-common@6.1.8 can't find preact.js or something.

截屏2023-05-26 14 13 38

arshaw commented 1 year ago

Confimed. I'll fix this in the next minor release.

arshaw commented 1 year ago

Similar to https://github.com/fullcalendar/fullcalendar/issues/7276

krishna-koushik commented 1 year ago

any idea when this will be fixed?

linonetwo commented 1 year ago

I think bad global economy is influencing many open-source developer, no income means we need to do outsourced jobs instead of main open-source project.

linonetwo commented 1 year ago

@krishna-koushik see https://github.com/tiddly-gittly/tiddlywiki-calendar/commit/ee49df7fa83bca18fd01550638e56d866a1599c4 for workaround, also see https://github.com/tiddly-gittly/TidGi-Desktop for a local-first note app that use it.

krishna-koushik commented 1 year ago

Awesome @linonetwo thank you very much

arshaw commented 12 months ago

Fixed in v6.1.9

Updated repro: https://codepen.io/arshaw/pen/abPEMGG?editors=0010 (NOTE: you originally returned an array, which is not supported. I corrected this)

darksabrefr commented 4 months ago

Fixed in v6.1.9

Updated repro: https://codepen.io/arshaw/pen/abPEMGG?editors=0010 (NOTE: you originally returned an array, which is not supported. I corrected this)

@arshaw Not supporting arrays in v6 is an undocumented and unintentional breaking change and there's probably a bug somewhere, here's the facts :

So is it a bug ? A typing issue ? We have a bunch of code based on this implementation, and I don't want to start fixing the v6 issues if the problem is in FullCalendar, not in our code.

Thank you in advance !

Edit: the change comes from this commit, previously, the default case was innerContent = customGeneratorRes: https://github.com/fullcalendar/fullcalendar/commit/9519fabd73f93857dfc4a5dd9135aa6cc2c11a2c

darksabrefr commented 4 months ago

A simple suggestion to restore the v5 behavior with arrays, in https://github.com/fullcalendar/fullcalendar/blob/main/packages/core/src/content-inject/ContentInjector.ts

-import { createElement, ComponentChild, JSX, Ref, isValidElement } from '../preact.js'
+import { createElement, ComponentChild, ComponentChildren, JSX, Ref, isValidElement } from '../preact.js'
 import { CustomContentGenerator } from '../common/render-hook.js'
 import { BaseComponent, setRef } from '../vdom-util.js'
 import { guid } from '../util/misc.js'
@@ -45,7 +45,7 @@ export class ContentInjector<RenderProps> extends BaseComponent<ContentInjectorP
     const { customGenerator, defaultGenerator, renderProps } = props
     const attrs = buildElAttrs(props, [], this.handleEl)
     let useDefault = false
-    let innerContent: ComponentChild | undefined
+    let innerContent: ComponentChildren | undefined
     let queuedDomNodes: Node[] = []
     let currentGeneratorMeta: any

@@ -57,7 +57,7 @@ export class ContentInjector<RenderProps> extends BaseComponent<ContentInjectorP
       if (customGeneratorRes === true) {
         useDefault = true
       } else {
-        const isObject = customGeneratorRes && typeof customGeneratorRes === 'object' // non-null
+        const isObject = customGeneratorRes && typeof customGeneratorRes === 'object' && !Array.isArray(customGeneratorRes) // non-null / non-array

         if (isObject && ('html' in customGeneratorRes)) {
           attrs.dangerouslySetInnerHTML = { __html: customGeneratorRes.html }