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>
Or is there a way to change calendar ? This calendar isn't so necessary
