How to override default module behaviour?

[dreaming-augustin]

https://fomantic-ui.com/modules/calendar.html#/examples
The Calendar page explains:

For quicker migration you could globally override the format settings like this:

$.fn.calendar.settings.formatter.datetime = 'MMMM D, YYYY H:mm';
$.fn.calendar.settings.formatter.time = 'H:mm';
$.fn.calendar.settings.formatter.cellTime = 'H:mm';

However, it does not mention where this should be put.
I assume it should be directly injected into the HTML page...

I tried putting it into semantic/src/site/globals/site.variables but it didn't change anything.

I read both the Recipe page:
https://fomantic-ui.com/introduction/advanced-usage.html
and the Theming page:
https://fomantic-ui.com/usage/theming.html

Unless I misunderstood or did not comprehend something, I don't see that they explain how to change modules' default settings, or inject javascript code into the final product.

Can the documentation be more explicit in such matters, and provide more advanced code examples?

[dreaming-augustin]

To be precise, in my case, I would like to know how to override the default calendar format for the whole site, without having to specifically set it for each calendar instance.

I am trying to implement something like the following within an appropriate configuration/override file within semantic/src/ :
$.fn.calendar.settings.formatter.date = 'ddd D MMM YYYY';