通过单击日历Javascript Django上的日期按日期获取项目

我正在用Javascript和Django开发日历应用程序。我现在不知道如何通过单击日期按日期显示项目。有什么解决办法吗？我猜我需要在单击日期时通过ajax获取元素。下面是一些代码：

型号.py

class Item(models.Model):
    title=models.CharField(max_length=200)
    date = models.DateTimeField(default=datetime.now,blank=True)
    is_published=models.BooleanField(default=True)

视图.py

def calendar(request):

item = Item.objects.order_by('-date').filter(is_published=True)
context={
    'item':item,

}
return render(request,'main/calendar.html',context)

Javascript日历绘制方法

  drawAll() {
        this.drawWeekDays();
        this.drawMonths();
        this.drawDays();
        this.drawYearAndCurrentDay();
        this.drawEvents();

    }


    drawYearAndCurrentDay() {
        let calendar = this.getCalendar();
        this.elements.year.innerHTML = calendar.active.year;
        this.elements.currentDay.innerHTML = calendar.active.day;
        this.elements.currentWeekDay.innerHTML = AVAILABLE_WEEK_DAYS[calendar.active.week];
    }

    drawDays() {
        let calendar = this.getCalendar();

        let latestDaysInPrevMonth = this.range(calendar.active.startWeek).map((day, idx) => {
            return {
                dayNumber: this.countOfDaysInMonth(calendar.pMonth) - idx,
                month: new Date(calendar.pMonth).getMonth(),
                year: new Date(calendar.pMonth).getFullYear(),
                currentMonth: false
            }
        }).reverse();


        let daysInActiveMonth = this.range(calendar.active.days).map((day, idx) => {
            let dayNumber = idx + 1;
            let today = new Date();
            return {
                dayNumber,
                today: today.getDate() === dayNumber && today.getFullYear() === calendar.active.year && today.getMonth() === calendar.active.month,
                month: calendar.active.month,
                year: calendar.active.year,
                selected: calendar.active.day === dayNumber,
                currentMonth: true
            }
        });

这里是类日历的构造函数

  constructor(options) {
    this.options = options;
    this.elements = {
        days: this.getFirstElementInsideIdByClassName('calendar-days'),
        week: this.getFirstElementInsideIdByClassName('calendar-week'),
        month: this.getFirstElementInsideIdByClassName('calendar-month'),
        year: this.getFirstElementInsideIdByClassName('calendar-current-year'),
        currentDay: this.getFirstElementInsideIdByClassName('display_day'),
        currentWeekDay: this.getFirstElementInsideIdByClassName('calendar-left-side-day-of-week'),
        prevYear: this.getFirstElementInsideIdByClassName('calendar-change-year-slider-prev'),
        nextYear: this.getFirstElementInsideIdByClassName('calendar-change-year-slider-next')
    };



    this.date = +new Date();
    this.options.maxDays = 37;
    this.init();
}
 getFirstElementInsideIdByClassName(className) {
    return document.getElementById(this.options.id).getElementsByClassName(className)[0];
}

这里是模板

 <div class="right-side">
    <div class="text-right calendar-change-year">
        <div class="calendar-change-year-slider">
            <span class="fa fa-caret-left cursor-pointer calendar-change-year-slider-prev"></span>
            <span class="calendar-current-year"></span>
            <span class="fa fa-caret-right cursor-pointer calendar-change-year-slider-next"></span>
        </div>
    </div>
    <div class="calendar-month-list">
        <ul class="calendar-month"></ul>
    </div>
    <div class="calendar-week-list">
        <ul class="calendar-week"></ul>
    </div>
    <div class="calendar-day-list">
        <ul class="calendar-days"></ul>
    </div>
</div>

这是我想要的

---

还是有办法更改日历？此日历不是必需的

javascript代码应该检测您单击的日期，然后它应该调用将在django视图中结束的端点。视图应接收日期并按日期筛选项目，如下所示：

def calendar(request):

item = Item.objects.order_by('-date').filter(is_published=True)
context={
    'item':item,

}
return render(request,'main/calendar.html',context)

Entry.objects.filter(date=selected_day)

---

这将返回给定日期的所有项目。

最好的imo解决方案是获得输入生成小部件，如on input change make ajax调用python函数，该函数返回特定日期任务的json并呈现出来。您可以两全其美（前端）不必指定自己的调用者后端）站点不必重新加载