CLNDR.js le calendrier ultime

Développé un calendrier afin de l' intégrer à notre site est quelque chose de pas facile.

La plus part du temps on cherche sur google un plugin tout fait développé en PHP ou Javascript.

Mais hélas souvent afin de l' intégrer sur notre site web on est obligé de rentrer dans le code source du plugin. C' est un véritable parcours de combattant surtout si le plugin a été codé avec les pieds.

Heureusement un plugin jquery a été développé afin de personnaliser au maximum notre calendrier.

C' est CLNDR.js

http://kylestetz.github.io/CLNDR/

https://github.com/kylestetz/CLNDR

 

CLNDR est une sorte de Framework de calendrier JS c' est à dire une boite à outil toute faite afin de nous simplifier le travail pour le développement d' un calendrier sous réserve bien sur de maitriser Javascript et Jquery.

 

Pour obtenir un calendrier comme sur l' image ci-dessous voici la procédure à suivre.

 

D' abord télécharger le plugin et le mettre dans votre application.

Créer un fichier html comme ci dessous.

<!DOCTYPE html>
<html>
  <head>   
	<meta charset="UTF-8">
	<link href="css/calendrier/clndr.css" rel="stylesheet">
  </head>
  <body>
    <h1>Mon super calendrier !!</h1>
	<div class="container">
		<div class="cal2">
		</div>

	</div>  
    <script src="js/jquery.js"></script><!-- la bibiliothèque Jquery -->
	<script src="js/underscore-min.js"></script><!-- a telecharger pour utiliser les template en javascript https://github.com/jashkenas/underscore -->
	<script src="js/moment.js"></script><!-- a telecharger pour avoir les fate en français https://github.com/moment/moment/ -->
	<script src="js/clndr.js"></script><!-- la bibiliothèque clndr.js -->
	<script src="js/scriptcalendrier.js"></script><!-- script de lancement du calendrier -->	
  </body>
</html>

 

Puis crée le fichier javascript  afin de lancer le script.

  $(function(){
  moment.lang('fr');//pour avoir les dates en français
 
  $('.cal2').clndr(
    {
    template : clndrTemplate,
	date: moment("2013-05-29")
	});


});

 

Ceci est un petit exemple parmi tant d' autre. A vous de personnaliser votre calendrier des rêves.laughing



Javascript Jquery CLNDR.js calendrier

Commentaire (0)


Laissez un commentaire