Sujet Précédent Sujet Suivant

Agenda avec jquery et le plugin interface

paguira Messages postés 12 Date d'inscription lundi 8 janvier 2007 Statut Membre Dernière intervention 1 octobre 2008 - 7 mars 2008 à 20:46
paguira Messages postés 12 Date d'inscription lundi 8 janvier 2007 Statut Membre Dernière intervention 1 octobre 2008 - 18 mars 2008 à 02:34
Bonjour à tous,


Je boss actuellement sur un agenda en Ajax, pour cela j’utilise  jquery et le plugin interface.


Je bloque sur le réajustement d’un événement lors d’un
surbooking (un RDV le même jour la même heure), mon événement ne reprend pas sa
taille d’origine :


Voici mon code source :




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/iutil.js"></script>
<script type="text/javascript" src="js/idrag.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript" src="js/jquery-splitter/splitter.js"></script>
<style type="text/css">
<!--
body {
    font-family: Arial, Helvetica, sans-serif;
}
#agenda {
    width:834px;
    height:350px;
    overflow: hidden;
    position: relative;
    clear: both;
}
#agenda_content {
    position: absolute;
}
.day, #hours {
    height: 1200px;
    float:left;
    position:relative;
    
}
.hour_1 {
    height: 23px;
    width: 53px;
    background-color: #C6DEFF;
    font-size: 1em;
    color: #6593CF;
    padding: 1px 2px 1px 0;
    text-align: right;
}
.hour_2 {
    height: 23px;
    width: 53px;
    font-size: 1em;
    color: #6593CF;
    padding: 1px 2px 1px 0;
    text-align: right;
    background-color: #E3EFFF;
}
#hours span.exposant{
    color: #6593CF;
    vertical-align: 4px;
    font-size: 0.8em;
}
#hours  span.indice{
    color: #6593CF;
    vertical-align: -4px;
    font-size: 0.8em;
}
#day_1, #day_3, #day_5, #day_7 {
    background-color: #E6EDF7;
    width: 110px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-top-color: #5D8CC9;
    border-right-color: #5D8CC9;
    border-bottom-color: #5D8CC9;
    border-left-color: #5D8CC9;

}
/*#day_7 {
    background-color: #E6EDF7;
    width: 112px;
}*/
#day_2, #day_4, #day_6 {
    width: 110px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-top-color: #5D8CC9;
    border-right-color: #5D8CC9;
    border-bottom-color: #5D8CC9;
    border-left-color: #5D8CC9;
}
.event {
    width: 106px;
    background-color:#FF9900;
    position:absolute;
    z-index:1000;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #6593CF;
    border-right-color: #6593CF;
    border-bottom-color: #6593CF;
    border-left-color: #6593CF;
    color: #FFFFFF;
    font-size: 0.9em;
    overflow: hidden;
    padding: 1px;
}

#days {
    width:777px;
    height:1200px;
    float:left;
    position:relative;
    border: 1px solid #8DAED9;
}
.resizeS
{
    width: 100%;
    height: 6px;
    background-color: #ccc;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(css/images/resize_s.gif);
    background-position: center;
    overflow: hidden;
    font-size: 1px;
    cursor:s-resize;
    z-index:1001
}

