BlueGEEK Journal

Accueil > Programmes > Projets PHP pour Sites WEB > Agendas > Cyber Agenda ++ > Cyber-Agenda++ (Projet) > Utilisation de Js Calendar

AGENDA

Utilisation de Js Calendar

Recherche par Jour

samedi 9 septembre 2006, par bluegyn_spip

Revu et commenté le 9/9/2006

JSCALENDAR écrit 100% en pur Javascript GNU-OpenSource par Mihai Bazon sur

www.dynarch.com

JS CALENDAR

Aperçu test ici

Je l’ai placé en attendant sur la page de recherche par Jour

Cliquer par exemple sur le 12 mars

Sources pour connaisseurs ici

EN CLAIR

4 manips à faire

1

Placer le dossier JSCAL contenant

- Les feuilles de style

- Et les codes Javascript

Juste à côté de la page qui l’appelle (sans y toucher)

2

- L’agenda JSCALENDAR doit être déclaré dans l’entête de la page HTML

- Par ces 4 lignes de SCRIPT :

  1. calendar stylesheet
  1. main calendar program
  1. language for the calendar
  1. the following script defines the Calendar.setup helper function, which makes adding a calendar a matter of 1 or 2 lines of code.
<head>



<!-- calendar stylesheet -->

<link rel="stylesheet" type="text/css" media="all" href="jscal/aqua/theme.css" title="Aqua" />



<!-- main calendar program -->

<script type="text/javascript" src="jscal/calendar.js"></script>



<!-- language for the calendar -->

<script type="text/javascript" src="jscal/calendar-fr.js"></script>



<!-- the following script defines the Calendar.setup helper function, which makes adding a calendar a matter of 1 or 2 lines of code. -->



<script type="text/javascript" src="jscal/calendar-setup.js"></script>



</head>

3

- Dans le corps de la page déclarer un Conteneur DIV , et l’appeler calendar-container

<body>



<div id="calendar-container"> </div>



</body>

4

- Puis la fonction d’interception du Clic "DateChanged"

- Doit être implémentée quelque part sur la page

  • (ici entre /body et /html)
<!-- ZONE DE JAVASCRIPT -->

<script type="text/javascript">

function dateChanged(calendar) {

  if (calendar.dateClicked) {

    var y = calendar.date.getFullYear();

    var m = calendar.date.getMonth()+1;     // integer, 0..11

    var d = calendar.date.getDate();      // integer, 1..31

    // redirect...

    window.location = "rechercher_jour.php?date_actu=" + d + "-" + m + "-" + y;

  }

};

Calendar.setup(

  {

    flat        : "calendar-container", // ID of the parent element

    flatCallback: dateChanged           // our callback function

  }

);

</script>

Le point clef est cette ligne

window.location = "rechercher_jour.php ?date_actu=" + d + "-" + m + "-" + y ;

- Qui active la page WEB rechercher_jour.php par exemple, et lui passe l’argument date_actu définie par le jour, le mois et l’année

- La date peut être récupérée par la page ouverte dans la variable SuperGlobale $_GET de cette façon

- $date_actu = $_GET[’date_actu’] ;

Dans l’exemple joint

- window.location= est remplacée par une boîte d’alerte

- window.alert=

alert (’Nous sommes le ’ + d + ’-’ + m + ’-’ + y ) ;

Ps :

- Le nom de la page et

- Le nom et le format de la date sont tout a fait arbitraires...

<html style="background-color: buttonface; color: buttontext;">

<head>

<meta http-equiv="content-type" content="text/xml; charset=utf-8" />

