0

I am building a calendar application and I'm trying to figure out if Jinja (or if there is a way to do that simply with HTML), can fetch the value of a specific div to use it for comparisons.

Be the following code, in the head of the table, for each span id="day", I've written the current date of that day in the format YYYY/MM/DD.

Functions back() and advance() moves the week from another one.

Inside the body of the table, I am triggering various comparisons with event['Start date'], which contains a date of similar structure.

Is it possible, to fetch the value of id="day" from the head and use it in jinja's comparisons ?

{% set times = ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"] %}

  <div id="calendar">
    <div class="header">
      <ul>
        <button class="prev" onclick="back()">&#10094;</button>
        <button class="next" onclick="advance()">&#10095;</button>
        <span style="font-size:18px" id="day"></span>
        <span style="font-size:18px" id="datetime"></span>
      </ul>
    </div>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Monday <span id="monday"></span></th>
          <th>Tuesday <span id="tuesday"></span></th>
          <th>Wednesday <span id="wednesday"></span></th>
          <th>Thursday <span id="thursday"></span></th>
          <th>Friday <span id="friday"></span></th>
          <th>Saturday <span id="saturday"></span></th>
          <th>Sunday <span id="sunday"></span></th>
        </tr>
      </thead>
      <tbody>
        {% for time in times %}
        <tr>
          <td>{{ time }}</td>
          <td>
             {% if event['Start date'][11:13] == time  %}
                 {% if event['Day'] == 0 %}
                     {{ event['Name'] }}
                     {{ event['Start date'][11:13] }}
                 {% endif %}
             {% endif %}
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

Thanks,

Jinja does not appear to be able to straight up use {{ (id of span).value == something %}.

Raphaël
  • 11
  • 2

1 Answers1

0

If you have a event lasting five hours and a big name, you would want that name to be distributed along the five cells but it is not possible so you might want to draw the grid with a table and the events will be divs over this table. This answer shows how to do a overlap How to overlay one div over another div

You will not use if's to check if the event is on that day and time. You will have a hash map of events in the server and other on the client and the keys will be dates. In the server side where you use Python the hash map is called a dictionary, on the client where you have JavaScript it is called a object. You will do events["01-01-1999"] and this will return a array of events in this day. For each event you will draw a div with the size accordingly to the hour it begin and ends.

If you have a big database with infinite days in the server it would be hard to download the page so you can load the events on demand. The page will start with the week of the current day and when you click on back and advance you will load another using jQuery. I have made a proposal where the client stores one week.

import datetime

class Event:
    def __init__(self, name, startHour, startMinute, finalHour, finalMinute):
        self.name = name
        self.startHour = startHour
        self.startMinute = startMinute
        self.finalHour = finalHour
        self.finalMinute = finalMinute

events = {"15-04-2023": [Event("aniversario", 8, 0, 12, 0)],
          "16-04-2023": [],
          "17-04-2023": [],
          "18-04-2023": [Event("reuniao", 8, 0, 12, 0), Event("festa", 13, 30, 17, 0)],
          "19-04-2023": [Event("aniversario", 8, 0, 12, 0)],
          "20-04-2023": [],
          "21-04-2023": [],
          "22-04-2023": [],
          "23-04-2023": [Event("aniversario", 8, 0, 12, 0)],
          "24-04-2023": [Event("reuniao do nucleo", 8, 0, 12, 0)],
          "25-04-2023": [Event("reuniao da direcao", 8, 0, 12, 0)],
          "26-04-2023": [Event("dentista", 8, 0, 12, 0)],
          "27-04-2023": [Event("academia", 8, 0, 12, 0)],
          "28-04-2023": [],
          "29-04-2023": []}

@app.route("/load_week")
def load_week():
    dayString = request.args.get("lastDayOfWeek")
    splitted = dayString.split(sep="-")
    day = datetime.datetime(int(splitted[2]), int(splitted[1]), int(splitted[0]))
    day = day + datetime.timedelta(days=1)
    daysOfWeek = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"]
    weekEvents = {"sunday": "", "monday": "", "tuesday": "", "wednesday": "", "thursday": "", "friday": "", "saturday": ""}
    for dayOfWeek in daysOfWeek:
        print(events[day.strftime("%d-%m-%Y")])
        for event in events[day.strftime("%d-%m-%Y")]:
            weekEvents[dayOfWeek] += event.name + "[" + str(event.startHour) + ":" + str(event.startMinute) + "-" + str(event.finalHour) + ":" + str(event.finalMinute) + "];"
        day = day + datetime.timedelta(days=1)
        print(day)
    return jsonify(weekEvents)

var days = ["16-04-2023", "17-04-2023", "18-04-2023", "19-04-2023", "20-04-2023", "21-04-2023", "22-04-2023"];
daysOfWeek = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
var weekEvents = {sunday: [], monday: [], tuesday: [], wednesday: [], thursday: [], friday: [], saturday: []};
function next() {
    var dataToSend = {lastDayOfWeek: days[days.length - 1]};
    $.getJSON("/load_week", dataToSend, function (dataReceived) {
        for (var i = 0; i < daysOfWeek.length; i++) {
            console.log(dataReceived[daysOfWeek[i]]);
        }
    });
}
next();
Eleno
  • 44
  • 4