.slider1{
    width: 18px;
    height: 350px;
    background-color: #FFFFCC;
    position: absolute;
    float:left;
    margin:0;
    background-image: url(css/images/lift/lift_content.gif);
    background-repeat: repeat-y;
    
}
.indicator{
    width: 18px;
    height: 18px;
    position: absolute;
    font-size: 1px;
    overflow: hidden;
    background-image: url(css/images/lift/lift_top.gif);
    background-repeat: no-repeat;
    background-position: center top;
}
.lift_top{}
.lift_bottom{
    background-image: url(css/images/lift/lift_bottom.gif);
    background-repeat: no-repeat;
    background-position: bottom;
}
.lift_center{
    background-image: url(css/images/lift/lift_center.gif);
    background-repeat: no-repeat;
    width: 8px;
    height: 7px;
    margin: 50% 5px 0 5px;
    position:relative;

}
.event_hand p{
    font-size: 0.8em;
    margin:0;
    padding:0;
}
.event_hand img {
    padding: 1px;
}
.event_hand span{
    font-size: 0.8em;
    color: #000000;
    border: 1px solid #000000;
    background-color: #FFFFFF;
}
#hour_title {
    width: 55px;
    height: 18px;
    float: left;
    background-color: #C6DEFF;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-bottom-style: solid;
    border-top-color: #5D8CC9;
    border-right-color: #5D8CC9;
    border-bottom-color: #5D8CC9;
    border-left-color: #5D8CC9;
}
.day_title{    
    height: 19px;
    float: left;
    background-image: url(css/images/agenda/day_title.gif);
    background-repeat: repeat-x;
    width: 110px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-top-color: #5D8CC9;
    border-right-color: #5D8CC9;
    border-bottom-color: #5D8CC9;
    border-left-color: #5D8CC9;
    font-size: 0.8em;
    text-align: center;
    font-weight: bold;
}
.box{}
#agenda_title{
    position: relative;
}
#days_title {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #8DAED9;
    border-right-color: #8DAED9;
    border-bottom-color: #8DAED9;
    border-left-color: #8DAED9;
    width:777px;
    float:left;
    height:19px;
    position:relative;
}
/* */
#agenda_splitter {
    height: 400px;
    margin: 1em 3em;
    border: 4px solid #5D8CC9;
    /* No padding allowed */
}
/*
 * Left-side element of the splitter. Use pixel units for the
 * min-width and max-width; the splitter plugin parses them to
 * determine the splitter movement limits. Set the width to
 * the desired initial width of the element; the plugin changes
 * the width of this element dynamically.
 */
#LeftPane {
    background: #efe;
    padding: 4px;
    overflow: auto;
    width: 150px;        /* optional, initial splitbar position */
    min-width: 50px;    /* optional */
    /* No margin or border allowed */
}
/*
 * Right-side element of the splitter.
 */
#RightPane {
    min-width: 100px;
    overflow: auto;
    background-color: #C6DEFF;    /* No margin or border allowed */
}
/*
 * Splitter bar style; the .active class is added when the
 * mouse is over the splitter or the splitter is focused
 * via the keyboard taborder or an accessKey.
 */
#agenda_splitter .vsplitbar {
    width: 6px;
    background-color: #5D8CC9;
    background-image: url(css/images/vgrabber.gif);
    background-repeat: no-repeat;
    background-position: center;
}
#agenda_splitter .vsplitbar.active, #agenda_splitter .vsplitbar:hover {
    background: #e88 url(vgrabber.gif) no-repeat center;
}

-->
</style>
</head>

<!--    
    

        

        fdf fjkl

        
-->
        <!--
        
-->
        <!-- -->
         

             

                

                    
lun

                    
mar

                    
mer

                    
jeu

                    
ven

                    
sam

                    
dim

                

         

            <!-- -->
            
            <!-- -->
            

                

            
                        
                            

                    

                

                

            

            

                

                    <!-- -->
                    

                        
00 00

                        
15

                        
30

                        
45

                        
01 00

                        
15

                        
30

                        
45

                        
02 00

                        
15

                        
30

                        
45

                        
03 00

                        
15

                        
30

                        
45

                    

                    <!-- -->    
                    

                        <!-- -->
                            

                                

                                    08h00 - 09h00

                                     M Willy Roy-Belleplaine

                                

                                

                            

                            

                                

                                    10h00 - 10h30

                                     M Willy Roy-Belleplaine

                                

                                

                            

                            

                                

                                    09h00 - 10h00

                                     M Willy Roy-Belleplaine

                                

                                

                            

                            

                                

                                    09h00 - 10h00

                                     M Willy Roy-Belleplaine

                                

                                

                            

                        <!-- -->
                    
                        

                        

                        

                        

                        

                        

                        

                    

                

            

    <!--     
    

-->
<script type="text/javascript">
/*$().ready(function() {
    $("#agenda_splitter").splitter({
        type: 'v',
        initA: true,    // use width of A (#LeftPane) from styles
        accessKey: '|'
    });
    // Firefox doesn't fire resize on page elements
    $(window).bind("resize", function(){
        $("#agenda_splitter").trigger("resize");
    }).trigger("resize");
});*/
</script>

