pythonのflaskでスケジュール付きTodolistを作る

こんなのができる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262409/3e892b59-1cae-1e12-8719-98d3e2c4288e.png)

app.py
```python
from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy
import datetime
import sys


#port = int(sys.argv[1])
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
db = SQLAlchemy(app)

class Todo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    task = db.Column(db.String(255))
    start_date = db.Column(db.Date, nullable=True)
    start_time = db.Column(db.Time, nullable=True)
    end_date = db.Column(db.Date, nullable=True)
    end_time = db.Column(db.Time, nullable=True)
    done = db.Column(db.Boolean, default=False)


@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        task = request.form['task']
        if 'schedule_checkbox' in request.form and request.form['schedule_checkbox'] == 'on':
            start_date = datetime.datetime.strptime(request.form['start_date'], '%Y-%m-%d')
            start_time = datetime.time.fromisoformat(request.form['start_time'])
            end_date = datetime.datetime.strptime(request.form['end_date'], '%Y-%m-%d')
            if 'end_time' in request.form:
                end_time = datetime.time.fromisoformat(request.form['end_time'])
            else:
                end_time = None
        else:
            start_date = None
            start_time = None
            end_date = None
            end_time = None
        new_todo = Todo(task=task,
                        start_date=start_date,
                        start_time=start_time,
                        end_date=end_date,
                        end_time=end_time
                        )
        db.session.add(new_todo)
        db.session.commit()

    todos = Todo.query.all()
    return render_template('index.html', todos=todos)

@app.route('/delete/<id>')
def delete(id):
    todo = Todo.query.get(id)
    db.session.delete(todo)
    db.session.commit()
    return redirect('/')

if __name__ == '__main__':
    app.run(debug=True)

def main():
    app.debug = True
    app.run(port = port)

if __name__ == '__main__':
    main()
```

index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>To-Do List</h1>
    <form action="/" method="post">
        <input type="text" name="task" placeholder="Add a new task">
        <input type="submit" value="Add">
        <br>
        Schedule?<input type="checkbox" name="schedule_checkbox" id="schedule_checkbox">
        <br>
        <input type="date" name="start_date" id="start_date" disabled>
        <br>
        <input type="time" name="start_time" id="start_time" disabled>
        <br>
        <input type="date" name="end_date" id="end_date" disabled>
        <br>
        <input type="time" name="end_time" id="end_time" disabled>
        <br>
    </form>
    <ul>
        {% for todo in todos %}
            <li>
                {{ todo.task }}
                {% if todo.start_date %}
                    <br>
                    Start date: {{ todo.start_date }}
                {% endif %}
                {% if todo.start_time %}
                    <br>
                    Start time: {{ todo.start_time }}
                {% endif %}
                {% if todo.end_date %}
                    <br>
                    End date: {{ todo.end_date }}
                {% endif %}
                {% if todo.end_time %}
                    <br>
                    End time: {{ todo.end_time }}
                {% endif %}
                <a href="/delete/{{ todo.id }}">Delete</a>
            </li>
        {% endfor %}
    </ul>
    <script>
        var scheduleCheckbox = document.getElementById("schedule_checkbox");
        var startDate = document.getElementById("start_date");
        var startTime = document.getElementById("start_time");
        var endDate = document.getElementById("end_date");
        var endTime = document.getElementById("end_time");

        scheduleCheckbox.addEventListener("change", function() {
            if (scheduleCheckbox.checked) {
                startDate.removeAttribute("disabled");
                startTime.removeAttribute("disabled");
                endDate.removeAttribute("disabled");
                endTime.removeAttribute("disabled");
            } else {
                startDate.setAttribute("disabled", "true");
                startTime.setAttribute("disabled", "true");
                endDate.setAttribute("disabled", "true");
                endTime.setAttribute("disabled", "true");
            }
        });
    </script>
</body>
</html>
```