Drag and drop a task with FullCalendar.js in symfony project

Chlem 0
Viewed 15

I am trying to implement a drag and drop using FullCalendar.js. I saw in documentation to enable option editable to true for moving event but this don't work.

On the render, you can see my task, i just want to move my task to monday (for exemple). Do you have suggestion for where error come from ? Or an issue ? Thanks !

this is my code

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


{% block title %}Calendrier{% endblock %}

{% block body %}
        <div>
            <a class="btn btn-secondary" href="{{ path('home') }}">
            <i class="fas fa-long-arrow-alt-left"></i> Retour</a>
        </div>

        <div class="row mt-5">
            {% if is_granted("ROLE_MANAGER") %}
                <div class="col d-flex my-3 justify-content-end">
                    {{ form_start (form, {'attr': {'class': 'd-flex'}}) }}
                    {{ form_widget(form.technicien, {'attr': {'class': 'd-inline me-2'}}) }}
                    {{ form_widget(form.techniciens, {'attr': {'class': 'd-none'}}) }}
                    <input id="submitBtn" class="btn btn-success d-inline" type="submit" value="Filtrer">
                    {{ form_end(form) }}
                </div>
            {% endif %}
            <div class="col-12">

                <div id="calendar" class="d-flex justify-content-center">

                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

{{ include('loading_spinner.html.twig') }}
 <script>
    var mainRole = '{{mainRole}}';
    if(mainRole == 'MANAGER') {
        var idTechniciens = '{{partnerTechniciens}}';
        var idTechniensArray = idTechniciens.split(' ');
        
        var technicienSelect = $('#ticket_intervention_user_technicien');
        var options = $('#ticket_intervention_user_technicien option');

        var optionsToHide = $.map(options ,function(option) {
            var extra = new Array();
            if(!idTechniensArray.includes(option.value)) {
                extra.push(option);
            }
            return extra;
        });

        optionsToHide.forEach(function(option) { 
            option.style.display = 'none'; });
    }
    
 
</script>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

<script src='fullcalendar/main.js'></script>
    <script>
        window.onload = () => {
            calendar('#calendar', {
                'events': {{ data|raw }},
                'enventStartEditable': true,
                'editable': true,
                //'eventResizableFromStart': true,
                'nowIndicator': true,
                eventDidMount: function(info) {
                    let tooltip = new bootstrap.Tooltip(info.el, {
                        title: ('Client : ' + info.event.extendedProps.description),
                        placement: 'top',
                        trigger: 'hover',
                        container: 'body'
                    });
                }
            });
        }
    </script>
   
{% endblock %}

This is the render of my calendar:

in my app.js :

import { calendar } from "./full-calendar";
global.calendar = calendar;

How can i do it ?

symfony fullcalendar javascript
1 Answers

ok i change the render with the documentation and it's work

window.onload = () => {
            let calendarElt = document.querySelector("#calendar")
            let calendar = new FullCalendar.Calendar(calendarElt, {
            initialView: 'timeGridWeek',
            locale: 'fr',
            timeZone: 'Europe/Paris',
            headerToolbar: {
                start: 'prev,next today',
                center: 'title',
                end: 'dayGridMonth,timeGridWeek'
            },
            events: {{ data|raw }},
            editable: true,
            nowIndicator: true,
            eventResizableFromStart: true,
            eventDidMount: function(info) {
                    let tooltip = new bootstrap.Tooltip(info.el, {
                        //title: ('Client : ' + info.event.extendedProps.description),
                        placement: 'top',
                        trigger: 'hover',
                        container: 'body'
                    });
                }
        })
Chlem0
Related