Rendering Buttons in day views using FullCalendar with Vue3-CodePudding

I need to design this screen with vuejs and I decided to use FullCalendar library

I added my FullCalendar component.

When I try to render button with DaycellContent, I am not successful

here is my fullcalendar options

 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  onClick="console.log('Button 1 clicked on ${date.toString()}')">Button 1</button>
            <button  onClick="console.log('Button 2 clicked on ${date.toString()}')">Button 2</button>
            <button  onClick="console.log('Button 3 clicked on ${date.toString()}')">Button 3</button>
          `;
        },
      },

the result

CodePudding user response：

As per the content injection documentation, if you want to return HTML you need to put that in a specific property of the returned object. If you simply return a string it will be treated as plain text.

So the data you return will need to be in this format: { html: "your HTML content here" }.

In your example, this is the solution:

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

Demo (using plain JS, but the solution is identical): https://codepen.io/ADyson82/pen/rNrdeJp