<script type="text/javascript">
function ConvertSecond(second){
  //combien d'heures ?
  hour = Math.floor(second / 3600);

  //combien de minutes ?
 minute = Math.floor((second - (hour * 3600)) / 60);
  if (minute < 10)
    minute = "0" + minute;

  //combien de secondes
  sec = second - (hour * 3600) - (minute * 60);
  if (sec < 10)
    sec = "0" + sec;
        
  return hour + ":" + minute + ":" + sec;
}

function BookingEvent(){
        var i=1;
    
    // on recherche tous les évènements
    $(".event").each(function(){
        var StartEvent     = $(this).css('top');
        StartEvent         = StartEvent.replace("px","");
        StartEvent         = parseInt(StartEvent);
        
        var EndEvent     = $(this).css('height');
        EndEvent         = EndEvent.replace("px","");
        EndEvent         = parseInt(EndEvent) + StartEvent;
        
        var DayEvent     = $(this).css('left');
        DayEvent         = DayEvent.replace("px","");
        DayEvent         = parseInt(DayEvent);         
        
        ElemParent         = $(this).attr("id");
        Widthparent        = $(this).css("width");
        Widthparent     = Widthparent.replace("px","");
        Widthparent     = parseInt(Widthparent);     
        
        // on recherche tous les évènements différent de l'évènement comparé
        $(".event").each(function(){
            var j=0;    
            if(ElemParent != $(this).attr("id")){
            
                
                var OtherStartEvent = $(this).css('top');
                OtherStartEvent     = OtherStartEvent.replace("px","");
                OtherStartEvent     = parseInt(OtherStartEvent);
                
                var OtherEndEvent     = $(this).css('height');
                OtherEndEvent         = OtherEndEvent.replace("px","");
                OtherEndEvent         = parseInt(OtherEndEvent) + OtherStartEvent;     
                
                var OtherDayEvent     = $(this).css('left');
                OtherDayEvent         = OtherDayEvent.replace("px","");
                OtherDayEvent         = parseInt(OtherDayEvent);     
                
                $("#ERROR_3").text(' Parent Start : ' + StartEvent + 'Parent New : ' + OtherStartEvent + 'Parent New End : ' + OtherEndEvent);
                
                // on compare les heures
                if(StartEvent> =OtherStartEvent && StartEvent<= OtherEndEvent && DayEvent==OtherDayEvent){
                    i++;
                    j++;    
                }else if(EndEvent>=OtherStartEvent  && EndEvent<=OtherEndEvent && DayEvent==OtherDayEvent){
                    i++;
                    j++;
                }
                
                // on ajuste la taille de l'évènement
                if(j){    
    
                    Width = Math.round(Widthparent/(i));                
                    
                    $('#' + ElemParent).css('width', Width + 'px');
                    $(this).css('width', Width + 'px');
                
                    //alert($('#' + ElemParent).css('width') + '     ' + $(this).css('width'));
            
                    Left =  OtherDayEvent +Width;
                    $('#' + ElemParent).css('left', Left + 'px');
                    

                }        
                        
            
            }

            // on réajuste la taille de lévènement
            if(ElemParent == $(this).attr("id") && j){
                    //$('#' + ElemParent).css('width', 106 + 'px');
                    if(i>2){
                        //$(this).css('width', 106 + 'px');
                    }    
                if(j){
                    Width = Math.round(Widthparent*i);        
                    //    Left = (Width*2) - DayEvent;
                    $(this).css('left', Widthparent+Width + 'px');    
                
                }
            }
        
        });
        
        // On affiche les données de l'évènement pour debug
        $("#ERROR_2").text(i + ' Parent Start : ' + StartEvent + 'Parent End : ' + EndEvent);
        
    });
}

