V-calendar: Problem in IE 11

[joeltsousa]

Hello,

I wanted to use V-Calendar, but in internet explorer 11 it stays in this format.
Anything I can do for a resovler or nothing to do?

[carlblock]

Having the same issue, what I've done to fix the problems _somewhat_ is to make sure that babel/core-js is transpiling the v-calendar in node_modules to fix the JS errors that occurs with v-calendar in IE11. For styling I haven't been able to get postcss to process the css variables being used in v-calendar. Instead I've just made a scss file with some fallback styling for the calendar.

/* This is just some basic styling to have it working, more needs to be done */
.vc-container {
  .vc-grid-container {
    width: 100%;
    display: -ms-grid;
    &.vc-weeks {
      padding: 5px 6px 7px 6px;
    }
    .vc-day-content {
      min-height: 1.8rem;
      width: 1.8rem;
      height: 1.8rem;
      margin: 0.1rem auto;
    }
  }
}

@nathanreyes Would you be open for any pull request to try to fix the IE11 issues?

[japanfred]

@carlblock Would you be willing to share your babel config for transpiling?

I notice in the package.json it's set to explicitly not support IE11 which is a little frustrating as it's still a somewhat popular browser (also frustrating...)

[duckness]

babel config for transpiling

using @vue/cli 4,

babel.config.js

module.exports = {
  'presets': [
    [
      '@vue/cli-plugin-babel/preset',
      {
        'useBuiltIns': 'entry'
      }
    ]
  ]
}

vue.config.js

module.exports = {
  transpileDependencies: [
    'v-calendar'
  ]
}

package.json

...
  "dependencies": {
    "core-js": "^3.2.1",
    "intersection-observer": "^0.7.0",
    "regenerator-runtime": "^0.13.3"
  },
...
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "ie 11"
  ],
...

main.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'intersection-observer'
...

[Dreamfish19]

Because this issue is still open, here is what helped me today:

I just added the transpileDependencies option to vue.config.js, and modified the
CSS (see comments above).

I did not need to use core-js or regenerator ...

[aligajani]

I see this on IE11

[ykwan0714]

I solved the problem this way. add scss file
`
/* new scss for overwrite /
// for IE!!!
$day-min-height: 28px;
$header-padding: 10px 10px 0 10px;
$popover-vertical-content-offset: 10px;
$popover-caret-horizontal-offset: 18px;
$arrows-padding: 8px 10px;
/
$slide-translate: 22px;
$slide-duration: 0.15s;
$slide-timing: ease;
$title-padding: 0 8px;

$arrow-font-size: 26px;
$weekday-padding: 5px 0;
$weeks-padding: 5px 6px 7px 6px;
$nav-container-width: 170px;
$day-content-width: 28px;
$day-content-height: 28px;
$day-content-margin: 1.6px auto;
$day-content-transition-time: 0.13s ease-in;
$day-content-bg-color-hover: rgba(204, 214, 224, 0.3);
$day-content-dark-bg-color-hover: rgba(114, 129, 151, 0.3);
$day-content-bg-color-focus: rgba(204, 214, 224, 0.4);
$day-content-dark-bg-color-focus: rgba(114, 129, 151, 0.4);
$highlight-height: 28px;
$dot-diameter: 5px;
$dot-border-radius: 50%;
$dot-spacing: 3px;
$bar-height: 3px;
$bars-width: 75%; */

app {

.vc-grid-container {
width: 100%;
display: -ms-grid;
&.vc-weeks {
padding: 5px 6px 7px 6px;
}
.vc-day-content {
min-height: 1.8rem;
width: 1.8rem;
height: 1.8rem;
margin: 0.1rem auto;
}
}
.vc-arrows-container {
padding: $arrows-padding;
}

.vc-opacity-0 {
position: relative;
}

.vc-popover-content.direction-bottom {
margin-top: $popover-vertical-content-offset;
}
.vc-popover-caret {
&.align-left {
left: $popover-caret-horizontal-offset;
}
}
.vc-header {
padding: $header-padding;
}
}

.vc-highlight {
width: $day-min-height;
height: $day-min-height;
}
`

[nathanreyes]

Please reference @duckness solution. Moving forward, IE11 is no longer officially supported.