Support for IE 11

[kdmon]

Great component. I was wondering if support for IE11 is planned? I'm getting "SCRIPT1010: Expected identifier" in node_modules/quasar-calendar/src/components/calendar/mixins/CalendarMixin.js Thanks

[sirbeagle]

I wasn't targeting IE11 as a platform but let me do a little snooping around to see what would be necessary to get it fully compatible.

[kdmon]

The cause is likely that when I pull in this library and build with vue-cli, babel does not try to transpile the ES6 source and IE11 lack support for ES6.

By default babel ignores all code in node_modules, so a possible short-term fix is to tell babel to transpile this library by editing vue.config.js, adding the transpileDependencies option, like this:

module.exports = {
  pluginOptions: {
    quasar: {
      theme: 'mat',
    }
  },
  transpileDependencies: ['quasar-calendar']
}

Sadly, this didn't resolve the issue for me as I got other build errors ('Cannot assign to read only property 'exports')...

A permanent fix is to add a vue-cli build process and include the resulting pre-transpiled dist file with each release of quasar-calendar. vue-cli makes this easy with the '--target lib' option:

vue-cli-service build --target lib --name myLib [entry]

For details, see https://cli.vuejs.org/guide/build-targets.html#library

[kdmon]

In case anyone else is struggling with this, I eventually managed to get quasar-calendar to work in IE11 by copying the code into my own codebase and transpiling it with babel. Unfortunately, Babel failed to apply the right IE11 polyfills, so I had to add them manually: String.repeat(), Number.isNaN(), Math.trunc(), Array remove() and Array findIndex().

The cause seems to be that Luxon (a quasar-calendar dependency) use a lot of es6 syntax and no longer provide their own internal polyfills, see https://github.com/moment/luxon/issues/189

The only remaining issue now is that IE11 does not support the IANA standard timezone names and events won't show up in IE11 if timezone is set to anything other than UTC. This causes a vertical alignment issue as my event dates are not in UTC, but I'm not sure if this is a bug or not.