0

Как создавать события и внутри отображать изображения? Использую базу данных firebase и чистый js. Давно задаюсь этим вопросом. Объясните или может есть какие-то примеры?

1 ответ 1

1

const Calendar = FullCalendar.Calendar;
const calendarEl = document.getElementById('calendar');

const calendar = new Calendar(calendarEl, {
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  editable: true,
  dateClick: (info) => {
    calendar.addEvent({
      title: 'Привет',
      start: info.dateStr,
      image_url: 'https://picsum.photos/50'
    });
  },
  eventContent: (arg) => {
    const imgUrl = arg.event._def.extendedProps.image_url;
    const imgNode = document.createElement('img');
    imgNode.src = imgUrl;
    
    const title = arg.event._def.title;
    const titleNode = document.createElement('h4');
    titleNode.innerHTML = title;

    const arrNodes = [titleNode, imgNode];

    return {
      domNodes: arrNodes
    };
  },
  dayMaxEvents: 2,
  locale: 'ru'
});

calendar.render();
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  display: block;
  width: 100%;
  padding: 0 15px;
}

.fc .fc-toolbar-title {
  font-size: 1em !important;
}

.fc .fc-button {
  font-size: 0.75em !important;
}

.fc-daygrid-event-harness {
  margin-bottom: 10px;
}

.fc-event-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.fc-event-main > * + * {
  margin-top: 5px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.css">


<div class="container">
  <div id='calendar-container'>
    <div id='calendar'></div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/locales-all.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.