полная информация о календаре в модальном всплывающем окне - PullRequest
Новая
       14

полная информация о календаре в модальном всплывающем окне

1 голос
/ 08 мая 2019

Я работаю над fullCalendar и пытаюсь получить информацию о событии для показа во всплывающем модале (при нажатии на событие).

Однако я могу получить только название события, место, дату начала и дату окончания.

Мне также нужно показать время начала и время окончания.Что я делаю не так?

Мой код указан ниже: 

eventClick:  function(event, jsEvent, view) {
    var startdate= new Date(event.event.start);
    var enddate= new Date(event.event.end);
    var starttime= new Date(event.event.startTime);
    var endtime= new Date(event.event.endTime);
    //console.log(event);
    $('#modalID').html(event.event.id);
    $('#modalTitle').html(event.event.title);
    $('#modalLocation').html(event.event.extendedProps.location);
    $('#modalStartDate').html(moment(startdate.getTime()).format("DD-MM-YYYY"));
    $('#modalStartTime').html(moment(starttime.getTime()).format("hh:mm A"));

    //moment("01:15:00 PM", "h:mm:ss A").format("HH:mm:ss")

    $('#modalEndDate').html(moment(enddate.getTime()).format("DD-MM-YYYY"));
    $('#modalEndTime').html(moment(endtime.getTime()).format("hh:mm A"));
    $('#fullCalModal').modal();
},

Мой обновленный код указан ниже 

 <script>

 document.addEventListener('DOMContentLoaded', function() {
 var calendarEl = document.getElementById('calendar');

 var calendar = new FullCalendar.Calendar(calendarEl, {

 plugins: [ 'interaction', 'dayGrid' ],
 defaultDate: '<cms:date format='Y-m-d' />',
 editable: true,
 eventLimit: true, // allow "more" link when too many events
 displayEventTime: false,

 events: [
 <cms:pages masterpage='events.php' show_future_entries='1'>
    {
 id: <cms:escape_json><cms:show k_page_id /></cms:escape_json>, 
 title: <cms:escape_json><cms:show k_page_title /></cms:escape_json>,
 location: <cms:escape_json><cms:show location /></cms:escape_json>,
 start: <cms:escape_json><cms:show start_date /></cms:escape_json>,
 startTime: <cms:escape_json><cms:show start_time /></cms:escape_json>,
 end: <cms:escape_json><cms:show end_date /></cms:escape_json>,
 endTime: <cms:escape_json><cms:show end_time /></cms:escape_json>
}<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
</cms:pages>
],
eventClick: function(info) {

var dateSettings = { "year": "numeric", "month": "2-digit", "day": "2-digit" 
};
var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false 
};

var startdate = calendar.formatDate(info.event.start,  dateSettings);
var startTime = calendar.formatDate(info.event.start,  timeSettings);

var enddate = calendar.formatDate(info.event.end || startdate, 
dateSettings);
var endTime = calendar.formatDate(info.event.end, timeSettings);

$('#modalID').html(info.event.id);
$('#modalTitle').html(info.event.title);
$('#modalLocation').html(info.event.extendedProps.location);
$('#modalStartDate').html(startdate);
$('#modalStartTime').html(startTime);
$('#modalEndDate').html(enddate);
$('#modalEndTime').html(endTime);
$('#fullCalModal').modal();
},

eventTextColor: '#FFFFFF',

});

calendar.render();
});

</script>

1 Ответ

1 голос
/ 08 мая 2019

Здесь вы действительно завязываете узлы.

1) Согласно документация event.start и event.end уже являются объектами Date.На самом деле нет необходимости анализировать их в другую дату или снова превращать их в объекты MomentJS.Просто используйте их, как они есть, и отформатируйте их по мере необходимости, используя предоставленную fullCalendar функциональность форматирования даты .

2) У объекта события (снова см. Документы выше) нет отдельного "startTime""или" endTime "свойство ... вся дата и время хранятся в пределах start и end.Я не уверен, откуда у вас мысль, что существуют отдельные свойства?Такого никогда не было ни в одной версии fullCalendar.

3) Вам нужно разобраться со случаем, когда свойство события end может быть нулевым, поэтому для этого есть немного дополнительной логики,и вместо этого просто используйте дату и время начала: 

eventClick: function(info) {
  var dateSettings = { "year": "numeric", "month": "2-digit", "day": "2-digit" };
  var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false };

  var startdate = calendar.formatDate(info.event.start,  dateSettings);
  var starttime = calendar.formatDate(info.event.start,  timeSettings);

  var enddate; 
  var endtime; 
  if (info.event.end != null) {
    enddate = calendar.formatDate(info.event.end, timeSettings );
    endtime = calendar.formatDate(info.event.end, dateSettings );
  } 
  else {
    enddate = startdate;
    endtime = starttime;
  }

  $('#modalID').html(info.event.id);
  $('#modalTitle').html(info.event.title);
  $('#modalLocation').html(info.event.extendedProps.location);
  $('#modalStartDate').html(startdate);
  $('#modalStartTime').html(starttime);
  $('#modalEndDate').html(enddate);
  $('#modalEndTime').html(endtime);
  $('#fullCalModal').modal();
},

Демо: https://codepen.io/anon/pen/eapjWN?editors=1010

NB Если, как кажется, вы используете fullCalendar v4, то ваши аргументы обратного вызова для eventClickнеправильно - снова посмотрите соответствующую документацию - ваши выглядят как аргументы v3.jsEvent и view больше не предоставляются отдельно, вместо этого они предоставляются внутри информационного объекта, который теперь является первым аргументом.И говорить об этом, называя первый аргумент event, действительно неверно, так как в нем содержится нечто большее.Тот факт, что вы написали event.event..., говорит о том, что у вас проблема с именами.Лучше назвать это более осмысленно.В интересах качества кода мой пример выше вносит эти изменения в дополнение к тем, которые необходимы для решения актуальной проблемы.

...