jQuery(document).ready(function() {

    
    BookingEvent();    

    
    $(".event").css("opacity",0.8);
        $(".event").Draggable(
            {
                grid:            [111,25],
                zIndex:         1000,
                ghosting:        true,
                opacity:         0.7,
                containment:     "parent",
                onChange:         function (drag){    
                    
                    var Day      = false;
                        
                    var hour     = $(this).css('top');
                    hour         = hour.replace("px","");
                    hour         = parseInt(hour)
                                        
                    var day     = $(this).css('left');
                    day         = day.replace("px","");
                    day         = parseInt(day);
                    
                    // Hauteur en px de l'heure
                    var HourInterval    = 25;
                    Hour                 = HourInterval*96;
                    Hour                 = hour/HourInterval;
                    Hour                 = Math.floor(Hour*900);
                    Hour                 = ConvertSecond(Hour);                    
                    
                    var EndEvent     = $(this).css('height');
                    EndEvent         = EndEvent.replace("px","");
                    EndEvent         = parseInt(EndEvent);
                
                    var StartEvent         = $(this).css('top');
                    StartEvent             = parseInt(StartEvent);
                    
                    if(EndEvent<HourInterval){EndEvent = HourInterval; }
                    EndHour                = HourInterval*96;
                    EndHour             = Math.round((EndEvent+StartEvent)/HourInterval);
                    EndHour             = EndHour*900;
                    EndHour                = ConvertSecond(EndHour);                    

                    // Largeur en px de jour
                    var DayInterval = 111;
                        
                    Day = DayInterval*7;
                    Day = day/DayInterval;

                    Id = $(this).attr("id");
                    
                    // On affiche les données de l'évènement pour debug
                    document.getElementById("ERROR").innerHTML = 'Id : ' + Id + '
Start heure : ' + Hour + '
End heure : ' + EndHour + '
Jour : ' + Day;
                    $(".event_hour", this).text(Hour + ' - ' + EndHour);
                    BookingEvent();
                    
                }
            
                
            }
        );

        //  Gestion du redimensionnement Sud
        $(".resizeS").mousedown( function(event){
            Id = $(this).parent().attr("id");
            document.getElementById("ERROR").innerHTML = 'Id : ' + Id;
             $(this).parent().Resizable({
            //$(elem).Resizable({
                minWidth:    50,
                minHeight:     23,
                maxWidth:     400,
                maxHeight:     1200,
                minTop:     0,
                minLeft:     0,
                maxRight:     777,
                maxBottom:     350,
                handlers: {
                    s: this
                },
                onStop: function(){                        
                    
                    var hour     = $(this).css('height');
                    hour         = hour.replace("px","");
                    hour         = parseInt(hour);
                
                    // Hauteur en px de l'heure
                    var HourInterval    = 25;
                    var StartEvent         = $(this).css('top');
                    StartEvent         = StartEvent.replace("px","");
                    StartEvent         = parseInt(StartEvent);
                    
                    if(hour<HourInterval){ hour = HourInterval; }
                    Hour                = HourInterval*96;
                    Hour                 = Math.round((hour+StartEvent)/HourInterval);
                    Hour                 = Hour*900;
                    Hour                 = ConvertSecond(Hour);
                    
                    if(StartEvent!=0){                
                        StartEvent             = Math.round(StartEvent/HourInterval);
                        StartEvent             = StartEvent*900;                        
                    }
                    StartEvent            = ConvertSecond(StartEvent);        
                    Height                 = Math.round(hour/HourInterval);
                    Height                 = Height*HourInterval;
        
                    // On affiche les données de l'évènement pour debug
                    document.getElementById("ERROR").innerHTML = 'Id : ' + Id + '
Start heure : ' + StartEvent + '
End heure : ' + Hour;
                    $(".event_hour", this).text(StartEvent + ' - ' + Hour);
                    
                    //document.getElementById("ERROR").innerHTML = 'Heure : ' + Hour;    
                    $(this).css('height', Height + 'px');                    
                    },
                onResize: function(size){                        
                    
                    var hour     = $(this).css('height');
                    hour         = hour.replace("px","");
                    hour         = parseInt(hour);
                
                    // Hauteur en px de l'heure
                    var HourInterval    = 25;
                    var StartEvent         = $(this).css('top');
                    StartEvent         = StartEvent.replace("px","");
                    StartEvent         = parseInt(StartEvent);
                    
                    if(hour<HourInterval){ hour = HourInterval; }
                    Hour                = HourInterval*96;
                    Hour                 = Math.round((hour+StartEvent)/HourInterval);
                    Hour                 = Hour*900;
                    Hour                 = ConvertSecond(Hour);
                    
                    if(StartEvent!=0){                
                        StartEvent             = Math.round(StartEvent/HourInterval);
                        StartEvent             = StartEvent*900;                        
                    }
                    StartEvent            = ConvertSecond(StartEvent);        
                    Height                 = Math.round(hour/HourInterval);
                    Height                 = Height*HourInterval;
                    
                    //alert(' \nHeure : ' + Hour);    
                    //Id = $(this).attr("id");
                    document.getElementById("ERROR").innerHTML = 'Id : ' + Id + '
Start heure : ' + StartEvent + '
End heure : ' + Hour;
                    $(".event_hour", this).text(StartEvent + ' - ' + Hour);
                    
                    //document.getElementById("ERROR").innerHTML = 'Heure : ' + Hour;    
                    $(this).css('height', Height + 'px');                        
                    }
                }
            );
        });

    
    
    //$("#agenda_content").css('top', -100 + 'px');
});

