Calendar

FullCalendar

In Ace v2.x FullCalendar v4.x was used and in Ace v3.x the new v5.x is used with some breaking changes.
Please see views/pages/calendar/@page-script.js for an updated example.

You should include the required JS and CSS files:

fullcalendar/main.css
fullcalendar/main.js

There are two different ways to install/include FullCalendar in your app:

One is throught the modular @fullcalendar npm repo that contains separate files for each plugin and is meant to be used for ES6 build systems like Webpack, etc...
The other is fullcalendar that is a pre-built bundle to be used directly using a scripttag.
- I'm using the second one in demo

To customize the Fullcalendar plugin and use custom Bootstrap/Ace elements inside it, one way is to modify FullCalendar.BootstrapTheme like this:

FullCalendar.BootstrapTheme.prototype.classes = {
  root: 'fc-theme-bootstrap',
  table: 'table-bordered table-bordered brc-default-l2 text-secondary-d1 h-95',
  tableCellShaded: 'bgc-secondary-l3',
  buttonGroup: 'btn-group',
  button: 'btn btn-white btn-h-lighter-blue btn-a-blue',
  buttonActive: 'active',
  popover: 'card card-primary',
  popoverHeader: 'card-header',
  popoverContent: 'card-body'
}

FullCalendar.BootstrapTheme.prototype.baseIconClass = 'fa';
FullCalendar.BootstrapTheme.prototype.iconClasses = {
    close: 'fa-times',
    prev: 'fa-chevron-left',
    next: 'fa-chevron-right',
    prevYear: 'fa-angle-double-left',
    nextYear: 'fa-angle-double-right'
};
FullCalendar.BootstrapTheme.prototype.iconOverrideOption = 'FontAwesome';
FullCalendar.BootstrapTheme.prototype.iconOverrideCustomButtonOption = 'FontAwesome';
FullCalendar.BootstrapTheme.prototype.iconOverridePrefix = 'fa-';


//and then 
var calendar = new Calendar( 
  themeSystem: 'bootstrap',
  .
  .
  .
)

calendar.render()

For more details see views/pages/calendar/@page-script.js

Make sure to modify longPressDelay and selectLongPressDelay values for more responsiveness on touch devices

Some older browsers such as IE10 don't support Intl. So if you want to support them, you should include a polyfill.