Incompatibilité de fullcalendar 3.1 avec le plugin scheduler

Incompatibilité de fullcalendar 3.1 avec le plugin scheduler
0
Tags: #<Tag:0x00007fed3f829ce8>

Depuis la P24, j’ai une erreur avec mes agendas et le plugin ajouté à fullcalendar

lors du 1er affichage de l’agenda, j’ai l’erreur suivante :
Error: View type “timelineDay” is not valid
et la vue suivante :

si je clique dans le menu pour afficher un autre agenda, l’affichage est bon, je n’ai plus d’erreur (enfin sauf le titre).
j’ai l’impression que les ressources javascript ne sont pas chargées pour le 1er affichage.

le script java de mon objet externe est le suivant :

public class CrbGdrAgenda extends ExternalObject {
	private static final long serialVersionUID = 1L;

	/**
	 * Display method
	 * @param params Request parameters
	 */
	@Override
	public Object display(Parameters params) {
		   	// le service est passé en paramètre au SCRIPT de génération du calendrier pour pouvoir filtrer au moment du search
		String service=this.getGrant().getParameter("CRB_SERVICE");
		String direction=this.getGrant().getParameter("CRB_DIRECTION").trim();
		this.getGrant().setParameter("TYPE_AFF","SERVICE");
		this.getGrant().setParameter("SOURCE","Agenda_dir");
		// affectation du paramètre droitCreate pour les gestionnaires et admin et demandeur
		boolean droitCreate=this.getGrant().hasResponsibility("APPLI_SIMPLICITE_GDR_ADMIN_DIRECTION");
		boolean droitModif=this.getGrant().hasResponsibility("APPLI_SIMPLICITE_GDR_ADMIN_DIRECTION");
		String matricule=this.getGrant().getLogin();
		String ident=this.getGrant().getLastName()+" "+this.getGrant().getFirstName();
		String mail=this.getGrant().getEmail();
		
		if (!getGrant().isResponsive()) { // Legacy version
			boolean embedded = params.getBooleanParameter("embedded");
			if (!embedded) {
				
			}
			String js = getName() + ".render(\"" + HTMLTool.getFormURL("CrbGdrResa", "agenda_CrbGdrResa", "ROWID", true) + "\");";
			return (embedded
					? HTMLTool.cssIncludes(HTMLTool.fullcalendarCSS()) +
					  HTMLTool.jsIncludes(HTMLTool.fullcalendarJS(getGrant().getLang()))
					: "") + HTMLTool.jsBlock(embedded ? js : HTMLTool.jsOnload(js));
		} else { // Responsive version
			appendCSSIncludes(HTMLTool.fullcalendarCSS());
			appendJSIncludes(HTMLTool.fullcalendarJS(getGrant().getLang()));
			appendJSInclude(HTMLTool.getResourceJSURL(this, "SCHEDULER"));		
			appendCSSInclude(HTMLTool.getResourceCSSURL(this, "STYLES"));
			return javascript("$ui.loadCalendar(function() { " + getName() + ".render(\"'" +service+"','"+droitCreate+"','"+droitModif+"','"+matricule+"','"+ident+"','"+mail+ "\"); });");
		}
	}
}

j’ai toujours ce problème et après quelques recherches, j’ai l’impression que ca vient du fait que la version 3.10 de fullcalendar n’est pas compatible avec la dernière version du module scheduler.

est ce que vous envisager de passer à la version 4 de fullcalendar ?

Cela fait partie des mises à jour de composants embarqués prévues pour la future version 5.

En fonction des impacts on verra s’il est raisonnable de backporter cet upgrade en 4.0. Par défaut on n’upgrade pas les composants d’une version releasée sauf en cas de faille critique ou de changement structurel qui rend le composant obsolète et inutilisable, ex: une lib tierce qui n’est plus compatible avec son API/service (genre Stripe, Google, …)

ça va être compliqué pour nous.
l’ancienne version du plugin scheduler n’est semble t-il pas compatible avec fullcalendar 3.10 et la nouvelle non plus.

je vais refaire des tests mais on risque d’avoir un problème.

Si cette version est incompatible, il va falloir :

  • dans un premier temps, faire des tests de votre côté via un downgrade ou un upgrade fullcalendar / remplacer les lib livrées dans le template Simplicité que vous téléchargez.

