Python,Django, Bootstrap, fullcalendar 如何替换Events

Question

Python,Django, Bootstrap, fullcalendar

如何把 fullcalendar 中的 Events 静态参数替换为数据库取出的结果？求帮忙解答一下

1. Script 中替换代码怎么写？
2. url: "{% url 'get_calendar_list' %}"
3. Django View 怎么返回？直接返回 HttpResponse 就可以吗？

def get_calendar_list(request):
    calendar_list = CalendarEvent.objects.all()
    return HttpResponse(calendar_list)

        <div class="col-md-10">
            <div id='calendar'></div>
        </div>



<script type="text/javascript" src="js/full-calendar/fullcalendar.js"></script>

<script>

  $(document).ready(function() {
    
    /* initialize the external events
    -----------------------------------------------------------------*/
    $('#external-events .fc-event').each(function() {

      // store data so the calendar knows to render an event upon drop
      $(this).data('event', {
        title: $.trim($(this).text()), // use the element's text as the event title
        stick: true // maintain when user navigates (see docs on the renderEvent method)
      });

      // make the event draggable using jQuery UI
      $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
      });

    });


    /* initialize the calendar
    -----------------------------------------------------------------*/
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      },
      defaultDate: '2015-02-12',
      editable: true,
      droppable: true, // this allows things to be dropped onto the calendar
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2015-02-01',
          color: '#9A80B9'
        },
        {
          title: 'Long Event',
          start: '2015-02-07',
          end: '2015-02-10',
          color: '#EF4836'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2015-02-09T16:00:00'
        }
      ]
    });
    
  });

</script>

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要在 Django 中使用 fullcalendar 并从数据库中获取事件数据，你需要对前端和后端的代码进行一些修改。以下是你可以参考的步骤：

1. 修改 JavaScript 中的事件数据获取方式

首先，你需要将 fullcalendar 的 events 属性中的静态数据替换为从 Django 视图获取的 URL。可以使用 AJAX 来获取数据。在 JavaScript 中，你可以使用 jQuery 的 $.ajax 方法或者 fetch API 来获取数据。假设你的 Django 视图的 URL 是 {% url 'get_calendar_list' %}，你可以这样修改代码：

$('#calendar').fullCalendar({
  // ... 其他配置不变 ...
  events: function(start, end, timezone, callback) {
    $.ajax({
      url: "{% url 'get_calendar_list' %}",
      dataType: 'json', // 假设你的视图返回的是 JSON 格式的数据
      success: function(data) {
        callback(data.events); // 假设 data.events 是你的事件列表
      }
    });
  }
});

2. 修改 Django 视图以返回正确格式的数据

然后，你需要修改 Django 视图 get_calendar_list，使其返回 JSON 格式的数据。你可以使用 Django 的 JsonResponse 而不是 HttpResponse：

from django.http import JsonResponse

def get_calendar_list(request):
    calendar_list = CalendarEvent.objects.all()
    # 将 calendar_list 转换为 JSON 格式的数据，假设每个事件至少包含 'title' 和 'start' 属性
    events = [event.to_dict() for event in calendar_list]
    return JsonResponse(events, safe=False)

注意事项：

• 确保你的 Django 视图允许跨站请求（如果你的前端和 Django 服务不在同一域）。这可以通过设置视图的 cors_headers 或者在 Django 设置中配置 CORS 来实现。
• 根据你的 CalendarEvent 模型结构调整上面的代码，确保它能正确返回 fullcalendar 需要的数据格式。可能需要对每个事件进行序列化，确保它们有 title 和 start 属性（以及其他可能的属性如 end, id 等）。
• 如果你的事件包含日期时间，确保它们是以 fullcalendar 需要的格式提供的，通常是 ISO 8601 格式。
• 根据你的具体需求，可能还需要处理分页、错误处理等其他情况。

通过这些步骤，你应该能够将 fullcalendar 的事件数据从静态替换为从 Django 数据库获取的数据。