由于您的问题表明您没有尝试过任何东西，因此猜测您知道javascript，并尝试了一些完整的日历js。
假设您有一个名为Event的模型，用于在日历中显示不同的事件。
class Events(models.Model):
even_id = models.AutoField(primary_key=True)
event_name = models.CharField(max_length=255,null=True,blank=True)
start_date = models.DateTimeField(null=True,blank=True)
end_date = models.DateTimeField(null=True,blank=True)
event_type = models.CharField(max_length=10,null=True,blank=True)
def __str__(self):
return self.event_name
在您的views.py中
def event(request):
all_events = Events.objects.all()
get_event_types = Events.objects.only('event_type')
# if filters applied then get parameter and filter based on condition else return object
if request.GET:
event_arr = []
if request.GET.get('event_type') == "all":
all_events = Events.objects.all()
else:
all_events = Events.objects.filter(event_type__icontains=request.GET.get('event_type'))
for i in all_events:
event_sub_arr = {}
event_sub_arr['title'] = i.event_name
start_date = datetime.datetime.strptime(str(i.start_date.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
end_date = datetime.datetime.strptime(str(i.end_date.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
event_sub_arr['start'] = start_date
event_sub_arr['end'] = end_date
event_arr.append(event_sub_arr)
return HttpResponse(json.dumps(event_arr))
context = {
"events":all_events,
"get_event_types":get_event_types,
}
return render(request,'admin/poll/event_management.html',context)
最后在模板中设置完整日历，其中包括必要的CSS，JS文件和HTML代码。然后，
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2016-07-19',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{% for i in events %}
{
title: "{{ i.event_name}}",
start: '{{ i.start_date|date:"Y-m-d" }}',
end: '{{ i.end_date|date:"Y-m-d" }}',
},
{% endfor %}
]
});
});
</script>
动态地处理某些事件，您需要更改事件，例如，通过更改下拉列表，您需要过滤事件，
$(document).ready(function(){
$('.event_types').on('change',function(){
var event_type = $.trim($(this).val());
$.ajax({
url: "{% url 'manage-event' %}",
type: 'GET',
data:{"event_type":event_type},
cache: false,
success: function (response) {
var event_arr = $.parseJSON(response);
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', event_arr);
$('#calendar').fullCalendar('rerenderEvents' );
},
error: function () {
alert("error");
}
})
})
})
602392714
清零编程群