Get items by date by clicking day on calendar Javascript Django

Viewed 626

I'm developing calendar app with Javascript and Django . I don't now how to display item by date by clicking the day . Is there any solutions ? I have a guess that I need to get elements by ajax on clicking the date . Here is some code :

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 calendar draw methods

  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
            }
        });

Here is constructor of class 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];
}

Here is template

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

Here is what I want Here is what I want

Or is there a way to change calendar ? This calendar isn't so necessary

1 Answers

The javascript code should detect which day you clicked, then it should call an endpoint that will end up in your django view. The view should receive the day and filter the items by date, something like this:

Entry.objects.filter(date=selected_day)

This should return all the items for a given day.

Related