Python Flask Calendar

0-PY-CALENDAR.MD

PYTHON FLASK CALENDAR

https://code-boxx.com/calendar-events-python-flask/

NOTES

1. Run unpack.bat (Windows) unpack.sh (Linux/Mac). This will automatically:
   • Create a templates folder, move S4A_calendar.html inside.
   • Create a static folder, move S4B_calendar.js and S4C_calendar.css inside.
   • Create a virtual environment - virtualenv venv.
   • Activate the virtual environment - venv\scripts\activate (Windows) venv/bin/activate (Mac/Linux)
   • Install Flask - pip install flask
   • Run python S1B_create.py to create the database.
   • Run python S3_server.py to start the server.
2. Access http://localhost in your browser.

LICENSE

Copyright by Code Boxx

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

S1A_events.sql

CREATE TABLE events (
  id INTEGER,
  start DATETIME,
  end DATETIME,
  text TEXT NOT NULL,
  color TEXT NOT NULL,
  bg TEXT NOT NULL,
  PRIMARY KEY("id" AUTOINCREMENT)
);
CREATE INDEX idx_start ON events (start);
CREATE INDEX idx_end ON events (end);

S1B_create.py

# (A) LOAD PACKAGES
import sqlite3, os
from sqlite3 import Error

# (B) DATABASE + SQL FILE
DBFILE = "events.db"
SQLFILE = "S1A_events.sql"

# (C) DELETE OLD DATABASE IF EXIST
if os.path.exists(DBFILE):
  os.remove(DBFILE)

# (D) IMPORT SQL
conn = sqlite3.connect(DBFILE)
with open(SQLFILE) as f:
  conn.executescript(f.read())
conn.commit()
conn.close()
print("Database created!")

S2_lib.py

# (A) LOAD SQLITE MODULE
import sqlite3
from calendar import monthrange
DBFILE = "events.db"

# (B) SAVE EVENT
def save (start, end, txt, color, bg, id=None):
  # (B1) CONNECT
  conn = sqlite3.connect(DBFILE)
  cursor = conn.cursor()

  # (B2) DATA & SQL
  data = (start, end, txt, color, bg,)
  if id is None:
    sql = "INSERT INTO `events` (`start`, `end`, `text`, `color`, `bg`) VALUES (?,?,?,?,?)"
  else:
    sql = "UPDATE `events` SET `start`=?, `end`=?, `text`=?, `color`=?, `bg`=? WHERE `id`=?"
    data = data + (id,)

  # (B3) EXECUTE
  cursor.execute(sql, data)
  conn.commit()
  conn.close()
  return True

# (C) DELETE EVENT
def delete(id):
  # (C1) CONNECT
  conn = sqlite3.connect(DBFILE)
  cursor = conn.cursor()

  # (C2) EXECUTE
  cursor.execute("DELETE FROM `events` WHERE `id`=?", (id,))
  conn.commit()
  conn.close()
  return True

# (D) GET EVENTS
def get(month, year):
  # (D1) CONNECT
  conn = sqlite3.connect(DBFILE)
  cursor = conn.cursor()

  # (D2) DATE RANGE CALCULATIONS
  daysInMonth = str(monthrange(year, month)[1])
  month = month if month>=10 else "0" + str(month)
  dateYM = str(year) + "-" + str(month) + "-"
  start = dateYM + "01 00:00:00"
  end = dateYM + daysInMonth + " 23:59:59"

  # (D3) GET EVENTS
  cursor.execute(
    "SELECT * FROM `events` WHERE ((`start` BETWEEN ? AND ?) OR (`end` BETWEEN ? AND ?) OR (`start` <= ? AND `end` >= ?))",
    (start, end, start, end, start, end)
  )
  rows = cursor.fetchall()
  if len(rows)==0:
    return None

  # s & e : start & end date
  # c & b : text & background color
  # t : event text
  data = {}
  for r in rows:
    data[r[0]] = {
      "s" : r[1], "e" : r[2],
      "c" : r[4], "b" : r[5],
      "t" : r[3]
    }
  return data

S3_server.py

# (A) INIT
# (A1) LOAD MODULES
import sys
import S2_lib as evt
from flask import Flask, request, render_template, make_response
 
# (A2) FLASK SETTINGS + INIT
HOST_NAME = "localhost"
HOST_PORT = 80
app = Flask(__name__)
# app.debug = True

