JS : Calendar (Web 2.0) calendrier graphique éditable
Par PlaceOweb le lundi, septembre 20 2010, 19:12 - Javascript - Lien permanent
Comment faire un calendrier graphique comme Google Calendar ? Pas de sélectionneur de date (date picker), du vrai calendrier visuel à la Outlook, Google Calendar, ou autres planificateurs de tâches.
GWT
ftr-gwt-library A library of Gwt Widgets
Démo (Calendar, Horizontal time panel, File Upload)
Semble mal documenté (allemand principalement), et pas spécialement optimisé.
gwt-cal an open-source calendar widget similar to iCal, Outlook, Google Calendar, etc
Démo (75Ko)
Community Feedback
I've just test-replaced ftr-gwt-library calendar with gwt-cal in my project due to major performance problems. Gwt-cal is superb in terms of performance and has very clean API. Good work!
gwt-calendar Advanced Date/Interval picker for gwt.
Il s'agit juste d'un sélecteur de date (date picker). Ce widget est maintenant un élément de la collection GWTChismes.
Sencha (ExtJs)
N'inclue pas de calendrier par défaut, vois ses plugins :
- Extension:Calendar
- MyCalendar est un widget calendrier ExtJS base pour la visualisation d'événements basés sur le temps. Il est capable de rendre dynamique, vues de l'agenda de style des données d'événement à partir de données JSON. MyCalendar n'est pas restreint à un serveur spécifique pour ses données backend. Vous pouvez utiliser Grails, PHP,. NET pour créer des données JSON et alimenter MyCalendar.
SmartClient / Smart GWT
SmartClient (donc SmartGWT aussi) inclus un calendrier, exemple "Databound Calendar" :
- Calendar SmartClient (1.2Mo)
- Calendar SmartGWT (1.0Mo)
jQuery
- FullCalendar (85Ko) est un plugin jQuery qui permet le drag & drop sur le calendrier. Intégrer un calendrier javascript en taille réelle sur votre site. Il est visuellement personnalisable et permet d'ajouter des crochets (hooks) sur les événements déclenchés par l'utilisateur(comme en cliquant ou en faisant glisser un événement).
Avertissement: FullCalendar est génial pour l'affichage des événements, mais ce n'est pas une solution complète pour le contenu de gestion des événements. Au-delà de glisser un événement à un autre moment / jour, vous ne pouvez pas changer le nom d'un événement ou d'autres données associées. C'est à vous d'ajouter cette fonctionnalité à travers les événement du FullCalendar.
- FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).
- Full calendar by arshaw is using GitHub : Full-sized drag & drop event calendar (jQuery plugin)
Voyez une implémentation complète :
- Ext.Direct and Symfony, dsExtDirectPlugin. Testing Implementation
- Ext.Direct and Symfony, dsExtDirectPlugin. Testing Implementation
Bilan personnel
FullCalendar est un plugin très bien :
- simple à utiliser
- bien documenté et simple à coder et implémenter
- seule la fonctionnalité d'affichage des jours weed-end, m'a semblé, comme d'autre (Issue 686: Do not display Sunday), trop restrictive (samedi et dimanche). Mais un fork par phurni : option to select which days are considered weekend days a fait son apparition pour gérer cela en attendant une éventuelle inclusion dans la version officielle.
Monket Calendar
Démo du Monket Calendar : An AJAX enabled online calendar.
Hors contexte, ici on peut utiliser les serveurs et API Google pour enregistrer ses données, mais sur un compte "Google" bien déterminé.
L'API de données du calendrier vous permet d'incorporer une fonction de calendrier dans votre propre application ou site web. Vous pouvez modifier les calendriers, créer et supprimer des événements, envoyer des invitations, et plus encore.