Flask 如何在页面内部显示日历？

我在

Flask

中创建了一个小应用程序，允许用户在日历上预订

我只希望订阅的用户进行预约，如果

当前用户

不是订阅者，您会收到一条消息，代替日历，上面写着“您必须是订阅者才能制作一本书”，否则会出现日历

我使用

SocketIO

在DOM中进行实时更改，在我的视图中，我创建了两个独立的emit，第一个是在用户订阅之后，第二个是如果用户取消订阅。如果他订阅了日历，日历应立即出现，如果他取消订阅，日历也应在发送套接字时消失

这是我的视图。py用于订阅和取消订阅后：

@client_route.route('/client/cat-<dir_code>/subscribe/<int:worker_id>', methods=['POST'])
@only_client
@is_active_client
def subscribe_worker(worker_id):

    client = Client.query.filter_by(tele=session.get('client_phone') ,name=session.get('client_logged_in'), family=session.get('client_family')).first_or_404()

    worker = Worker.query.filter_by(id=worker_id).first_or_404()

    if not client.is_subscriber(worker.id):
        client.subscribe(worker.id)
        client.in_chat = True
        db.session.add(client)
        db.session.commit()
        socketio.emit('show_calendar', namespace='/notifications-{}-{}'.format(client.name, client.family)
        )
        return jsonify({'success': Thanks for subscription.'})


@client_route.route('/client/cat-<dir_code>/subscribe/<int:worker_id>', methods=['POST'])
@only_client
@is_active_client
def unsubscribe_worker(worker_id):

    client = Client.query.filter_by(tele=session.get('client_phone') ,name=session.get('client_logged_in'), family=session.get('client_family')).first_or_404()

    worker = Worker.query.filter_by(id=worker_id).first_or_404()

    if client.is_subscriber(worker.id):
        client.unsubscribe(worker.id)
        client.in_chat = False
        db.session.add(client)
        db.session.commit()
        socketio.emit('hide_calendar', namespace='/notifications-{}-{}'.format(client.name, client.family)
        )
        return jsonify({'success': Thanks for subscription.'})

@client\u route.route（'/client/cat-/subscribe/'，方法=['POST']
@唯一的客户
@是否为活动客户端
def订阅工作人员（工作人员id）：
client=client.query.filter\u by（tele=session.get（'client\u phone'）、name=session.get（'client\u logged\u in'）、family=session.get（'client\u family'））。首先
worker=worker.query.filter\u by（id=worker\u id）。first\u或\u 404（）
如果不是client.is_订户（worker.id）：
client.subscribe（worker.id）
client.in_chat=True
db.session.add（客户端）
db.session.commit（）
emit（'show_calendar'，namespace='/notifications-{}-{}'。格式（client.name，client.family）
)
返回jsonify（{'success'：感谢订阅。}）
@client_route.route（'/client/cat-/subscribe/'，methods=['POST']）
@唯一的客户
@是否为活动客户端
def取消订阅工作人员（工作人员id）：
client=client.query.filter\u by（tele=session.get（'client\u phone'）、name=session.get（'client\u logged\u in'）、family=session.get（'client\u family'））。首先
worker=worker.query.filter\u by（id=worker\u id）。first\u或\u 404（）
如果client.is_订户（worker.id）：
客户端.取消订阅（worker.id）
client.in_chat=False
db.session.add（客户端）
db.session.commit（）
emit（'hide_calendar'，namespace='/notifications-{}-{}'。格式（client.name，client.family）
)
返回jsonify（{'success'：感谢订阅。}）

现在在我的模板中，我已经初始化了socketio，下面是代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>
<script type="text/javascript">

  var socket = io.connect('http://' + document.domain + ':' + location.port + '/notifications-{{session.get("client_logged_in")}}-{{session.get("client_family")}}');

  socket.on('show_calendar', function(){
    alert('Now you can make a book .');
    $('#show_calendar').html('<div id="calendar"></div>');
  });

  socket.on('hide_calendar', function(){
    console.log('Calendar will be disabled .');
    $('#show_calendar').html('\
      <div class="alert alert-warning alert-dismissible alert-disappear" role="alert">\
          You have to subscribe to make a book .\
      </div>\
    ');
  });

</script>

var socket=io.connect（'http://'+document.domain+'：'+location.port+'/notifications-{{session.get（“client_logged_in”）}}-{{session.get（“client_family”）}）；
socket.on（'show_calendar'，function（）{
警惕（‘现在你可以做一本书了’）；
$（'show#u calendar'）.html（''；
});
socket.on（'hide_calendar'，function（）{
console.log（'日历将被禁用'）；
$（'show#u calendar'）.html（'\
\
你必须订阅一本书\
\
');
});

日历块的最后一件事是：

<div id="schedule" class="column_left wrap">
  <div class="header_block">
    <span>Calendar</span>
  </div>
  <div id="show_calendar">
    {% if client.is_subscriber(worker.id) %}
      <div id="calendar"></div>
    {% else %}
      <div class="alert alert-warning alert-dismissible alert-disappear" role="alert">
          You have to subscribe to make a book .
      </div>
    {% endif %}
  </div>
</div>

历法
{%if client.is_subscriber（worker.id）%}
{%else%}
你必须订阅一本书。
{%endif%}

---

现在的问题是，如果我订阅了，我可以在DOM中看到写着你必须订阅一本书的文本被删除，并且日历div被放置，但日历没有打开，我只看到一个空白，在重新加载页面后，它会出现，我不会这样做，我希望在订阅后立即显示日历

请任何帮助将不胜感激

更新

---

我认为应该有一种方法来加载另一个jquery代码，该代码启动并运行

fullcalendar

，其中包含其他用户所做的所有事件和约会

语言注释：“你必须订阅一本书”应该正确地为“你必须订阅一本书”。否则它就不是正确的英语。（是的，但它的意思是错误的，暗示用户将创建一些阅读材料！）“日历没有打开，我看到的只是一个空白。”。实际创建完整日历的代码在哪里？e、 g.

$（“#calendar”）.fullCalendar（{/..etc

？只显示一个名为“calendar”的div不是在创建日历对象。这似乎是一个客户端问题。为什么要用所有服务器端标记对其进行标记？我建议您查看JavaScript控制台中的错误，这可能会让您对问题有所了解。@ADyson，感谢您的语言注释：），现在它工作正常，但我有一个问题，如果我单击“取消订阅”，会话仍会将用户保存为订户，直到您刷新页面，有没有办法让他在我单击“取消订阅”时取消订阅，而无需重新加载页面？哦@Miguel，感谢您的兴趣，先生，我是您的粉丝之一，非常感谢您的支持请大家努力：）。