{% set title = 'Fullcalendar' %}
{% set page = 'fullcalendar.html' %}
{% extends "layouts/main.html" %}

{% block css%}
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>
<style>
    .fc-event {
        cursor: move;
    }
</style>
{% endblock %}
{% block content %}
        <div class="main-content">
            <div class="title">
                Full Calendar
            </div>
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-md-10">
                        <div id="calendar"></div>
                    </div>
                    <div class="col-md-2">
                        <div id='external-events'>
                            <p>
                              <strong>Draggable Events</strong>
                            </p>
                            <div class='fc-event py-1 mb-1 fc-h-event fc-daygrid-event fc-daygrid-block-event'>
                              <div class='fc-event-main'>My Event 1</div>
                            </div>
                            <div class='fc-event py-1 mb-1 fc-h-event fc-daygrid-event fc-daygrid-block-event'>
                              <div class='fc-event-main'>My Event 2</div>
                            </div>
                            <div class='fc-event py-1 mb-1 fc-h-event fc-daygrid-event fc-daygrid-block-event'>
                              <div class='fc-event-main'>My Event 3</div>
                            </div>
                            <div class='fc-event py-1 mb-1 fc-h-event fc-daygrid-event fc-daygrid-block-event'>
                              <div class='fc-event-main'>My Event 4</div>
                            </div>
                            <div class='fc-event py-1 mb-1 fc-h-event fc-daygrid-event fc-daygrid-block-event'>
                              <div class='fc-event-main'>My Event 5</div>
                            </div>
                          
                            <p>
                              <input type='checkbox' class="form-check-input" id='drop-remove' />
                              <label for='drop-remove'>remove after drop</label>
                            </p>
                          </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
{% block js %}
<script src="../vendor/fullcalendar/index.global.min.js"></script>
<script src='../vendor/@fullcalendar/bootstrap5/index.global.min.js'></script>
{% endblock %}

{% block runjs %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        const today = new Date()

        var containerEl = document.getElementById('external-events');

        var checkbox = document.getElementById('drop-remove');

        new FullCalendar.Draggable(containerEl, {
            itemSelector: '.fc-event',
            eventData: function(eventEl) {
                return {
                    title: eventEl.innerText
                };
            }
        });

        var calendar = new FullCalendar.Calendar(calendarEl, {
            themeSystem: 'bootstrap5',
            initialView: 'dayGridMonth',
            editable: true,
            droppable: true,
            drop: function(info) {
                if (checkbox.checked) {
                    info.draggedEl.parentNode.removeChild(info.draggedEl);
                }
            },
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            events: [
                {
                    id: '1',
                    title: 'Meeting with Client',
                    start: today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + (today.getDate() + 1)).slice(-2),
                    end: today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + (today.getDate() + 6)).slice(-2),
                    textColor: '#084298',
                    backgroundColor: '#cfe2ff',
                    borderColor: '#b6d4fe'
                },
                {
                    id: '1',
                    title: 'Start new Project',
                    start: today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + (today.getDate() + 2)).slice(-2),
                    end: today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + (today.getDate() + 4)).slice(-2),
                    textColor: '#084298',
                    backgroundColor: '#cfe2ff',
                    borderColor: '#b6d4fe'
                },
                {
                    id: '2',
                    title: 'Travel Time!!',
                    start: today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + (today.getDate() + 10)).slice(-2),
                    end: today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + (today.getDate() + 13)).slice(-2),
                    textColor: '#842029',
                    backgroundColor: '#f8d7da',
                    borderColor: '#f5c2c7'
                }
            ],
            weekNumbers: true,
            selectable:true,
            dayMaxEvents: true,
        });
        calendar.render();
        calendar.setOption('locale', 'id');


      });
</script>
{% endblock %}