Json 在FullCalendar.io中使用django过滤器

我正在Django项目中制作一个完整的日历，我想使用Django过滤器来过滤日历。我已经成功地创建了日历和过滤器，但我无法让它一起工作

是否有人有在fullcalendar中包含django过滤器（或其他过滤方法）的经验，或者有说明fullcalendar中过滤的文档链接

我的看法是：

def kalender2(request):
    all_events = Timing.objects.all()    
    myFilter = CalenderFilter(request.GET, queryset=all_events)
    all_events = myFilter.qs

    if request.GET:  
        event_arr = []
        for i in all_events:
            event_sub_arr = {}
            event_sub_arr['title'] = i.event,i.name 
            start_date = datetime.strptime(str(i.start_time.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
            end_date = datetime.strptime(str(i.end_time.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
            event_sub_arr['start'] = start_date
            event_sub_arr['status'] = i.event.status
            event_sub_arr['end'] = end_date
            event_arr.append(event_sub_arr)
        return HttpResponse(json.dumps(event_arr))

    context = {
        "events":all_events,
        "myFilter":myFilter,
    }
    return render(request,'kalender/kalender.html', context) 

这是日历的脚本和模板：

document.addEventListener（'DOMContentLoaded'，function（）{
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
初始视图：“dayGridMonth”，
初始日期：“2020-10-07”，
区域设置：“nl”，
slotMinTime：“08:00:00”，
headerToolbar：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、timeGridDay、listWeek”
},
按钮文字：{
timeGridDay:'Dag'，
今天：'Vandaag'，
timeGridWeek:“周”，
listWeek:“Lijst”，
dayGridMonth:“Maand”
},
eventDisplay:'块'，
活动：[
{events%%中的i的%s}
{
标题：“{i.event}{{i.name}}”，
开始：{i.start_time}日期：“Y-m-dh:i”}，
结束：{i.end_time}日期：“Y-m-dh:i”}，
状态：{{i.event.status}}，
类名：[“事件”，“{i.event.status}}}”，
全天：错，
},
{%endfor%}
],
eventTimeFormat:{//类似于'14:30:00'
小时：“2位”，
分钟：“两位数”，
梅里迪姆：错
}
});
calendar.render（）；
});

{%extends“base.html”%}
{%block content%}
{%load crispy_forms_tags%}
{{myFilter.form | crispy}}
佐肯
卡伦德

{%endblock content%}

您可以执行以下操作：

# views.py

def get_events(request):
    all_events = Timing.objects.all()    
    myFilter = CalenderFilter(request.GET, queryset=all_events)
    all_events = myFilter.qs

    event_arr = []
    for i in all_events:
        event_sub_arr = {}
        event_sub_arr['title'] = i.event,i.name 
        start_date = datetime.strptime(str(i.start_time.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
        end_date = datetime.strptime(str(i.end_time.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
        event_sub_arr['start'] = start_date
        event_sub_arr['status'] = i.event.status
        event_sub_arr['end'] = end_date
        event_arr.append(event_sub_arr)
        
       return JsonResponse(event_arr, safe=False) # safe=False is important, because Json actually
      # does not know about 'arrays'

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      initialDate: '2020-10-07',
      locale: 'nl',
      slotMinTime: "08:00:00",
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      buttonText: {
        timeGridDay: 'Dag',
        today:'Vandaag',
        timeGridWeek: 'Week',
        listWeek: 'Lijst',
        dayGridMonth: 'Maand'
      },
      eventDisplay: 'block',
      eventSources: [
         // your event source
         {
             url: {% url 'name_of_your_view' %} // here you specify the url of your view
             color: 'yellow',    // an option!
             textColor: 'black'  // an option!
         }
    ],

    eventTimeFormat: { // like '14:30:00'
        hour: '2-digit',
        minute: '2-digit',
        meridiem: false
    }
     
    });

    calendar.render();
  });

</script>

您的JavaScript可以如下所示：

# views.py

def get_events(request):
    all_events = Timing.objects.all()    
    myFilter = CalenderFilter(request.GET, queryset=all_events)
    all_events = myFilter.qs

    event_arr = []
    for i in all_events:
        event_sub_arr = {}
        event_sub_arr['title'] = i.event,i.name 
        start_date = datetime.strptime(str(i.start_time.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
        end_date = datetime.strptime(str(i.end_time.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
        event_sub_arr['start'] = start_date
        event_sub_arr['status'] = i.event.status
        event_sub_arr['end'] = end_date
        event_arr.append(event_sub_arr)
        
       return JsonResponse(event_arr, safe=False) # safe=False is important, because Json actually
      # does not know about 'arrays'

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      initialDate: '2020-10-07',
      locale: 'nl',
      slotMinTime: "08:00:00",
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      buttonText: {
        timeGridDay: 'Dag',
        today:'Vandaag',
        timeGridWeek: 'Week',
        listWeek: 'Lijst',
        dayGridMonth: 'Maand'
      },
      eventDisplay: 'block',
      eventSources: [
         // your event source
         {
             url: {% url 'name_of_your_view' %} // here you specify the url of your view
             color: 'yellow',    // an option!
             textColor: 'black'  // an option!
         }
    ],

    eventTimeFormat: { // like '14:30:00'
        hour: '2-digit',
        minute: '2-digit',
        meridiem: false
    }
     
    });

    calendar.render();
  });

</script>

document.addEventListener（'DOMContentLoaded'，function（）{
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
初始视图：“dayGridMonth”，
初始日期：“2020-10-07”，
区域设置：“nl”，
slotMinTime：“08:00:00”，
headerToolbar：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、timeGridDay、listWeek”
},
按钮文字：{
timeGridDay:'Dag'，
今天：'Vandaag'，
timeGridWeek:“周”，
listWeek:“Lijst”，
dayGridMonth:“Maand”
},
eventDisplay:'块'，
事件来源：[
//您的事件源
{
url:{%url'视图“%”的名称//在这里指定视图的url
颜色：'黄色'，//一个选项！
textColor:'黑色'//一个选项！
}
],
eventTimeFormat:{//类似于'14:30:00'
小时：“2位”，
分钟：“两位数”，
梅里迪姆：错
}
});
calendar.render（）；
});

Hi，Nick，我假设错误消息指的是您视图中的行，您在该行执行

event\u sub\u arr['title']=I.event

。显然，

i.event

不是python可以轻松序列化的字符串或原语值。请检查此项，如果没有帮助，请重新书写！总的来说，你的代码看起来不错。嘿，伊夫，谢谢你的回复。我已将I.event更改为字符串，现在筛选器正在工作。然而，当我使用过滤器时，我会在一个显示原始数据的页面上结束。我认为这是因为url正在更改。我将编辑我的原始帖子来说明我的意思。嗨，尼克，我不确定你的解决方案在你的

中有多好嗨，伊夫，再次感谢你花时间回复我的问题。我现在找到了以下帖子：。该解决方案使用Ajax调用来更新日历。我仍在努力理解如何在我的项目中实现这一点，但链接的最后一部分应该使我能够选择一个值并根据该特定值筛选日历。嘿，Yves，感谢您提供的代码。它确实改善了从视图到模板的数据处理，我想我将能够使用一个选择字段根据一个下拉列表进行过滤。不幸的是，我认为我不能将django过滤器与fullcalendar结合使用。在您的示例中，过滤应该可以工作，但我无法将myFilter从get_events视图传递到kalender2视图（该视图具有用于呈现日历的模板）。