FullCalendar implementatie

[rmw]

Tijd is de grootste boosdoener hier

 

Ik moet nog een hoop graven om hier mijn vingers achter te krijgen, maar ik stel toch maar een vraag alvast.

Je kan in die kalender in de webviewer je events verslepen.

Waar moet ik beginnen met zoeken als ik die versleep actie ook de event tabel wil laten updaten?

 

rmw

5 november 2013 aangepast door Gast

[andries]

hier vind je alvast de volledige documentatie van de fullcalendar: http://arshaw.com/fullcalendar/docs/

 

Wat je moet doen is wat ze in javascript termen "een callback" noemen implementeren. Dat wil eigenlijk zeggen "indien een event versleept/gedropt wordt, doe dan functie X." FullCalendar voorziet een hoop van die zogenaamde callbacks:

- eventStartDrag //gebruiker begint met verslepen van event

- eventStopDrag //gebruiker stopt met verslepen van event

- eventDrop //gebruiker dropt event

- eventResize //gebruiker resized event

- viewRender //kalender toont een nieuwe view (nieuwe maand/week/dag, of nieuwe view (maandview, weekview, monthview)

 

voor wat jij wil, moet je kijken naar het eventDrop callback, telkens als event ergens anders wordt gedropt wil je dat er een script wordt aangeroepen in FileMaker.

 

Zoals je in de documentatie kan zien krijg je hier dan een hoop parameters mee doorgestuurd, waarbij de belangrijkste de eerste is: het event object. Het eventobject heeft 3 belangrijke attributen die je nodig hebt: _id, _startDate en _endDate. Deze zijn natuurlijk JavaScript attributen en je moet ze nog omzetten naar FileMaker data. Ik heb nu het FileMaker javascript object uitgebreid met de methode: dateJS2FM dat dus een Javascript object naar een "Date" functie van FileMaker omzet (de ID is gewoon een string, en dat is hetzelfde in JavaScript en FileMaker).

 

 

dit laat toe om het volgende te doen:

var fmDate = filemaker.dateJS2FM(jsDate);

result -> fmDate = "Date ( MM, DD, YYYY )" //opgelet dit is een string, dus je moet nog een evaluate doen in FileMaker

 

 

Ik heb ook de script methode uitgebreid zodat we nu makkelijker een parameter kunnen meesturen (opgelet: je kan nog altijd geen scriptnamen met spaties gebruiken!).

 

filemaker.fmRunScript("cal_callback" ; event._id + "|" + filemaker.dateJS2FM(event._start) + "|" + filemaker.dateJS2FM(event._end))

-> result: filemaker script cal_callback wordt aangeroepen, met als parameter het ID, startdatum, einddatum. Gescheiden door "|"

 

 

dit alles te samen geeft dus dat je bij het initialiseren van de fullcalendar deze callback moet implementeren:

 

$('#calendar').fullCalendar({
    .... alle wat er al stond....

//callback for eventDrop
eventDrop: function(event){ 
	filemaker.fmRunScript("cal_callback" , 
		event._id + "|" + 
		filemaker.dateJS2FM(event._start) + "|" + 
		filemaker.dateJS2FM(event._end) 
	)
}

}

 

bijgevoegd het aangepaste voorbeeld. Hoe je nu de resize/new event/... moet doen, zal je even moet opzoeken, maar zal zeer gelijk lopen.

 

Een tip: begin met het werken in Coda (of andere professionele text editor) en een goede browser (Chrome/Firefox) met een goede debugger, daar zal je snel veel fouten in kunnen vinden. Nadien plak je een werkende pagina gewoon terug in FileMaker.

WebViewerHelper.fmp12.zip

[rmw]

So much to do and so little time

 

Top! Ik ga puzzelen.

 

rmw

[hans erik]

Misschien zou het helemaal geen gek idee zijn als iemand een workshop organiseerde voor bijv. een man of 10 a 20 maximaal, om gezamenlijk in een dag zo'n full calendar eens helemaal door te spitten.

 

Iedereen neemt dan zijn eigen laptop met FMPA 12 mee natuurlijk. Ik zou me wel willen aanmelden als deelnemer en het hoeft zeker niet gratis, wat mij betreft.

 

Hans Erik