timegrid-chrome91-bug.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <script src='../../bundle/dist/index.global.js'></script>
  6. <script>
  7. document.addEventListener('DOMContentLoaded', function() {
  8. var calendarEl = document.getElementById('calendar');
  9. var calendar = new FullCalendar.Calendar(calendarEl, {
  10. initialView: 'timeGridWeek',
  11. allDaySlot: false,
  12. slotDuration: '00:10',
  13. slotLabelInterval: '00:30',
  14. timeZone: 'UTC',
  15. editable: true,
  16. initialDate: '2021-06-02',
  17. events: [
  18. {
  19. resourceId: 'a',
  20. title: 'Timed Event',
  21. start: '2021-06-02T16:00:00+00:00'
  22. },
  23. {
  24. resourceId: 'b',
  25. title: 'Conference',
  26. start: '2021-06-02'
  27. },
  28. {
  29. resourceId: 'c',
  30. title: 'Meeting',
  31. start: '2021-06-02T10:30:00+00:00',
  32. end: '2021-06-02T12:30:00+00:00'
  33. },
  34. {
  35. resourceId: 'a',
  36. title: 'Lunch',
  37. start: '2021-06-02T12:00:00+00:00'
  38. }
  39. ]
  40. });
  41. calendar.render();
  42. });
  43. </script>
  44. <style>
  45. body {
  46. margin: 40px 10px;
  47. padding: 0;
  48. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  49. font-size: 14px;
  50. }
  51. #calendar {
  52. max-width: 1100px;
  53. margin: 0 auto;
  54. }
  55. /* required to cause the bug
  56. .fc-theme-standard td {
  57. border: none !important;
  58. }
  59. .fc-theme-standard th {
  60. border: none !important;
  61. }
  62. */
  63. /* CSS-only fix
  64. .fc-scrollgrid-section-liquid {
  65. height: 1px !important;
  66. }
  67. */
  68. </style>
  69. </head>
  70. <body>
  71. <div id='calendar'></div>
  72. </body>
  73. </html>