# (B) ROUTES
# (B1) CALENDAR PAGE
@app.route("/", methods=["GET", "POST"])
def index():
  return render_template("S4A_calendar.html")

# (B2) ENDPOINT - GET EVENTS
@app.route("/get/", methods=["POST"])
def get():
  data = dict(request.form)
  events = evt.get(int(data["month"]), int(data["year"]))
  return "{}" if events is None else events

# (B3) ENDPOINT - SAVE EVENT
@app.route("/save/", methods=["POST"])
def save():
  data = dict(request.form)
  ok = evt.save(data["s"], data["e"], data["t"], data["c"], data["b"], data["id"] if "id" in data else None)
  msg = "OK" if ok else sys.last_value
  return make_response(msg, 200)

# (B4) ENDPOINT - DELETE EVENT
@app.route("/delete/", methods=["POST"])
def delete():
  data = dict(request.form)
  ok = evt.delete(data["id"])
  msg = "OK" if ok else sys.last_value
  return make_response(msg, 200)

# (C) START
if __name__ == "__main__":
  app.run(HOST_NAME, HOST_PORT)

S4A_calendar.html

<!DOCTYPE html>
<html>
  <head>
    <!-- TITLE, DESC, CHARSET, VIEWPORT -->
    <title>PY Calendar</title>
    <meta charset="utf-8">
    <meta name="description" content="Offline Javascript Calendar App">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">

    <!-- STYLESHEET + JAVASCRIPT -->
    <script defer src="static/S4B_calendar.js"></script>
    <link rel="stylesheet" href="static/S4C_calendar.css">
  </head>
  <body>
    <!-- (A) PERIOD SELECTOR -->
    <div id="calHead">
      <div id="calPeriod">
        <input id="calToday" type="button" value="&#9733;">
        <input id="calBack" type="button" value="&lt;">
        <select id="calMonth"></select>
        <input id="calYear" type="number">
        <input id="calNext" type="button" value="&gt;">
      </div>
      <input id="calAdd" type="button" value="+">
    </div>

    <!-- (B) CALENDAR WRAPPER -->
    <div id="calWrap">
      <div id="calDays"></div>
      <div id="calBody"></div>
    </div>

    <!-- (C) EVENT FORM -->
    <dialog id="calForm"><form method="dialog">
      <div id="evtCX">X</div>
      <h2 class="evt100">CALENDAR EVENT</h2>
      <div class="evt50">
        <label>Start</label>
        <input id="evtStart" type="datetime-local" required>
      </div>
      <div class="evt50">
        <label>End</label>
        <input id="evtEnd" type="datetime-local" required>
      </div>
      <div class="evt50">
        <label>Text Color</label>
        <input id="evtColor" type="color" value="#000000" required>
      </div>
      <div class="evt50">
        <label>Background Color</label>
        <input id="evtBG" type="color" value="#ffdbdb" required>
      </div>
      <div class="evt100">
        <label>Event</label>
        <input id="evtTxt" type="text" required>
      </div>
      <div class="evt100">
        <input type="hidden" id="evtID">
        <input type="button" id="evtDel" value="Delete">
        <input type="submit" id="evtSave" value="Save">
      </div>
    </form></dialog>
  </body>
</html>

S4B_calendar.js

