IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Ajout external events dans Database


Sujet :

jQuery

  1. #1
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2013
    Messages
    85
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2013
    Messages : 85
    Points : 69
    Points
    69
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  2. #2
    Invité
    Invité(e)
    Par défaut
    Je te propose une piste :

    Si ton event est un objet Json Javascript, alors tu peux l'enregistrer en Base de données.
    Il faudrait savoir si ta base de données est du Sql ou du noSql.
    Si c'est du Sql, par exemple Mysql, il faut faire du mapping objet-relationnel avec ton langage Back End.
    En d'autres termes, tu envoies(post) ton objet JSON qui s'appelle "event" à ton back end à l'aide de la fonction $.ajax({event}) de Jquery,
    ensuite, ton langage BackEnd, lui, se charge de convertir l'objet JSON qu'il a reçu en un objet compréhensible par le langage Back End(.net, que je ne connais pas),
    ensuite, à l'aide d'une boucle FOR par exemple, tu enregistres chaque élèment({clef:valeur}) de l'objet JSON dans ta base de données relationnelle.
    Il te faut donc une table SQL que tu appeleras "events" . Dans cette table, les clefs de l'objet Json seront les noms des champs, et les valeurs de l'objet json seront les n-Uplets .

    Moi, je le fais, mais avec PHP en back end, et ça marche très bien.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Ajouter des Event dans une liste de Checkbox
    Par Battosaiii dans le forum Android
    Réponses: 0
    Dernier message: 05/05/2012, 11h32
  2. ajouter des données dans une liste externe
    Par mimi1255 dans le forum SharePoint
    Réponses: 1
    Dernier message: 19/09/2011, 16h17
  3. ouvrir un formulaire ajout event dans un calendar
    Par goldenman84 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 09/11/2010, 15h47
  4. Réponses: 0
    Dernier message: 22/01/2009, 00h37
  5. VB -> Acess, ajout d'information dans la database
    Par alec-- dans le forum VB 6 et antérieur
    Réponses: 21
    Dernier message: 14/05/2007, 13h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo