Agenda avec jquery et le plugin interface

Signaler
Messages postés
12
Date d'inscription
lundi 8 janvier 2007
Statut
Membre
Dernière intervention
1 octobre 2008
-
Messages postés
12
Date d'inscription
lundi 8 janvier 2007
Statut
Membre
Dernière intervention
1 octobre 2008
-
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

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
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        
Messages postés
12
Date d'inscription
lundi 8 janvier 2007
Statut
Membre
Dernière intervention
1 octobre 2008

Messages postés
12
Date d'inscription
lundi 8 janvier 2007
Statut
Membre
Dernière intervention
1 octobre 2008

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