Ajout external events dans Database

Bonjour,

Je suis actuellement en train de développer une application Web avec Asp5 MVC.
L'objectif de mon application est de gérer un planning de personne.

Pour le planning j'utilise Fullcalendar.

J'ai donc crée une page cshtml contenant un calendrier et des externals events que l'utilisateur à juste à faire glisser dans le calendrier.

Seulement j'aimerais que lorsque l'utilisateur dépose un external events sur le calendrier, qu'il soit aussi ajouter dans une base de données afin de le sauvegarder.

Je ne sais pas comment faire et j'aurai besoin de vos conseil ;-)

Voici le code de ma page cshtml avec mes externals events et mon fullcalendar

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id='external-events'>
        @{ 
            foreach (Team Team in Model.Team)
            {
                <div id='external-events-listing'>
                    <h4>@Team.teamName</h4>
                     @{
                         foreach (User User in Model.User)
                         {
 
                            if (User.idteam == Team.idTeam)
                            {
                                <div class="fc-event @Team.teamName" data-color="@Team.Color" style="background-color:@Team.Color;border-color:@Team.Color;">@User.firstname @User.lastname</div>
                            }
 
                         }
                      }
                </div>
            }
        }
    </div>
    <div id='calendar'></div>

Voici le code de mon fichier Javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
$(document).ready(function () {
 
    /* initialize the external events
    -----------------------------------------------------------------*/
 
    $('#external-events .fc-event').each(function () {
        var color = $(this).data('color');
        $(this).data('event', {
 
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true,// maintain when user navigates (see docs on the renderEvent method)
            color: color,
            description: 'Description'
        });
 
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0,  //  original position after the drag
            stop: function (ev, ui) {
                $('#modalTitle').html(event.title);
                $('#typeText').attr('placeholder', event.description);
                $('#fullCalModal').modal();
            }
        });     
    });
 
 
    /* initialize the calendar
    -----------------------------------------------------------------*/
 
   $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month'
        },
        lang: 'fr',
        selectable: true,
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar
        dragRevertDuration: 0,
 
        eventDragStop: function (event, jsEvent, ui, view) {
 
            if (isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
                $('#calendar').fullCalendar('removeEvents', event._id);
            }
            /*if (isEventOverPlan(jsEvent.clientX, jsEvent.clientY)) {
                $('#modalTitle').html(event.title);
                $('#typeText').attr('placeholder', event.description);
                $('#fullCalModal').modal();
            }*/
        },
 
        eventClick: function (event, jsEvent, view) {
            $('#modalTitle').html(event.title);
            //$('#modalBody').html(event.description);
            $('#typeText').attr('placeholder', event.description);
            //$('#eventUrl').attr('href',event.url);
            $('#fullCalModal').modal();
        },
 
 
        eventRender: function (event, element) {
            element.qtip({
                content: 'Start: ' +moment(event.dateDebut).format('dd-MM-yyyy')+
                    '<br>End: ' + moment(event.dateFin).format('dd-MM-yyyy') +
                    '<br>Description: ' + event.description,
            });
        },
 
        drop: function (moment, allDay) {
            alert("Dropped on " + moment.format());
        }
 
 
    });
}

Pour l'instant j'arrive à récupérer mes externals events avec javascript mais je n'arrive pas à en ajouter lorsque l'utilisateur glisse ceux ci dans le calendrier.

Merci d'avance.