Мне нужно спроектировать этот экран с помощью 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>
`;
},
},
результат
Согласно документации по внедрению контента, если вы хотите вернуть 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