<title>Calendrier ***{:-</title>

 <!-- calendar stylesheet -->

 <link rel="stylesheet" type="text/css" media="all" href="jscal/aqua/theme.css" title="Aqua" />

 <!-- main calendar program -->

 <script type="text/javascript" src="jscal/calendar.js"></script>

 <!-- language for the calendar -->

 <script type="text/javascript" src="jscal/calendar-fr.js"></script>

 <!-- the following script defines the Calendar.setup helper function, which makes

      adding a calendar a matter of 1 or 2 lines of code. -->

 <script type="text/javascript" src="jscal/calendar-setup.js"></script>

</head>



<?

require('admin/agenda.inc.php');

require('admin/mydata.inc.php');

include('admin/saints.fnc.php');      

define ("_DEBUG_",TRUE);





$date_actu=( isset($_GET["date_actu"])) ? $_GET["date_actu"] : $date_jour;

?>



<body>



<TABLE border=0 width=100% cellspacing=2 cellpadding=5>

 <tbody>

   <tr align="center">

     <td style="height: 10%;" colspan="2" rowspan="1">

       <table border=0 width="100%"><tr>

         <td width=30%>

           <form action="rechercher.php"><input type="submit" value="Retour Rechercher"></form>

         </TD>

         <TD width=30%>

           <H1>Journal du <span style="color: rgb(51, 51, 255);">

             <?echo$date_actu?></span></h1>

         </TD>

         <td align="right"><?echo$date_jour.'<br>'.saint_jour();?></td>

         </TR></table>

     </td>

   </tr>

   <tr>

     <td width="1" valign="top">

       <div id="calendar-container"> </div>

       </td>

     <td valign="top">

<?PHP



echo '

 <table border=0 width=100% cellspacing=2 cellpadding=5>

 <tr bgcolor="yellow">

   <th width=5%>Heure</th>

   <th width=30%>'.$legende_lieu.'</th>

   <th width=60%>'.$legende_objet.'</th>

   <th width=5%>!</th>

   </tr><tr>';

 

$i=0;

// ========================================================

// * Ouvre le CALENDRIER

// * Le parcoure de A a Z et cherche la date du jour

// ========================================================

$_F=fopen($dir_data.'/'.$mydata,"r+"); // r+ = Lecture ET ecriture

while(!feof($_F))

{ // $tableau[$i]=explode("|",fgets($_F,256));

        $ligne=explode("|",fgets($_F,256));

        $tab_date_actu=explode("-",$date_actu);

 $jd_date_actu=gregoriantojd($tab_date_actu[1],$tab_date_actu[0],$tab_date_actu[2]);



        if ($jd_date_actu==$ligne[0])

 {

                echo '

                <TH bgcolor='.$couleur_fond.'><small>'.$ligne[2].'</small></TH>

                <TD bgcolor="palegoldenrod"><small>'.$ligne[3].'</small></TD>

                <TD bgcolor="gainsboro"><small>'.$ligne[4].'</small></TD>

                <TD bgcolor="palegoldenrod"></TD>

   </TR><TR>';

        $i++;

        };

};

fclose($_F);



echo '

 </TR></TABLE>';

 if (_DEBUG_) echo "<hr><center> $i enregistrement(s) dans <b>$agenda_titre</b> en date du $date_actu</center>";



?>





     </td>

   </tr>

 </tbody>

</table>

<br>







</body>



<!-- ZONE DE JAVASCRIPT -->

<script type="text/javascript">

 function dateChanged(calendar) {

   // Beware that this function is called even if the end-user only

   // changed the month/year.  In order to determine if a date was

   // clicked you can use the dateClicked property of the calendar:

   if (calendar.dateClicked) {

     var y = calendar.date.getFullYear();

     var m = calendar.date.getMonth()+1;     // integer, 0..11

     var d = calendar.date.getDate();      // integer, 1..31

     // redirect...

     window.location = "rechercher_jour.php?date_actu=" + d + "-" + m + "-" + y;

   }

 };

 Calendar.setup(

   {

     flat        : "calendar-container", // ID of the parent element

     flatCallback: dateChanged           // our callback function

   }

 );

</script>



</html>

Messages

  • Il est possible de placer plusieurs calendriers par page

    Le paramétrage se fait ici :

    Calendar.setup(

      {

        flat        : "calendar-container", // ID of the parent element

        flatCallback: dateChanged           // our callback function

      }

    );

    Avec par exemple

    - flat : "calendar_1",

    - flatCallback : dateChanged_1

    Et

    - flat : "calendar_2",

    - flatCallback : dateChanged_2

    En créant bien sur les 2 conteneurs adéquats

     <div id="calendar_1"> </div>

     <div id="calendar_2"> </div>

    Et en créant 2 fonctions dateChanged_1 et dateChanged_2

    En fait

    - ni le Nom du Calendrier

    - ni le nom de la fonction ne sont imposés

    Seul importe le lien entre les 2 !

Programmes

Dans la même rubrique

2005 - 2024 BlueGEEK Journal
Plan du site | | Contact | RSS 2.0

SPIP