Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IE11 freezes trying to display dayGrid with dayMinWidth #5971

Closed
laughingrat opened this issue Nov 16, 2020 · 2 comments
Closed

IE11 freezes trying to display dayGrid with dayMinWidth #5971

laughingrat opened this issue Nov 16, 2020 · 2 comments
Assignees
@arshaw
Labels
Confirmed TimeGrid View
Milestone
v5.5.0

Comments

@laughingrat
Copy link

laughingrat commented Nov 16, 2020 •
edited

Reduced Test Case

not reproducible with a link

<html>
<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.3.1/main.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.css" rel="stylesheet" />
</head>

<body>
  <div id='calendar'></div>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var calendarEl = document.getElementById('calendar');

      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'resourceDayGridDay',
        selectable: true,
        editable: true,
        allDaySlot: false,
        height: '100%',
        expandRows: true,
        slotDuration: '00:30:00',
        snapDuration: '00:15:00',
        eventResizableFromStart: true,
        dayMinWidth: 90,
        aspectRatio: 1.8,
        scrollTime: '00:00',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'resourceDayGridMonth,resourceTimeGridWeek,resourceDayGridDay'
        },
        dateClick: function (info) {

        },
        select: function (info) {
          alert('selected ' + info.startStr + ' to ' + info.endStr);
        },
        resources: [
          {id: 'a', title: 'Room A'},
          {id: 'b', title: 'Room B'},
          {id: 'c', title: 'Room C'},
          {id: 'd', title: 'Room D'},
          {id: 'e', title: 'Room E'},
          {id: 'f', title: 'Room F'},
          {id: 'g', title: 'Room G'},
          {id: 'h', title: 'Room H'}
        ],
        events: [
          {"resourceId": "a", "title": "event 1", "start": "2020-11-03", "end": "2020-11-05"}, 
          {"resourceId": "a", "title": "event 3", "start": "2020-11-04T12:00:00+00:00", "end": "2020-12-05T06:00:00+00:00"}, 
          {"resourceId": "a", "title": "event 4", "start": "2020-11-05T07:30:00+00:00", "end": "2020-12-04T09:30:00+00:00"}, 
          {"resourceId": "a", "title": "event 5", "start": "2020-11-06T10:00:00+00:00", "end": "2020-12-04T15:00:00+00:00"}, 
          {"resourceId": "a", "title": "event 2", "start": "2020-11-07T09:00:00+00:00", "end": "2020-12-04T14:00:00+00:00"},
		  {"resourceId": "b", "title": "event 1", "start": "2020-11-03", "end": "2020-11-05"}, 
          {"resourceId": "b", "title": "event 3", "start": "2020-11-04T12:00:00+00:00", "end": "2020-12-05T06:00:00+00:00"}, 
          {"resourceId": "b", "title": "event 4", "start": "2020-11-05T07:30:00+00:00", "end": "2020-12-04T09:30:00+00:00"}, 
          {"resourceId": "b", "title": "event 5", "start": "2020-11-06T10:00:00+00:00", "end": "2020-12-04T15:00:00+00:00"}, 
          {"resourceId": "b", "title": "event 2", "start": "2020-11-07T09:00:00+00:00", "end": "2020-12-04T14:00:00+00:00"},
		  {"resourceId": "c", "title": "event 1", "start": "2020-11-03", "end": "2020-11-05"}, 
          {"resourceId": "c", "title": "event 3", "start": "2020-11-04T12:00:00+00:00", "end": "2020-12-05T06:00:00+00:00"}, 
          {"resourceId": "c", "title": "event 4", "start": "2020-11-05T07:30:00+00:00", "end": "2020-12-04T09:30:00+00:00"}, 
          {"resourceId": "c", "title": "event 5", "start": "2020-11-06T10:00:00+00:00", "end": "2020-12-04T15:00:00+00:00"}, 
          {"resourceId": "c", "title": "event 2", "start": "2020-11-07T09:00:00+00:00", "end": "2020-12-04T14:00:00+00:00"}
		  
        ]
      });

      calendar.render();
    });
  </script>
</body>

</html>

Bug Description

IE will be blocked when you try to switch month view to day view.
@acerix acerix changed the title resourceDayGridDay cannot be rendered in IE11 IE11 loops trying to display dayGrid with dayMinWidth Dec 3, 2020
@acerix
Copy link
Member

acerix commented Dec 3, 2020

Thanks, confirmed.

https://cdpn.io/acerix/debug/wvzMdQy/bYAdypPobOZk (https://codepen.io/acerix/pen/wvzMdQy)

@acerix acerix changed the title IE11 loops trying to display dayGrid with dayMinWidth IE11 freezes trying to display dayGrid with dayMinWidth Dec 3, 2020
@arshaw arshaw added this to the next-release milestone Dec 8, 2020
@arshaw arshaw closed this as completed in 78433cf Dec 17, 2020
@arshaw
Copy link
Member

arshaw commented Dec 19, 2020

This is fixed in 5.5.0

Please note that sometimes IE11 displays unnecessary scrollbars. This was a shortcoming with IE that was impossible to work around. Hopefully this is satisfactory for people.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@arshaw arshaw

Labels
Confirmed TimeGrid View
Projects
None yet
Milestone
v5.5.0
Development

No branches or pull requests
3 participants
@arshaw @acerix @laughingrat