为了账号安全,请及时绑定邮箱和手机立即绑定

如何更改 fullcalendar v5 中的空事件选择内容?

如何更改 fullcalendar v5 中的空事件选择内容?

宝慕林4294392 2023-11-02 20:12:55
我想在空的时间网格事件和已经渲染的事件中显示不同的内容。我使用过, eventContent但它改变了它们中的内容。eventContent: function (event) {        console.log(event)        var etitle = ''        if (event.event.title) {            etitle = `<label title="` + event.event.title + `" class="bg-b-warning event-lbl-shadow rounded py-1 px-2 text-light " style="overflow: hidden; max-width: 100%;">` + event.event.title + `</label>`        } else {            etitle = ''        }        return {            html: `        <div class="st_event_container overflow-hidden w-100 p-2 row mx-auto">            <div class="col p-0 "><label class="bg-light event-lbl-shadow rounded py-1 px-2 text-dark mr-1">`+ event.timeText + `</label></div><div class="col p-0 mb-1">` + etitle + `</div>                            </div>` }    },清晰的屏幕截图(蓝色事件已渲染,半透明是空网格选择)这里显示了4个资源,并设置为今日视图https://i.stack.imgur.com/XDoSK.png
查看完整描述

1 回答

?
慕桂英4014372

TA贡献1871条经验 获得超13个赞

selectMirror当选项设置为时,似乎会发生这种情况true。(我只是为未来的读者澄清这一点,因为问题中没有提到该选项的使用,但如果没有设置,这种行为就不可能发生。)


有一种简单的方法可以区分正常事件和这些“镜像”事件 - 如果您检查提供给 eventContent 回调的信息对象(以及您在控制台中登录的代码),您将看到有一个isMirror属性仅当正在渲染的元素表示镜像选择时才设置为 true。


所以你可以写这样的东西:


eventContent: function(info)

{

  if (info.isMirror == true)

  {

    //do whatever you want to do for mirror events here

  }

  else

  {

    //do whatever you want to do for regular events here

  }

}

(注意代码质量说明:在我的示例中,我将参数重命名为“info”,因为“event”是一个用词不当 - 事件数据存储在 info 对象内的属性中,编写类似 event.event.title 的内容显然是荒谬的,并且因为 isMirror 不是事件的属性,所以书写event.isMirror可能会产生误导。使用错误的名称也会使您的代码在您稍后返回时更难以理解。)


查看完整回答
反对 回复 2023-11-02
  • 1 回答
  • 0 关注
  • 67 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信