Блог

Главная - Вопросы по программированию - как отобразить все детали выбранного события сразу в fullcalendar

как отобразить все детали выбранного события сразу в fullcalendar

#javascript #html #fullcalendar #fullcalendar-5

#javascript #HTML #fullcalendar #fullcalendar-5

Вопрос:

У меня есть следующая html-страница, которая использует fullcalendar:

 document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    editable: true,
    headerToolbar: {
      start: 'prev,next today',
      center: 'title',
      end: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    selectable: true, //can click to set event
    selectMirror: true, // so it's solid 
    unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears

    editable: true,
    eventStartEditable: true,
    eventResizableFromStart: true,
    eventDurationEditable: true,
    select: function(selectionInfo) {
      calendar.addEvent({
        title: 'dynamic event',
        start: selectionInfo.start,
        end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
      });
    }



  });
  calendar.render();

}); 
 <!DOCTYPE html>
<html>

<head>
  <title>Fullcalendar Demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
</head>

<body>
  <div id="calendar"></div>
</body>

</html>

Когда календарь находится в режиме просмотра недели, и я нажимаю (просто нажимаю один раз и ничего не делаю — это важно) где-нибудь, создается 30-минутное событие (время начала и окончания зависит от того, где вы нажимаете), и я могу видеть время начала и окончания на экранесобытие, но не заголовок («динамическое событие»). Только когда я нажимаю в другом месте календаря, я вижу заголовок, отображаемый на вышеупомянутом событии. Я подтвердил через консоль.регистрируйте утверждения (не в коде) о том, что заголовок фактически присутствует в объекте события в javascript, но есть ли способ, чтобы заголовок был сразу виден одним щелчком мыши (так что, вероятно, что-то, что нужно сделать в функции выбора)?

Ответ №1:

Вам просто нужно запустить calendar.unselect(); после добавления события, чтобы элемент, который визуализирует выделение (который из-за опции selectMirror является сплошным, а не прозрачным), не накладывался поверх отображаемого события.

Выбранные элементы не будут удалены автоматически, пока вы не нажмете где-нибудь еще (если у вас нет unselectAuto: true в настройках).

Соответствующая документация:

https://fullcalendar.io/docs/Calendar-unselect

https://fullcalendar.io/docs/unselectAuto

ДЕМОНСТРАЦИЯ:

 document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    editable: true,
    headerToolbar: {
      start: 'prev,next today',
      center: 'title',
      end: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    selectable: true, //can click to set event
    selectMirror: true, // so it's solid 
    unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears

    editable: true,
    eventStartEditable: true,
    eventResizableFromStart: true,
    eventDurationEditable: true,
    select: function(selectionInfo) {
      calendar.addEvent({
        title: 'dynamic event',
        start: selectionInfo.start,
        end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
      });
      calendar.unselect();
    }



  });
  calendar.render();

}); 
 <!DOCTYPE html>
<html>

<head>
  <title>Fullcalendar Demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
</head>

<body>
  <div id="calendar"></div>
</body>

</html>