Dans ce tutoriel j’explique comment créer une application multi-plateforme avec Xamarin forms.
Auteur : Admin
Gérer le contenu de votre site avec WordPress
Par défautWordPress est un logiciel de gestion de contenu CMS (Content management system en anglais) qui vous permet de gérer facilement vos pages web. Il vous permet de publier des articles, créer des pages, ajouter des images, etc.
Dans la video suivante, je vous explique comment gérer vos pages avec wordpress.
Utilisation de jQuery fullcalendar avec asp.net
Par défautPendant quelques semaines j’ai cherché sur l’internet des exemples pour comprendre comment utiliser le fullCalendar Jquery dans mes applications web asp.net. Le jour où j’ai enfin compris le truc, j’ai décidé de publier un article en français sur le sujet. J’espère que quelqu’un pourra en profiter.
1. Configuration simple en 10 lignes de code
1.1 Ajouter les références jquery (css et javascript)
<link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" /> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
1.2 Écrire le code javascript pour initialiser le calendrier
$(document).ready(function() { $('#calendar').fullCalendar({ // ici vous ajouterez les options et les fonctions }) });
Le code précédant fait appel à un élément de votre page nommé ‘calendar’. Donc il faufra ajouter le code suivant dans le body de la page
<div id='calendar'></div>
En exécutant cette page vous devriez voir s’afficher un calendrier sans évènements.
2. Afficher des évènements
Maintenant il faudrait dire au calendrier qu’est ce qu’il doit afficher
Il s’attend à recevoir une liste d’événements sous la forme d’une chaîne de caractère en format json.
events: [{ title: 'Event1', start: '2013-11-11 08:00:00', end: '2013-11-11 10:00:00' }, { title: 'Event2', start: '2013-11-12 11:00:00', end: '2013-11-12 13:00:00'}]
Si vous ajouter ce code à l’intérieur du code précédant ceci devrait afficher 2 événements.
$(document).ready(function () { $('#calendar').fullCalendar({ // ici vous ajouterez les options et les fonctions events: [{ title: 'Event1', start: '2013-11-11 08:00:00', end: '2013-11-11 10:00:00' }, { title: 'Event2', start: '2013-11-12 11:00:00', end: '2013-11-12 13:00:00'}] }) });
Mais le plus pratique c’est de lui indiquer l’adresse ou il doit aller chercher les événements, dans ce exemple nous utilisons une page .ashx.
events: ’loadEvents.ashx’
Ça pourrait être aussi un webservice. (voir article au sujet de Json, webService, webMethods)
3. Les options
Les options vous permettent de contrôler l’apparence et le comportement du calendrier. Par exemple.
$('#calendar').fullCalendar({ weekends: false, // cache samedi et dimanche events: ’loadEvents.ashx’ //Adresse des événements a afficher });
Vous pouvez rajouter plusieurs options séparées par une virgule.
4. Les fonctions (Callbacks)
Les callbacks sont des options qui exécute une fonction chaque fois que certaines actions sont réalisées dans l’interface. L’exemple suivant définit ce qui doit se passer quand un utilisateur click sur le calendrier.
$('#calendar').fullCalendar({ dayClick: function() { alert('Vous avez cliqué sur une journée'); //Affiche un message } });
Pami les plus utilisés on peut citer:
eventDrop // déplacement d’un évévement eventResize //modifier la durée d’un événement select // Click sur une case drop //glisser un évènement externe sur le calendrier eventRender //peut-être utiliser pour afficher un tooltip par exemple
Pour connaître toutes les options disponibles vous pouvez consulter la documentation à l’adresse suivante: http://arshaw.com/fullcalendar/docs/display/