A minima remplacer le contenu de /scripts/fullcalendar par une version antérieure ou supérieure.
Faire un test unitaire en changeant les lib directement dans tomcat et en vous assurant que l’agenda continu de fonctionner.

  • et de notre côté passer rapidement en fullcalendar V4, et backporter en release/P24.

Pour quelle échéance souhaitez vous cette mise à jour ?

je mets en place une agenda des commandes dans le projet de refonte du SI de la formation professionnelle.
les commandes peuvent durer plus d’un an.

du coup, j’ai besoin des nouvelles fonctionnalités du scheduler.
je vais essayer de leur vendre une vue par mois … mais pas sure que ça passe.

dans tous les cas, il faudra que je traite ce pb en mars pour migrer la gestion des ressources en P24.

Les impacts de notre côté sont mineurs mais il faut tout de même vérifier que l’Agenda “de base” fonctionne à l’identique.
Je dois terminer un autre sujet et je traiterai le fullcalendar dans la foulée donc d’ici fin de semaine prochaine.

parfait.
je ferai des tests dans la foulée sur nos agendas existants.

Bonjour,

Les 2 versions V3 et V4 ont été intégrées à la plateforme sur toutes les branches.

Pour assurer le compatibilité ascendante, le paramètre système FULLCALENDAR_VERSION a été ajouté, il vaut 3 par défaut.

Vous pouvez le passer à 4 pour changer de librairies, mais il faudra revoir votre implémentation particulière car les API changent à de nombreux endroits :

https://fullcalendar.io/docs/upgrading-from-v3

Notamment :

  • fin de la dépendance à jQuery et à Moment.js (Simplicité continue de les utiliser)
  • chargement de plugins en fonction des vue à afficher
  • les arguments de tous les handlers ont changé, on finit par retrouver les données et leurs types, mais il convient de mettre des “debugger” dans votre code pour voir directement depuis le debugger chrome le contenu des paramètres car la doc est incomplète.
  • il faut explicitement appeler la méthode render sinon rien ne s’affiche, et spécifier la langue via locale.

Exemple d’implémentation avec le nouveau fullcalendar V4 :

var cal = new FullCalendar.Calendar(document.getElementById('myDiv'), {
	plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' ],
	header: {
		left: "prev,next today",
		center: "title",
		right: "dayGridMonth,timeGridWeek,dayGridDay,listWeek"
	},
	height: 800,
	nowIndicator: true,
	locale: 'fr',
	defaultView: "timeGridWeek",
	editable: true,
	firstDay: 1, // monday
	hiddenDays: [],
	minTime: "00:00:00",
	maxTime: "24:00:00",
	slotDuration: '00:30:00',
	snapDuration: '00:05:00',
	businessHours: {
		dow:   [1,2,3,4,5], // monday to friday
		start: "09:00",
		end:  "18:00"
	},
	// New event
	selectable: true,
	select: function(e) {
		var start = moment(e.start),
			end = moment(e.end);
		$ui.displayForm(null, obj, "0", {
			showNav: true,
			nav: "add"
		}, function() {
			// Start date
			var d = $ui.getUIField(ctn, obj, "myDate", null, true);
			if (d && d.ui)
				d.ui.val(start.format("YYYY-MM-DD HH:mm:ss"));
			// Duration
			d = $ui.getUIField(ctn, obj, "myDuration", null, true);
			if (d && d.ui) {
				var min = Math.round((end.diff(start)) / 60000);
				if (min>0) d.ui.val(min);
			}
		});
	},
	// Open event
	eventClick: function(e) {
		e.jsEvent.preventDefault();
		var data = e.event.extendedProps.data;
		// Default: open the object form
		$ui.displayForm(null, obj, data.id, {
			showNav: true,
			nav: "add"
		});
	},
	// Drag/Drop
	eventDrop: function(e) {
		// Default: update object date
		var data = e.event.extendedProps.data;
		data.item.myDate = moment(e.event.start).format("YYYY-MM-DD HH:mm:ss");
		obj.update(function(item) {
			data.item = item;
			data.meta = obj.metadata;
		}, data.item, {
			metadata: true,
			error: function(err) {
				e.revert();
				$ui.backendException(err);
			}
		});
	},
	// Change duration
	eventDurationEditable: true,
	eventResize: function(e) {
		// Default: update object duration
		var data = e.event.extendedProps.data,
			ms = moment(e.event.end).diff(moment(e.event.start)),
			d = Math.round(ms/60000);
		data.item.myDuration = d;
		obj.update(function(item) {
			data.item = item;
			data.meta = obj.metadata;
		}, data.item, {
			metadata: true,
			error: function(err) {
				e.revert();
				$ui.backendException(err);
			}
		});
	},
	// Load data
	events: function(e, success, failure) {
		var start = moment(e.start),
			end = moment(e.end),
			f = "YYYY-MM-DD HH:mm:ss",
			dmin = start.format(f),
			dmax = end.format(f),
			filters = { myDate: dmin + ";" + dmax };
		obj.search(function() {
			var dt, dur, item, md, edit, evts = [];
			$(obj.list).each(function(i) {
				item = this.data;
				dt = item.myDate;
				if (dt) {
					md = this.meta;
					dur = item.myDuration || 60,
					edit = true;
					evts.push({
						data: { // custom data in event
							id: item[rid],
							item: item,
							meta: md,
							object: obj
						},
						title: md.userKey,
						start: moment(dt).toDate(),
						end: moment(dt).add(dur,"m").toDate(),
						editable: edit,
						durationEditable: edit,
						backgroundColor: "lightgray",
						borderColor: "gray",
						textColor: "black"
					});
				}
			});
			success(evts);
		},
		filters, {
			inlineDocs: false,
			metadata: true,
			context: app.CONTEXT_LIST
		});
	},
	// Final callback
	eventAfterAllRender: function() {
		// ...
	}
});
cal.render();

