Customize the Full Calendar for your use

achartier

Administrator
Staff member
The Full Calendar Javascript plugin is very customization. Most options can be set/overridden by placing the settings in the Full Calendar Options in the Options tab for the visualization. All the options can be found here, but be warned, it is a bit of a slog to get through.

For example, the default weekday presentation on Month view is a short weekday name, Mon for Monday in English. You may wish your calendar to show the full weekday name. To do so you would place the following JSON encoded string:
JSON:
{
"views": {
    "dayGridMonth": {
        "dayHeaderFormat": {
            "weekday": "long"
            }
        }
    }
}

Note however that the above will be overridden on mobile devices due to available space, so if you set the weekday to long it will only apply to larger devices, mobile will display as short.
 
Last edited:
You now have an option to show the simple popup as a tooltip. Enable it on the options tab. Once enabled, you can also add to or override the various Bootstrap Tooltips options in the textarea that will show immediately under the Show Tooltips yes/no.

There is also a new layout called fabrik-visualization-fullcalendar-event-tooltip which you can override if you wish.
 
Thank you, but, i cannot find the correct path for this this override. In the section "Plugins" there is no fabrik_visualizations and also in the Section "Layouts" and then "Plugins" there is no fabrik_visualizations. Here is a picture:
 

Attachments

  • 1.PNG
    1.PNG
    126 KB · Views: 7
Is it possible to add functions into the javascript plugin? Like:
Code:
eventRender: function (info) {
  $(info.el).tooltip({ title: info.event.title });     
}
 
There is no eventRender method. The method for doing stuff like this is eventDidMount, and yes, you can override it in the FullCalendar options (which must be json encoded). Doing so however will break FC as we do a lot of other stuff in there (including adding the tooltips) and if you override it all of that logic will be gone.

Just as an aside, you should transition your javascript to vanilla ES6 and drop all use of jQuery. jQuery is no longer part of Joomla and will be gone from Fabrik in version 5.
 
> as we do a lot of other stuff in there (including adding the tooltips)
I need to show custom content in the tooltip, maybe from another field or from an sql query. So how should i do this? You said you are doing something. Should i wait?
 
Yes, please wait a bit as the next version will have tooltips as part of FC, and there is a layout you can override to suit your needs. Below is the layout which you can start to consider how you want to adjust.

Code:
<?php
defined('JPATH_BASE') or die;

use Joomla\CMS\Language\Text;
?>
<div id="FbFcTtPopup">
    <div id="FbFcTtHeader" class="row">
        <div class="col-sm-12"/>
    </div>
    <div id="FbFcTtStart" class="row">
        <div class="col-sm-4" id="FbFcTtStartTitle"><?php echo Text::_('PLG_VISUALIZATION_FULLCALENDAR_START') ?>:</div>
        <div class="col-sm-8" id="FbFcTtStartDate"></div>
    </div>
    <div id="FbFcTtEnd" class="row">
        <div class="col-sm-4" id="FbFcTtEndTitle"><?php echo Text::_('PLG_VISUALIZATION_FULLCALENDAR_END') ?>:</div>
        <div class="col-sm-8" id="FbFcTtEndDate"></div>
    </div>
</div>
 
I have downloaded and installed new FC calendar 4.5v, but somehow options are not working at my end:

I tried :

{"minTime": "09:00:00"}

Even Tried:

{
"views": {
"dayGridMonth": {
"dayHeaderFormat": {
"weekday": "long" // tried changing both short/long
}
}
}
}

Screenshot 2024-12-17 at 2.16.19 PM.png

Even Start Offset is not working. I don't know whether this at my end or at the plugin issue. There are no console errors.
 
There is no "minTime" option for FC. In this version the correct options is "slotMinTime" and "slotMaxTime".

I tested the slotMinTime nd it seems to be working for me.

Start Offset is a Fabrik addition to set the initial time for a new event, it isn't a FC thing. However, that doesn't seem to be working in my test so I will investigate.
 
Thank you. I can confirmed that slotMinTime / slotMaxTime are working. I have added and updated Wiki for others.

I also later noticed that same can be achieved by adding Start Time and End Time in Week Option of FC !
Screenshot 2024-12-19 at 3.58.04 PM.png
 
Back
Top