Цветные ячейки таблицы для системы бронирования Django

Я пытаюсь разработать систему бронирования на основе проекта Django. Моя конечная цель - получить нечто подобное:

До сих пор, то, чего я смог достичь, это иметь таблицу с временем суток и столбцы (которые являются самолетами). Моя конечная цель состоит в том, чтобы мои бронирования отображались как "ноги", то есть, например, бронирование с 09:00 до 11:00 отображалось в ячейках самолетов с 09:00 до 11:00. Фактически, мне нужно добиться того, чтобы каждая отдельная ячейка таблицы или группа ячеек была окрашена в цвет, чтобы сообщить, что самолет забронирован на этот период времени.

Пока что мой код выглядит примерно так:

models.py

class AirportTime(models.Model):
    aerodrome = models.ForeignKey(Aerodrome, on_delete=models.CASCADE, blank=True, null=True)
    opening_time = models.TimeField()
    closing_time = models.TimeField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return str(self.opening_time) + ' ' + str(self.closing_time)


class Booking(models.Model):
    aircraft = models.ForeignKey(Aircraft, on_delete=models.CASCADE)
    student = models.ForeignKey(
        Student, on_delete=models.CASCADE, blank=True, null=True)
    instructor = models.ForeignKey(
        Instructor, on_delete=models.CASCADE, blank=True, null=True)
    date = models.DateField()
    start_time = models.TimeField()
    end_time = models.TimeField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.aircraft.registration + ' ' + str(self.date) + ' ' + str(self.start_time) + ' ' + str(self.end_time)

views.py

def index(request, date):
    if date is None:
        date_obj = datetime.now().date()
    else:
        date_obj = datetime.strptime(date, '%Y-%m-%d')

    next_day_obj = date_obj + timedelta(days=1)
    next_day_link = next_day_obj.strftime('%Y-%m-%d')
    prev_day_obj = date_obj - timedelta(days=1)
    prev_day_link = prev_day_obj.strftime('%Y-%m-%d')

    airport_openings = AirportTime.objects.get(aerodrome=1)
    opening_time = str(airport_openings.opening_time)
    closing_time = str(airport_openings.closing_time)


    date_render = date_obj.strftime('%d-%m-%Y')
    date_reset = datetime.now().date().strftime('%Y-%m-%d')

    date_for_calc = date_obj.date()

    #Table times between 8 and 19
    start = datetime.strptime(opening_time, "%H:%M:%S")
    end = datetime.strptime(closing_time, "%H:%M:%S")

    min_gap = 30

    arr = [(start + timedelta(hours=min_gap*i/60)).strftime("%H:%M")
       for i in range(int((end-start).total_seconds() / 60.0 / min_gap))]

    aircrafts = Aircraft.objects.filter(is_active=True)
    bookings = Booking.objects.filter(date=date)
    context = {
        'date_render': date_render,
        'next_day_obj': next_day_obj,
        'next_day_link': next_day_link,
        'prev_day_link': prev_day_link,
        'prev_day_obj': prev_day_obj,
        'date_reset': date_reset,
        'arr': arr,
        'aircrafts': aircrafts,
        'bookings': bookings
    }
    return render(request, 'booking/index.html', context)

шаблон

{% extends 'base.html' %}
{% block css %}
<style>
    td:hover {
        background-color: lightgray;
    }
    td a {
        display:block;
        width:100%;
    }
</style>
{% endblock css %}
{% load custom_tags %}
{% block head_title %}
Reservation System
{% endblock head_title %}

{% block title %}
Reservation System
{% endblock title %}

{% block content %}
<a href="{% url 'booking:index' date=prev_day_link %}">Prev Day</a>
<a href="{% url 'booking:index' date=date_reset %}">Today</a>
<a href="{% url 'booking:index' date=next_day_link %}">Next Day</a>

<table class="table-bordered table-striped table table-sm">
    <thead>
      <tr>
        <th class="text-center border border-info bg-primary" colspan="24">{{date_render}}</th>
      </tr>
      <tr>
          <th class="text-center border border-info bg-primary"></th>
        {% for a in arr %}
        <th class="border border-info">{{a}}</th>
        {% endfor %}
      </tr>
        
      
    </thead>
    <tbody>
        {% for aircraft in aircrafts %}
      <tr>
        <th class="bg-primary border border-info" >{{aircraft.registration}}</th>
        {% for a in arr %}
        <td class="table-hover border border-info"><a href="{% url 'booking:new_booking' %}">&nbsp;</a></td>
      {% endfor %}
      </tr> 
      {% endfor %}
    </tbody>
  </table>
  {% if bookings %}
  {{bookings}}
  {% endif %}
{% endblock content %}

Вернуться на верх