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

【问题标题】：Get items by date by clicking day on calendar Javascript Django通过单击日历上的日期 Javascript Django 按日期获取项目
【发布时间】：2020-04-03 11:42:23
【问题描述】：

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

models.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)

views.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>

  <h1 class="calendar__heading calendar__heading-2 display_day"></h1>
    <h1 class="calendar__heading calendar-left-side-day-of-week"></h1>

这就是我想要的

或者有没有办法改变日历？这个日历没那么必要

【问题讨论】：

最好的 imo 解决方案是在输入更改时获取输入生成小部件，如 this 对 python 函数进行 ajax 调用，该函数返回特定日期的任务的 json 并将其渲染出来。您可以获得两全其美的前端）不必指定您自己的 callendar 后端）网站不必重新加载

标签： javascript python django ajax backend

【解决方案1】：

javascript 代码应该检测您点击了哪一天，然后它应该调用一个端点，该端点最终会出现在您的 django 视图中。视图应该接收日期并按日期过滤项目，如下所示：

Entry.objects.filter(date=selected_day)

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

【讨论】：