je vais tester ça dès aujourd’hui.

je te tiens au courant

tu dis que ça a été intégré à toutes les branches mais notre sim de dev qui est sur la branche release le paramètre système n’existe pas.
Alors qu’il existe sur notre sim de test, branchée sur la prerelease

Non il y est de notre côté, je ne connais pas votre process d’upgrade.
Votre production ne doit pas se mettre à jour en automatique.
Il faut de toute façon d’abord vérifier en dev / pre-release.

je parle de la dev.


elle est en auto upgrade sur la branche release

nos agendas mis en place avec la V3 ne fonctionnent plus, sauf sur l’instance en pre-release.
sur les instances branchées sur la release et la master n’ont pas le paramètre FULLCALENDAR_VERSION je l’ai ajouté sur l’instance de dev et ça ne change rien

pas d’erreur dans la console, pas d’erreur dans les logs

Pre-release et release sont identiques.
Il faut regarder dans votre console navigateur / Network les requetes HTTP pour voir quel fullcalendar est chargé. Si le paramètre est absent c’est qu’il y a une autre pb de packaging car il est bien présent dans le patch24.

Ensuite il est normal que du code fullcalendar V3 ne marche pas en V4.
il n’y a aucune compatibilité ascendante sans revoir son code (render, handlers…).
Rappel : https://fullcalendar.io/docs/upgrading-from-v3

Le chargement du fullcalendar v4 est plus compliqué car décomposé en plusieurs plugins :

Si le paramètre FULLCALENDAR_VERSION est absent c’est la V3 qui est chargée par défaut pour compatibilité ascendante.

j’ai finalement réussi à faire fonctionner la V3. J’ai ajouté le paramètre sur les instances et adapté mon code.
je ne me suis pas encore plongée dans la V4

Ok, je ne comprends pas pourquoi le paramètre ne s’est pas créé, je vais revérifier dans nos templates.

Sinon l’exemple de code plus haut dégrossit déjà pas mal les changements majeurs.
Il faudra aussi revoir comment est chargé le plugin scheduler dans le code spécifique qui n’est pas inclut dans la plateforme.

Update : il est bien présent en release à la fin du patch 24

il n’est pourtant pas présent dans nos applications …

Guillaume a des pb de regression sur un agenda en V3 concernant les reférences à moment()

normalement, il ne devrait pas y avoir d’impact sur l’existant ?

guillaume s’en est sorti avec son agenda en V3.
je vais essayer de migrer en V4. je te tiens au courant