Agenda avec jquery

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,
Je cherche à réaliser un logiciel de prise de rendez-vous pour cela, je souhaite utiliser la librairie jquery, php et mysql.
J’ai trouvé ici et là des exemples mais aucun n’utilise jquery.
Exemple :
http://www.moomonth.com/demo/index.html
http://www.dhtmlgoodies.com/scripts/dhtmlgoodies-week-planner/dhtmlgoodies-week-planner.html
A voir également:

3 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
Bonjour,

    et qu'attends-tu de nous ?
    si tu as des exemples et que tu tiens à tout prix à utiliser jquery,
          adaptes ces exemples à ce que tu veux...

<hr />                Cordialement            Bul        
Messages postés
12
Date d'inscription
lundi 8 janvier 2007
Statut
Membre
Dernière intervention
1 octobre 2008

Re bonjour,


Ces exemples sont en version béta et donc très bogués, avant
de réinventer la roue, je souhaiterais savoir si il existait déjà un projet  de ce type utilisant le Framework  jquery, actuellement  je boss sur la partie PHP/MySQL,  mais je planche sur la partie utilisateur que
je souhaite plus simple avec l’utilisation de drag and drop pour les rendez-vous.
  
Messages postés
12
Date d'inscription
lundi 8 janvier 2007
Statut
Membre
Dernière intervention
1 octobre 2008

Je poste un test que j'ai fait avec jquery et le plug in IU:
http://interface.eyecon.ro/interface/iutil.js
http://interface.eyecon.ro/interface/idrag.js
http://interface.eyecon.ro/jquery/jquery.js

Le code un peux long:

<!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=utf-8" />
<title>iCalendar Demo - jQuery</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><style type="text/css">
<!--
#content {
    margin: 0 0 0 0;
}
#iCalendar {
    width: 801px;
}

#iHours {
    width: 99px;
    float: left;
    position: relative;
    background-color: #CCCCCC;
    text-align: right;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-top-color: #999999;
    border-right-color: #999999;
    border-bottom-color: #999999;
    border-left-color: #999999;

}
#iDay_1, #iDay_2, #iDay_3, #iDay_4, #iDay_5, #iDay_6, #iDay_7 {
    width: 99px;
    height: 15px;
    float: left;
    position: relative;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: none;
    border-right-style: solid;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;

}
.iDay_Name {
    height: 20px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #999999;
    border-right-color: #999999;
    border-bottom-color: #999999;
    border-left-color: #999999;
    font-size: 1em;
    font-weight: bold;
    color: #000000;
    text-align: center;
    float: left;
    position: relative;
    width: 100px;
}
#iHour_Name {
    height: 20px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #999999;
    border-right-color: #999999;
    border-bottom-color: #999999;
    border-left-color: #999999;
    float: left;
    position: relative;
    width: 100px;
}
.iHour_1 {
    height: 21px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    padding: 0 5px 0 0;
}
.iHour_3 {
    height: 20px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: dotted;
    border-left-style: none;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    padding: 0 5px 0 0;
}
.iHour_1 p, .iHour_3 p {    
    margin:0;
    padding:0;
    font-size: 0.9em;
}
.iHour_2 {
    height: 20px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: dotted;
    border-left-style: none;
    border-top-color: #999999;
    border-right-color: #999999;
    border-bottom-color: #999999;
    border-left-color: #999999;
    padding: 0 5px 0 0;
}
.iHour_2 p {
    margin:0; padding:0;
    font-size: 0.9em;
}
.iHour_4 {
    height: 20px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #999999;
    border-right-color: #999999;
    border-bottom-color: #999999;
    border-left-color: #999999;
    font-size: 1em;
    text-align: center;
    font-weight: bold;
    padding: 0 5px 0 0;
}
.iHour_4 p {
    margin:0;
    padding:0;
    font-size: 0.9em;
}
.iDay_1, .iDay_3 {
    height: 20px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: dotted;
    border-left-style: none;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
}
.iDay_2 {
    height: 20px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: dotted;
    border-left-style: none;
    border-top-color: #999999;
    border-right-color: #999999;
    border-bottom-color: #999999;
    border-left-color: #999999;
    padding: 0 5px 0 0;
}
.iDay_4 {
    height: 20px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #999999;
    border-right-color: #999999;
    border-bottom-color: #999999;
    border-left-color: #999999;
    padding: 0 5px 0 0;
}
#iCalendar_Box {
    width:817px;
    overflow:auto;
    position: relative;

}
#iCalendar_Parent {
    width:700px;
    height:auto;
    position: relative;
    margin:0 0 0 100px;
    z-index:2;
}
.iToday {
    background-color:#FFFFCC;
}
.spacer {
    height:0px;
    overflow:hidden;
    clear:both;
}
.iEvent {
    width:97px;
    position: absolute;
    background-color:#CCCCCC;
    overflow: hidden;
    border: 1px solid #000000;
    z-index:3;
}
.iHand {
    height:10px;
    overflow:hidden;
    background-color:#0066CC;
    padding:1px;
    cursor: move;
}
-->
</style>
</head>

    

        <!-- -->
        

            
&nbsp;

            
Lundi

            
Mardi

            
Mercredi

            
Jeudi

            
Vendredi

            
Samedi

            
Dimanche

            
        

        <!-- -->
        

        <!-- -->
        

            <!-- -->    
            

                
8:00

                
15

                
30

                
45

                
9:00

            

        
    
            <!-- -->
            

                

                

                

                

                

            

            <!-- -->
            

                

                

                

                

                

            

            <!-- -->
            

                

                

                

                

                

            

            <!-- -->
            

                

                

                

                

                

            

            <!-- -->
            

                

                

                

                

                

            

            <!-- -->
            

                

                

                

                

                

            

            <!-- -->
            

                

                

                

                

                

            

            
                <!-- -->
                

                <!-- -->
                

3 Bonjour  h jhy hgjh jh fjhjhg gj

                

1 Bonjour  h jhy hgjh jh fjhjhg gj
    
                

2 Bonjour  h jhy hgjh jh fjhjhg gj

                <!-- -->
            

        

    

<script type="text/javascript">
$(document).ready(
    function()
    {
        $('.iEvent').Draggable(
            {
                handle:    '.iHand',
                grid:        [100,21],
                zIndex:     10,
                ghosting:    false,
                opacity:     0.7,
                containment : 'parent'
            }
        );
        
    }
);
</script>

</html>