Graphique Gantt/Chronologie de l'affichage du jour vertical (Similaire à Outlook) - Bibliothèque jQuery

Question

J'ai besoin de créer un graphique vertical "Chronologie" avec des incréments de 1 heure, 30 minutes, 15 minutes ou 5 minutes. La fonctionnalité est similaire à celle d'Outlook ou d'un planificateur "Day-View", dans lequel les rendez-vous sont placés en tant que boîtes sur une ligne de temps.

Je considérais les suivants, mais il y avait des problèmes ci-dessous:

• de visualisation de Google, Vis.JS - chronologie horizontale uniquement, vertical non pris en charge
• jQuery FullCalendar.io, DayPilot - certains fonctionnalités uniquement disponibles dans une version Premium qui coûte 500 $. FullCalendar: DayTimeline View est premium, DayPilot: les incréments non-1hr sont premium
• Les outils libres primitifs tels que jQuery Skeduler qui ne supporte pas les intervalles personnalisés ou les vrais objets Date, je devrais redessiner la règle moi-même, ou implémenter des chevauchements moi-même

Des suggestions sur ce problème? Puis-je même utiliser une feuille de calcul pour cela?

fonctionnalité souhaitée:

8:00 --------- 
8:30 [.......] 
9:00 --------- 
9:30 [...][..] 

Answer 1

Je suis installé sur ce plug-in gratuit qui est facilement extensible et facile à utiliser:

CodyHouse Annexe Modèle

https://codyhouse.co/gem/schedule-template/

Ajout zoom (intervalles personnalisés), la coloration, etc. était vraiment facile. Il y a un scénario basé sur HTML composé de <LI> et l'intervalle est calculé automatiquement en fonction de vos étiquettes HTML, vous n'avez donc pas besoin de recalculer vous-même quoi que ce soit.

Pour tracer de nouveaux événements à la volée (la fonctionnalité principale) j'ai ajouté ce code dans leur main.JS, qui réplique leur initialisation normale du HTML préexistant. Cette actualisation est appelée après que je modifie manuellement le DOM en ajoutant un nouvel LI pour un nouvel événement.

function refreshScheduler() { 
    schedules = $('.cd-schedule'); 
    objSchedulesPlan = [], 
     windowResize = false; 

    if(schedules.length > 0) { 
     schedules.each(function(){ 
      //create SchedulePlan objects 
      objSchedulesPlan.push(new SchedulePlan($(this))); 
     }); 
    }   
}