Question

我想实现FullCalendar，并具有通过HTTP检索数据的功能。并具有从选定日期打开对话框的功能。是否有适合这种实现的库？还是现成的例子？

Answer 1

通过HTTP提供有关数据的完整详细信息，但是您可以调用API来获取数据，然后将其显示在fullcalendar.io

中

您可以使用fullcalendar.io完成所有这些工作。

这篇文章涵盖了有关how to open Model 的讨论。我在以下示例中添加了它。

以下示例为您提供了一种想法，即单击事件和“日框”时显示弹出窗口。

拨弄它以查看运行时https://jsfiddle.net/alifaraze/mr53d7nz/27/

<div id="calendar"></div>
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
            <h4 id="modalTitle" class="modal-title"></h4>
        </div>
        <div id="modalBody" class="modal-body"> </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>



$(document).ready(function() {

  $('#calendar').fullCalendar({
    events: [{
        id: 1,
        title: 'Full Day Event - Click Me',
        start: '2019-01-02',
        end: '2019-01-03',
        description: 'Full day event description'
      },
      {
        id: 2,
        title: 'Whole Week Event - Click Me',
        start: '2019-01-06',
        end: '2019-01-10',
        description: 'Whole week event description'
      }
      // more events here
    ],
    eventRender: function(event, element) {
      $(element).popover({
        title: function() {
          return "<B>" + event.title + "</B>";
        },
        placement: 'auto',
        html: true,
        trigger: 'click',
        animation: 'false',
        content: function() {
          return "<h3>"+ event.description +"</h3>"
        },
        container: 'body'
      }).popover('show');

    },
    dayClick: function(date, jsEvent, view) {
      $('#modalTitle').html(date.format());
      $('#modalBody').html('Clicked on: ' + date.format() 
        +'<br/>Current view: ' + view.name 
        +'<br/>Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
      $('#calendarModal').modal();
    }
  });
})

FullCalendar通过HTTP检索数据

1 个答案: