Sujet Précédent Sujet Suivant

Agenda avec jquery

paguira Messages postés 12 Date d'inscription lundi 8 janvier 2007 Statut Membre Dernière intervention 1 octobre 2008 - 10 janv. 2008 à 21:30
paguira Messages postés 12 Date d'inscription lundi 8 janvier 2007 Statut Membre Dernière intervention 1 octobre 2008 - 11 janv. 2008 à 14:55
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

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
11 janv. 2008 à 10:23
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        
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
11 janv. 2008 à 13:12
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.
  
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
11 janv. 2008 à 14:55
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>
0

Discussions similaires

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

2 réponses
[date - Time-Calendar] NOMBRE DE JOURS?
bidani -
danimo -

11 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
Rejoignez-nous