Distribute a version of FullCalendar with all plugins

@toxpal raises a good point about how annoying it is to need to load many different plugin files, whereas in v4 only 1 JS and CSS file were required. Users of a Webkit/Rollup build environment probably appreciate the division into plugins, because their build environment does the bundling for them, and they can save on filesize, but for people who initialize via script tags and browser globals, this can definitely be annoying.

Something that is annoying for users of both techniques is that they need to manually include all required CSS files. This low-tech solution was decided in this issue.

Something else that doesn’t make a whole lot of sense is how the plugin files are used from a CDN (see the “CDN” section on the Downloads page). The whole reason people use CDNs is to make their sites load faster, but if they need to load each individual plugin files (both JS and CSS), it sort of defeats the point. They could end up with ~8 requests.

What I’m getting at is… maybe we should offer a build of FullCalendar that includes ALL of the plugins by default. It wouldn’t be necessary to feed them into the plugins array. Everything would just work. Of course, this single JS/CSS would be larger.

I’m not exactly sure how this would work with Scheduler’s plugins.

[Bartheleway]

Hi @ppazos, I was trying the same as you so here is my solution. I feel it’s not really best one ever but at least it’s working. @iiibbbmmm the aim is to have a custom build to integrate as a script tag. Fullcalendar.io only provide full plugins build and in order to optimize loading time, it’s great to be able to have a custom build that fits to our particular needs.

1. Take the Webpack example
2. Replace the content of src/main.js by :

import { Calendar } from '@fullcalendar/core';
import allLocales from '@fullcalendar/core/locales-all';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';

(function (global) {
  global.FullCalendar = {
    Calendar: function (elt, options) {
      return new Calendar(elt, Object.assign({
        plugins: [ dayGridPlugin, timeGridPlugin ],
        locales: allLocales,
      }, options))
    }
  }
})(window);

1. Build the project using yarn run build (or npm equivalent)
2. Take the file from dist/main.js, and integrate to your website
3. Depending on what plugins you need, add them in package.json and src/main.js

Note: If you need a minified version, edit webpack.config.js and change mode: 'production'.

[arshaw]

hi @steelbrain , a beta will definitely be coming out on Monday (apr 6). sorry about the delay