I FileMaker finns en inbyggd kalender som kan visas för att välja datum i ett datumfält, du slår på den i Granskaren för fältet. Ibland vill du visa en kalender hela tiden och det går också att göra. Vi har sedan flera år en kalender i våra standardtillämpningar Projektet och MV Office för att välja datum när man ska skriva tidrapport.
Kalendern i våra standardtillämpningar visar också helgdagar och innehåller många olika komponenter, beräkningsfält och formler. Med andra ord inte helt lätt att åstadkomma.
Från version 12 finns det ett enklare sätt att göra en kalender, dock fungerar den endast i databaser som är delade från en FileMaker Server (eller utdelade från FileMaker Pro) eller finns lokalt i FileMaker Go. Det nya sättet använder en web viewer, ett JavaScript-bibliotek och det nya fmp-protokollet.
I samband med att version 12 kom visade jag hur man kan använda fmp för att navigera med hjälp av ett träd och fmp-protokollet. De som besökte våra FileMaker-seminarier i maj i år såg när Robert och jag visade hur man kan gå mellan poster i en FileMaker-databas genom att klicka på markörer i Google Maps (jag ska försöka göra en video på det inom kort också).
Det svåra är egentligen att välja en lämplig JavaScript-kalender. Jag föredrar Javascript-biblioteket jQuery, som jag tidigare använt till diagram med Google Charts, och det finns en bra kalender i tillägget jQuery UI. Den visar t.o.m. veckonummer enligt ISO-standard, alltså svensk standard, och det är något jag alltid behöver!
I bilden ovan har jag lagt in kalendern i en FileMaker-layout och klickat på den 14 juli. Innan dess behövs några förberedelser.
För det första måste kalendern konfigureras. Jag utgår från ett exempel som finns på jQuery UI och ändrar datumformatet till svenskt format samt ser till att det görs ett webbanrop varje gång användaren klickar på ett datum.
Webbsidan för att visa kalendern ser ut så här (både CSS och Javascript-bibliotek hämtas från webbsidor, har du inte tillgång till internet när du använder FileMaker-databasen kan du kopiera och klistra in filernas innehåll i koden nedan istället för respektive länk):
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css" type="text/css" media="all" /> <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script><script type='text/javascript'> $(document).ready(function(){ $('#kalender').datepicker({ changeMonth: true, changeYear:true, dateFormat: 'yy-mm-dd', firstDay: 1, showButtonPanel: true, showWeek: true, onSelect: function(dateText, inst) { window.location = 'fmp://FILEMAKERSERVER/Databasnamn?script=Datumval¶m=' + dateText; } }); }); </script>
</head> <body> <div id='kalender'></div> </body> </html>
Webbanropet, i delen onSelect, använder det nya fmp-protokollet i FileMaker 12. Webbanropet inleds med protokollet fmp://, adressen till FileMaker Server (eller FileMaker Pro) där databasen finns utdelad, databasens namn samt ett manus i databasen (här kallat Datumval) som tilldelar ett datumfält med valt datum. Valt datum skickas till manuset som manusparameter.
Manuset Datumval består av ett enda manussteg:
Tilldela fält [Datum; Get (Manusparameter) ]
Jag kopierar in html-koden till ett textfält (kallat html) och skapar en web viewer med webbadress enligt formeln:
"data:text/html," & Kalender::html
Sen är det bara att använda kalendern!
Det går förstås att ändra utseende på kalendern m.m. genom att ändra i CSS och Javascript.
Det här är ytterligare ett sätt att använda fmp-protokollet, ett protokoll som kommer att användas mer och mer för att kommunicera mellan web viewer och FileMaker-databas. Tänk dock på att det (än så länge?) bara fungerar om databasen är utdelad via FileMaker Server (eller körs lokalt på FileMaker Go), du kan alltså inte använda denna teknik om du använder FileMaker Pro med en lokal databas.