var cal = {
  // (A) PROPERTIES
  // (A1) FLAGS & DATA
  mon : false, // monday first
  events : null, // events data for current month/year
  sMth : 0, // selected month
  sYear : 0, // selected year
  sDIM : 0, // number of days in selected month
  sF : 0, // first date of the selected month (yyyymmddhhmm)
  sL : 0, // last date of the selected month (yyyymmddhhmm)
  sFD : 0, // first day of the selected month (mon-sun)
  sLD : 0, // last day of the selected month (mon-sun)
  ready : 0, // to track loading

  // (A2) HTML ELEMENTS
  hMth : null, hYear : null, // month & year
  hCD : null, hCB : null, // calendar days & body
  hFormWrap : null, hForm : null, // event form
  hfID : null, hfStart : null, // event form fields
  hfEnd : null, hfTxt : null,
  hfColor : null, hfBG : null,
  hfDel : null,

  // (A3) HELPER FUNCTION - TRANSITION
  transit : swap => {
    if (document.startViewTransition) { document.startViewTransition(swap); }
    else { swap(); }
  },

  // (B) SUPPORT FUNCTION - AJAX FETCH
  ajax : (req, data, onload) => {
    // (B1) FORM DATA
    let form = new FormData();
    for (let [k,v] of Object.entries(data)) { form.append(k,v); }

    // (B2) FETCH
    fetch(req + "/", { method:"POST", body:form })
    .then(res => res.text())
    .then(txt => onload(txt))
    .catch(err => console.error(err));
  },

  // (C) INIT CALENDAR
  init : () => {
    // (C1) GET HTML ELEMENTS
    cal.hMth = document.getElementById("calMonth");
    cal.hYear = document.getElementById("calYear");
    cal.hCD = document.getElementById("calDays");
    cal.hCB = document.getElementById("calBody");
    cal.hFormWrap = document.getElementById("calForm");
    cal.hForm = cal.hFormWrap.querySelector("form");
    cal.hfID = document.getElementById("evtID");
    cal.hfStart = document.getElementById("evtStart");
    cal.hfEnd = document.getElementById("evtEnd");
    cal.hfTxt = document.getElementById("evtTxt");
    cal.hfColor = document.getElementById("evtColor");
    cal.hfBG = document.getElementById("evtBG");
    cal.hfDel = document.getElementById("evtDel");

    // (C2) MONTH & YEAR SELECTOR
    let now = new Date(), nowMth = now.getMonth() + 1;
    for (let [i,n] of Object.entries({
      1 : "January", 2 : "Febuary", 3 : "March", 4 : "April",
      5 : "May", 6 : "June", 7 : "July", 8 : "August",
      9 : "September", 10 : "October", 11 : "November", 12 : "December"
    })) {
      let opt = document.createElement("option");
      opt.value = i;
      opt.innerHTML = n;
      if (i==nowMth) { opt.selected = true; }
      cal.hMth.appendChild(opt);
    }
    cal.hYear.value = parseInt(now.getFullYear());

    // (C3) ATTACH CONTROLS
    cal.hMth.onchange = cal.load;
    cal.hYear.onchange = cal.load;
    document.getElementById("calToday").onclick = () => cal.today();
    document.getElementById("calBack").onclick = () => cal.pshift();
    document.getElementById("calNext").onclick = () => cal.pshift(1);
    document.getElementById("calAdd").onclick = () => cal.show();
    cal.hForm.onsubmit = () => cal.save();
    document.getElementById("evtCX").onclick = () => cal.transit(() => cal.hFormWrap.close());
    cal.hfDel.onclick = cal.del;

    // (C4) DRAW DAY NAMES
    let days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    if (cal.mon) { days.push("Sun"); } else { days.unshift("Sun"); }
    for (let d of days) {
      let cell = document.createElement("div");
      cell.className = "calCell";
      cell.innerHTML = d;
      cal.hCD.appendChild(cell);
    }

    // (C5) LOAD & DRAW CALENDAR
    cal.load();
  },

  // (D) SHIFT CURRENT PERIOD BY 1 MONTH
  pshift : forward => {
    cal.sMth = parseInt(cal.hMth.value);
    cal.sYear = parseInt(cal.hYear.value);
    if (forward) { cal.sMth++; } else { cal.sMth--; }
    if (cal.sMth > 12) { cal.sMth = 1; cal.sYear++; }
    if (cal.sMth < 1) { cal.sMth = 12; cal.sYear--; }
    cal.hMth.value = cal.sMth;
    cal.hYear.value = cal.sYear;
    cal.load();
  },

  // (E) JUMP TO TODAY
  today : () => {
    let now = new Date(), ny = now.getFullYear(), nm = now.getMonth()+1;
    if (ny!=cal.sYear || (ny==cal.sYear && nm!=cal.sMth)) {
      cal.hMth.value = nm;
      cal.hYear.value = ny;
      cal.load();
    }
  },

  // (F) LOAD EVENTS
  load : () => {
    // (F1) SET SELECTED PERIOD
    cal.sMth = parseInt(cal.hMth.value);
    cal.sYear = parseInt(cal.hYear.value);
    cal.sDIM = new Date(cal.sYear, cal.sMth, 0).getDate();
    cal.sFD = new Date(cal.sYear, cal.sMth-1, 1).getDay();
    cal.sLD = new Date(cal.sYear, cal.sMth-1, cal.sDIM).getDay();
    let m = cal.sMth;
    if (m < 10) { m = "0" + m; }
    cal.sF = parseInt(String(cal.sYear) + String(m) + "010000");
    cal.sL = parseInt(String(cal.sYear) + String(m) + String(cal.sDIM) + "2359");

    // (F2) AJAX GET EVENTS
    cal.ajax("get", { month : cal.sMth, year : cal.sYear }, evt => {
      cal.events = JSON.parse(evt);
      cal.draw();
    });
  },

  // (G) DRAW CALENDAR
  draw : () => {
    // (G1) CALCULATE DAY MONTH YEAR
    // note - jan is 0 & dec is 11 in js
    // note - sun is 0 & sat is 6 in js
    let now = new Date(), // current date
        nowMth = now.getMonth()+1, // current month
        nowYear = parseInt(now.getFullYear()), // current year
        nowDay = cal.sMth==nowMth && cal.sYear==nowYear ? now.getDate() : null ;

    // (G2) DRAW CALENDAR ROWS & CELLS
    // (G2-1) INIT + HELPER FUNCTIONS
    let rowA, rowB, rowC, rowMap = {}, rowNum = 1, cell, cellNum = 1,

    // (G2-2) HELPER - DRAW A NEW ROW
    rower = () => {
      rowA = document.createElement("div");
      rowB = document.createElement("div");
      rowC = document.createElement("div");
      rowA.className = "calRow";
      rowA.id = "calRow" + rowNum;
      rowB.className = "calRowHead";
      rowC.className = "calRowBack";
      cal.hCB.appendChild(rowA);
      rowA.appendChild(rowB);
      rowA.appendChild(rowC);
    },

    // (G2-3) HELPER - DRAW A NEW CELL
    celler = day => {
      cell = document.createElement("div");
      cell.className = "calCell";
      if (day) {
        cell.innerHTML = day;
        cell.classList.add("calCellDay");
        cell.onclick = () => {
          cal.show();
          let d = +day, m = +cal.hMth.value,
              s = `${cal.hYear.value}-${String(m<10 ? "0"+m : m)}-${String(d<10 ? "0"+d : d)}T00:00:00`;
          cal.hfStart.value = s;
          cal.hfEnd.value = s;
        };
      }
      rowB.appendChild(cell);
      cell = document.createElement("div");
      cell.className = "calCell";
      if (day===undefined) { cell.classList.add("calBlank"); }
      if (day!==undefined && day==nowDay) { cell.classList.add("calToday"); }
      rowC.appendChild(cell);
    };

    // (G2-4) RESET CALENDAR
    cal.hCB.innerHTML = ""; rower();

    // (G2-5) BLANK CELLS BEFORE START OF MONTH
    if (cal.mon && cal.sFD != 1) {
      let blanks = cal.sFD==0 ? 7 : cal.sFD ;
      for (let i=1; i<blanks; i++) { celler(); cellNum++; }
    }
    if (!cal.mon && cal.sFD != 0) {
      for (let i=0; i<cal.sFD; i++) { celler(); cellNum++; }
    }

    // (G2-6) DAYS OF THE MONTH
    for (let i=1; i<=cal.sDIM; i++) {
      rowMap[i] = { r : rowNum, c : cellNum };
      celler(i);
      if (cellNum%7==0 && i!=cal.sDIM) { rowNum++; rower(); }
      cellNum++;
    }
    
    // (G2-7) BLANK CELLS AFTER END OF MONTH
    if (cal.mon && cal.sLD != 0) {
      let blanks = cal.sLD==6 ? 1 : 7-cal.sLD;
      for (let i=0; i<blanks; i++) { celler(); cellNum++; }
    }
    if (!cal.mon && cal.sLD != 6) {
      let blanks = cal.sLD==0 ? 6 : 6-cal.sLD;
      for (let i=0; i<blanks; i++) { celler(); cellNum++; }
    }

    // (G3) DRAW EVENTS
    if (Object.keys(cal.events).length > 0) { for (let [id,evt] of Object.entries(cal.events)) {
      // (G3-1) EVENT START & END DAY
      let sd = new Date(evt.s), ed = new Date(evt.e);
      if (sd.getFullYear() < cal.sYear) { sd = 1; }
      else { sd = sd.getMonth()+1 < cal.sMth ? 1 : sd.getDate(); }
      if (ed.getFullYear() > cal.sYear) { ed = cal.sDIM; }
      else { ed = ed.getMonth()+1 > cal.sMth ? cal.sDIM : ed.getDate(); }

      // (G3-2) "MAP" ONTO HTML CALENDAR
      cell = {}; rowNum = 0;
      for (let i=sd; i<=ed; i++) {
        if (rowNum!=rowMap[i]["r"]) {
          cell[rowMap[i]["r"]] = { s:rowMap[i]["c"], e:0 };
          rowNum = rowMap[i]["r"];
        }
        if (cell[rowNum]) { cell[rowNum]["e"] = rowMap[i]["c"]; }
      }

      // (G3-3) DRAW HTML EVENT ROW
      for (let [r,c] of Object.entries(cell)) {
        let o = c.s - 1 - ((r-1) * 7), // event cell offset
            w = c.e - c.s + 1; // event cell width
        rowA = document.getElementById("calRow"+r);
        rowB = document.createElement("div");
        rowB.className = "calRowEvt";
        rowB.innerHTML = cal.events[id]["t"];
        rowB.style.color = cal.events[id]["c"];
        rowB.style.backgroundColor  = cal.events[id]["b"];
        rowB.classList.add("w"+w);
        if (o!=0) { rowB.classList.add("o"+o); }
        rowB.onclick = () => cal.show(id);
        rowA.appendChild(rowB);
      }
    }}
  },

  // (H) SHOW EVENT FORM
  show : id => {
    if (id) {
      cal.hfID.value = id;
      cal.hfStart.value = cal.events[id]["s"];
      cal.hfEnd.value = cal.events[id]["e"];
      cal.hfTxt.value = cal.events[id]["t"];
      cal.hfColor.value = cal.events[id]["c"];
      cal.hfBG.value = cal.events[id]["b"];
      cal.hfDel.style.display = "inline-block";
    } else {
      cal.hForm.reset();
      cal.hfID.value = "";
      cal.hfDel.style.display = "none";
    }
    cal.transit(() => cal.hFormWrap.show());
  },

  // (I) SAVE EVENT
  save : () => {
    // (I1) COLLECT DATA
    // s & e : start & end date
    // c & b : text & background color
    // t : event text
    var data = {
      s : cal.hfStart.value.replace("T", " "),
      e : cal.hfEnd.value.replace("T", " "),
      t : cal.hfTxt.value,
      c : cal.hfColor.value,
      b : cal.hfBG.value
    };
    if (cal.hfID.value != "") { data.id = parseInt(cal.hfID.value); }

    // (I2) DATE CHECK
    if (new Date(data.s) > new Date(data.e)) {
      alert("Start date cannot be later than end date!");
      return false;
    }

    // (I3) SAVE
    cal.ajax("save", data, res => {
      if (res=="OK") {
        cal.transit(() => cal.hFormWrap.close());
        cal.load();
      } else { alert(res); }
    });
    return false;
  },

  // (J) DELETE EVENT
  del : () => { if (confirm("Delete Event?")) {
    cal.ajax("delete", { id : parseInt(cal.hfID.value) }, res => {
      if (res=="OK") {
        cal.transit(() => cal.hFormWrap.close());
        cal.load();
      } else { alert(res); }
    });
  }}
};
window.onload = cal.init;