</script>

<hr />

<hr />

<hr />

<script type="text/javascript">
    // Gestion de l'ascenseur
    var ocontainer;
    var ocontent;
    var spaceToScroll;
    $(document).ready(
        function ()
        {
            ocontainer             = $("#agenda");
            ocontent             = $("#agenda_content");
            
            containerSize         = jQuery.iUtil.getSize(ocontainer.get(0));
            containerPosition     = jQuery.iUtil.getPosition(ocontainer.get(0));
            containerInner         = jQuery.iUtil.getClient(ocontainer.get(0));
            
            contentSize         = jQuery.iUtil.getSize(ocontent.get(0));
            $("div.indicator").css('top', containerInner.h * containerSize.hb / contentSize.hb + 'px');
            $('div.slider1')
                .css('top', containerPosition.y + 'px')
                .css('left', containerPosition.x + containerSize.wb + 'px')
                .css('height', containerSize.hb + 'px');
            
            spaceToScroll = contentSize.hb - containerInner.h;
            
            $('div.indicator')
                .css('height', containerInner.h * containerSize.hb / contentSize.hb + 'px')
            
            $('.slider1').Slider(
                {
                    accept : '.indicator',
                    onSlide : function( cordx, cordy, x , y)
                    {
                        ocontent
                            .css('top', - spaceToScroll * cordy / 100 + 'px');
                        
                    
                    }
                }
            );
        }
        
    );
    
</script>

</html>

3 réponses

Réponse 1 / 3
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 mars 2008 à 11:36
Bonjour,

    à mon humble avis....
       soit tu fais l'extrait de ce qui plante, tout ce qu'il faut mais pas plus
       soit du donnes une adresse où tester...
    en précisant... où ça pêche...

<hr />                Cordialement            Bul        
0
Réponse 2 / 3
paguira Messages postés 12 Date d'inscription lundi 8 janvier 2007 Statut Membre Dernière intervention 1 octobre 2008
8 mars 2008 à 16:23
Un petit lien:
http://www.neodys.fr/exemple/icalendar/demo.html
0
Réponse 3 / 3
paguira Messages postés 12 Date d'inscription lundi 8 janvier 2007 Statut Membre Dernière intervention 1 octobre 2008
18 mars 2008 à 02:34
Il n'y a personne pour m'aider ?! snif snif.
je ne triuve toujours pas la solution:
Rappel du lien : http://www.neodys.fr/exemple/icalendar/demo.html
0

Discussions similaires

création d'un agenda électronique
cs_wizem -
aliaissaoui -

2 réponses
Agenda partagé
cs_glucoz -
grhum59 -

6 réponses
DIAPORAMA ALÉATOIRE AVEC TIMER
seufseuf -
neigedhiver -

31 réponses
jquery nombre d'options d'un select
Raul duke -
Raul duke -

1 réponse
[JQuery]Datatable problème avec la création de bouton
EnguerrandP -
EnguerrandP -

15 réponses
Rejoignez-nous