Calendar v1.1.2

Published by Widget Studio on April 13, 2019
Updated on May 18, 2020
Tags: Calendar
Download Send To Carafe
Download Send To Carafe
Created By: C. Lind
Version: 1.1.2

Windows Tested: Yes
Offline Compatible: No

Description:

This is a robust calendar implementation with various view options for month, week, and day views.


Event Data


The event data comes in as an array of JSON objects. The event object can include this data:


    {
id : A unique identifier to link the event back to your FileMaker data
start : The start date or time stamp of the event*
end : The start date or time stamp of the event*
title: The event text displayed
color: The color of the event, if it is different than the default color
textColor: The text color of the event, if different than the default
notes: Notes about the event that can be displayed in a tooltip
}

You should write a script to compile the data you want to display on the calendar.


Colors can be hex values or rgb/rgba.


Date/Time Format


Dates/Times must be in an ISO time format YYYY-MM-DDTHH:MM:SS. Example: February 21, 2019 5:30 pm is 2019-02-21T17:30


You can use a custom function like www.briandunning.com/cf/1161 to convert to/from FileMaker timestamps.



Script Triggers


The calendar can be used as read-only or can be made modifiable with drag and drop functionality. It order to get the data updated in FileMaker, there are 3 script triggers:



  • click on an event

  • modify an event

  • double click on an empty space (for creating a new event)


For the scripts that are triggered by a click, the X and Y coordinates of the click are included in the parameters. Using these coordinates, a card window can be opened on top of the calendar.


Fully functional calendar using the FullCalendar.io library. Includes month, week, and day views. All of the colors are customizable. Optional tooltips on hover. Also includes several Webviewer Bridge methods to create, update, or delete events without reloading the calendar.

Configuration

Name Description Type
clickScriptScript that is triggered when a user clicks on an event.fmpScriptName
defaultDateThe target date to view. For a month view it can be any day in the month, and similarly for the other views. -Must be in this format (YYY-MM-DD)text
defaultViewpopup
doubleclickScriptScript triggered when the user double clicks on a blank spot on the calendar (if this option is enabled)fmpScriptName
editScriptScript that is triggered when an event is modified on the calendar, either by moving the event or resizing it (changing the duration)fmpScriptName
eventsThe main event data is: id title start end notes color textColorjsonArray
filenamefmpFileName
References:

9 Comments

Massimo Risca · April 18, 2019 at 10:51 am

How do I launch a script on click? I tried to name the script “test” as in the standard parameters, but the page fails.

    Jeremiah Small · April 18, 2019 at 12:18 pm

    If you want it to work directly from this demo page, you should download Carafe.fmp12 and have it open on your computer first. The click event in the example data is configured with file name Carafe, and script name Test.

    If you’re configuring it, don’t forget to change the “filename” property in data.json

    Also don’t forget that JSON is case sensitive.

      Massimo Risca · April 19, 2019 at 2:54 am

      Thank you for your reply and for your work. I simply created a file and copied from carafe.fmp12 the standard script. I pasted the script into my file. I use the test data from the script directly and I don’t pass any parameters. I only corrected the filename in the loader script. When I click on an event it does not run the test script, but loads a web page “impossible to view”. I don’t understand what it depends on.

        Jeremiah Small · May 14, 2019 at 2:43 pm

        Hello Massimo,

        Thanks for your patience! This sounds like a more general questions about deployment, so I’d like to steer you to a different forum for this type of discussion. FYI, we’ve just set up a JavaScript Integration area over at FM Forums. Please feel free to help inhabit that new community. Would you mind re-asking your question over there? Also, please share details about the platform and versions you’re working with, as well as what you’ve already tried as far as debugging. For example, is this issue specific to Calendar or does the same thing happen with any deployed bundle. Screenshots are very helpful too.

Carles Barbal · April 24, 2019 at 6:26 am

How can I insert a Fullcalendar library, ca.js or es.js, to have it in another language?

    Jeremiah Small · May 14, 2019 at 2:48 pm

    Hello Carles,

    What you’re talking about is called “localization” and it is a topic that generally applies to the underlying bundled code. Support for localization tends to vary from one library to the next. The place you’ll want to look is at the base bundled projects documentation and support resources. You might end up having to make changes to a bundle to support localization options. In that case you would split it off into your own version and develop that to suit your needs. FYI, we’ve just set up a JavaScript Integration area over at FM Forums. Please feel free to help inhabit that new community.

Hans Erik Hazelhorst · June 28, 2019 at 5:37 am

Hello Jeremiah

I certainly like Carafe, it it easy to implement a bundle. Still I have some questions on the Full Calendar. There are several budles listed, but the difference between them is not clear. Which version of Full Calendar library is used, 3.x or 4.x? Maybe it’s a good idea to include that information in the FileMaker solution?

Also, I understand none of the bundles are interactive, i.e. you cannot drag an appointment to another timeslot and have the callback script change the FM record.
Would be hard to implement?

jscheele · April 14, 2020 at 2:23 pm

Excellent bundle with very easy implementation!

My one question is how do I add different views? It looks like the default is month view. I was able to add buttons that toggle month and list view by adding ‘month,listWeek’ to the $htmlTemplate variable in the ‘right’ value of the ‘header’ object (line 52), but I can’t find the correct values for dayGridWeek or timeGridWeek views.

    Jeremiah Small · April 15, 2020 at 3:46 pm

    Thanks for checking out Carafe 🙂

    Keep in mind that the original bundle creator may not always implement everything that the bundled library can do. If you find that you want to use features of the underlying library which are not supported directly by the bundler’s implementation. You can always fork the bundle and create your own custom version. If you do so in a way that you think others might enjoy, please consider contributing it back to the community.

    As far as the week view, I haven’t dug into this bundle myself, but remember that the reference links back to the base JavaScript project can often provide important clues. I did notice that some aspects of Full Calendar, such as vertical resource view, require a Premium version. https://fullcalendar.io/docs/vertical-resource-view

Leave a Comment