S4C_calendar.css

/* (A) GLOBAL */
/* (A1) PAGE TRANSITION */
@keyframes zoom-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes zoom-out{from{transform:scale(1)}to{transform:scale(0)}}::view-transition-old(zoom){animation:.2s linear both zoom-out}::view-transition-new(zoom){animation:.2s linear both zoom-in}

/* (A2) WHOLE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
body {
  position: relative;
  padding: 0; margin: 0;
  overflow-x: hidden;
}

/* (A3) COLORS */
:root {
  --bg-color-a: #3b39af; /* page header + form label */
  --bg-color-b: #404040; /* calendar header */
  --bg-color-c: #d73a3a; /* buttons */
}

/* (B) PERIOD SELECTOR */
#calHead {
  display: flex; align-items: center;
  padding: 15px;
  background: var(--bg-color-a);
}
#calPeriod { flex-grow: 1; }
#calHead input, #calHead select {
  font-size: 24px;
  border: 0; outline: none;
  color: #fff; background: 0;
  cursor: pointer;
}
#calHead option { color: #000; }
#calYear {
  width: 100px;
  margin-left: 10px;
}
#calHead #calAdd {
  padding: 5px 20px;
  background: var(--bg-color-c);
}

/* (C) CALENDAR */
/* (C1) ROWS */
#calDays, .calRowHead, .calRowBack { display: flex; }
#calDays, .calRow, .calRowHead, .calRowEvt {
  position: relative;
  width: 100%;
}
.calRow { min-height: 100px; }
.calRowHead, .calRowEvt { z-index: 2; }
.calRowBack {
  position: absolute;
  top: 0; left: 0; z-index: 1;
  width: 100%; height: 100%;
}
.calRowEvt {
  padding: 3px 10px;
  margin-top: 5px;
  font-size: 12px;
  white-space: nowrap; text-overflow: ellipsis;
  overflow: hidden; cursor: pointer;
  border-radius: 10px;
}

