Получить элементы по дате, нажав на день в календаре Javascript Django

Question

Я разрабатываю приложение календаря с Javascript и Django. Я не знаю, как отобразить элемент по дате, нажав на день. Есть ли какие-то решения? У меня есть предположение, что мне нужно получить элементы 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
            }
        });

Вот конструктор класса Calendar

  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>

Вот что я хочу

Или есть способ поменять календарь? Этот календарь не так необходим

Answer 1

Код javascript должен определить, в какой день вы щелкнули, затем он должен вызвать конечную точку, которая окажется в вашем django представлении. Представление должно получить день и отфильтровать элементы по дате, что-то вроде этого:

Entry.objects.filter(date=selected_day)

Это должно вернуть все элементы за данный день.