使用带有Vue3的FullCalendar在天视图中呈现按钮

ibrsph3r 于 2023-01-26 发布在 Vue.js

关注(0)|答案(1)|浏览(465)

我需要设计这个屏幕与vuejs和我决定使用FullCalendar库

我添加了FullCalendar组件。
当我尝试使用DaycellContent呈现按钮时，我没有成功
这是我的完整日历选项

calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: "dayGridMonth",
        // dateClick: this.handleDateClick,
        headerToolbar: {
          start: "",
          center: "title",
          end: "today,prevYear,prev,next,nextYear",
        },
        locale: "tr",
        events: [
          { title: "event 1", date: "2023-01-01" },
          { title: "event 2", date: "2023-01-02" },
        ],
        dayCellContent: (date) => {
          return `
            <button class="my-button" onClick="console.log('Button 1 clicked on ${date.toString()}')">Button 1</button>
            <button class="my-button" onClick="console.log('Button 2 clicked on ${date.toString()}')">Button 2</button>
            <button class="my-button" onClick="console.log('Button 3 clicked on ${date.toString()}')">Button 3</button>
          `;
        },
      },

得到

vue.js

来源：https://stackoverflow.com/questions/75219048/rendering-buttons-in-day-views-using-fullcalendar-with-vue3

1条答案

按热度按时间

gudnpqoy1#

根据content injection documentation，如果你想返回HTML，你需要把它放在返回对象的一个特定属性中，如果你只是返回一个字符串，它将被当作纯文本。
因此，您返回的数据需要采用以下格式：{ html: "your HTML content here" }.
在您的示例中，解决方案如下：

dayCellContent: (date) => {
  return { html: `
        <button class="my-button" onClick="console.log('Button 1 clicked on ${date.toString()}')">Button 1</button>
        <button class="my-button" onClick="console.log('Button 2 clicked on ${date.toString()}')">Button 2</button>
        <button class="my-button" onClick="console.log('Button 3 clicked on ${date.toString()}')">Button 3</button>
      `};
    }

演示（使用普通JS，但解决方案相同）：https://codepen.io/ADyson82/pen/rNrdeJp

赞(0）回复(0）举报 2023-01-26

我来回答

使用带有Vue3的FullCalendar在天视图中呈现按钮

1条答案

相关问题

热门标签

最新问答