/* (C2) CELLS & EVENTS */
.calCell { width: 14.2857%; }
.w1 { width: 14.2857%; } .w2 { width: 28.5714%; } .w3 { width: 42.8571%; }
.w4 { width: 57.1428%; } .w5 { width: 71.4285%; } .w6 { width: 85.7142%; }
.w7 { width: 100%; }
.o1 { left: 14.2857%; } .o2 { left: 28.5714%; } .o3 { left: 42.8571%; }
.o4 { left: 57.1428%; } .o5 { left: 71.4285%; } .o6 { left: 85.7142%; }
#calDays .calCell {
  color: #fff; background: var(--bg-color-b);
  font-weight: 700; text-align: center;
  padding: 15px 0;
}
.calRowHead .calCell {
  font-size: 14px;
  font-weight: 700;
  color: #b5b5b5;
  padding: 5px;
}
.calRowHead .calCellDay:hover {
  color: #ff5b5b;
  cursor: pointer;
}
.calRowBack .calCell { border: 1px solid #f5f5f5; }
.calBlank { background: #f5f5f5; }
.calToday { background: #feffd3; }

/* (D) EVENT FORM */
#calForm {
  position:absolute; top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100%; min-height: 100vh;
  padding: 0; margin: 0; border: 0;
  background: rgba(0,0,0,0.5);
  view-transition-name: zoom;
}
#calForm:is([open]), #calForm form {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
}
#calForm form {
  position: relative;
  width: 450px; padding: 15px;
  border-radius: 10px;
  background: #fff;
}
#evtCX {
  position: absolute;
  top: 0; right: 0;
  padding: 10px;
  font-size: 30px;
  font-weight: 700;
  color: var(--bg-color-c);
  cursor: pointer;
}
#calForm h2 { margin: 0 0 5px 0; }
#calForm .evt50 { width: 50%; }
#calForm .evt100 { width: 100%; }
#calForm .evt50, #calForm .evt100 { padding: 8px; }
#calForm label, #calForm input[type=datetime-local], #calForm input[type=color], #calForm input[type=text] {
  display: block;
  width: 100%;
}
#calForm label {
  color: #a1a1a1;
  font-size: 12px;
  margin-bottom: 5px;
}
#calForm input[type=datetime-local], #calForm input[type=text] {
  padding: 5px;
  border: 1px solid #eee;
  background: #f5f5f5;
}
#calForm input[type=color] { height: 30px; border: 0; }
#calForm input[type=button], #calForm input[type=submit] {
  border: 0; padding: 10px; margin: 10px 2px 0 0;
  color: #fff; background: var(--bg-color-c);
  cursor: pointer;
}

unpack.bat

md templates
md static
move S4A_calendar.html templates
move S4B_calendar.js static
move S4C_calendar.css static
virtualenv venv
call venv\Scripts\activate
pip install flask
python S1B_create.py
python S3_server.py

unpack.sh

mkdir -m 777 templates
mkdir -m 777 static
mv ./S4A_calendar.html ./templates
mv ./S4B_calendar.js ./static
mv ./S4C_calendar.css ./static
virtualenv venv
source "venv/bin/activate"
pip install flask
python S1B_create.py
python S3_server.py