{% extends 'base.html.twig' %}

{% block title %}Projectiles - Mon tableau de bord{% endblock %}
{% block body %}
<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>



<style>

</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script>
  var app_stop_ticket = "{{ url('app_stop_ticket') }}";
</script>
<script>
    $(document).ready(function () {
        
    })
</script>
<script>
  /* in the browser environment namespace */
  const Calendar = tui.Calendar;
  const calendar = new Calendar('#calendar', {
  defaultView: 'week',
  template: {
    time(event) {
      const { start, end, title } = event;

      return `<span style="color: white;">${formatTime(start)}~${formatTime(end)} ${title}</span>`;
    },
    allday(event) {
      return `<span style="color: gray;">${event.title}</span>`;
    },
  },
  calendars: [
    {
      id: 'cal1',
      name: 'Personal',
      backgroundColor: '#03bd9e',
    },
    {
      id: 'cal2',
      name: 'Work',
      backgroundColor: '#00a9ff',
    },
  ],
});
</script>
<div class="container-homepage">
    <h1>Mon emploi du temps</h1>
    <br>
    <div id="calendar" style="height: 800px"></div>
</div>  
{% endblock %}