Рендеринг кнопок в дневных представлениях с использованием FullCalendar с Vue3

Мне нужно спроектировать этот экран с помощью 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.info('Button 1 clicked on ${date.toString()}')">Button 1</button>
            <button class = "my-button" onClick = "console.info('Button 2 clicked on ${date.toString()}')">Button 2</button>
            <button class = "my-button" onClick = "console.info('Button 3 clicked on ${date.toString()}')">Button 3</button>
          `;
        },
      },

результат

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Согласно документации по внедрению контента, если вы хотите вернуть HTML, вам нужно поместить его в определенное свойство возвращаемого объекта. Если вы просто вернете строку, она будет обработана как обычный текст.

Таким образом, данные, которые вы возвращаете, должны быть в следующем формате: { html: "your HTML content here" }.

В вашем примере это решение:

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

Демо (с использованием простого JS, но решение идентично): https://codepen.io/ADyson82/pen/rNrdeJp

Спасибо за ваш ответ, вы избавили меня от многих проблем. но когда мы отображаем кнопки таким образом, номера дней по умолчанию в ячейках исчезают. Есть ли вариант опций для этого? @ADyson

Busenur Adıbelli 24.01.2023 12:36

Другие вопросы по теме