时间戳

首页 > 解决方案 > FullCalendar 通过 HTTP 检索数据

angular - FullCalendar 通过 HTTP 检索数据

问题描述

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

标签： angularangular6

解决方案

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

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

这篇文章涵盖了关于如何打开 Model的讨论。我在下面的例子中添加了它。

以下示例为您提供了一个想法，即在您单击事件以及 Day Box 时显示弹出窗口。

小提琴查看它运行时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();
    }
  });
})

推荐阅读