Domů Procházet Nápověda
Přihlásit se
javascript
/
fullcalendar
zrcadlo https://github.com/fullcalendar/fullcalendar.git
2
0
Rozštěpit 0
Soubory Úkoly 0 Wiki
Strom: 30b0461946
Větve Značky
fullcalendar
/
examples
/
timeline-full-height.html

timeline-full-height.html 3.4 KB
Historie Surový

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset='utf-8' />
    5. 

  5. <link href='../packages-premium/bundle/dist/main.css' rel='stylesheet' />
    6. 

  6. <script src='../packages-premium/bundle/dist/main.js'></script>
    7. 

  7. <script>
    8. 

  8. 

  9. document.addEventListener('DOMContentLoaded', function() {
    10. 

  10.   var calendarEl = document.getElementById('calendar');
    11. 

  11. 

  12.   var calendar = new FullCalendar.Calendar(calendarEl, {
    13. 

  13.     // windowResizeDelay: 1000,
    14. 

  14.     height: '100%',
    15. 

  15.     // nowIndicator: true,
    16. 

  16.     editable: true, // enable draggable events
    17. 

  17.     aspectRatio: 1.8,
    18. 

  18.     scrollTime: '00:00', // undo default 6am scrollTime
    19. 

  19.     header: {
    20. 

  20.       left: 'today prev,next',
    21. 

  21.       center: 'title',
    22. 

  22.       right: 'resourceTimelineDay,resourceTimelineThreeDays,timeGridWeek,dayGridMonth,listWeek'
    23. 

  23.     },
    24. 

  24.     defaultView: 'resourceTimelineDay',
    25. 

  25.     views: {
    26. 

  26.       resourceTimelineThreeDays: {
    27. 

  27.         type: 'resourceTimeline',
    28. 

  28.         duration: { days: 3 },
    29. 

  29.         buttonText: '3 days'
    30. 

  30.       }
    31. 

  31.     },
    32. 

  32.     expandRows: true,
    33. 

  33.     resourceLabelText: 'Rooms',
    34. 

  34.     resources: [
    35. 

  35.       { id: 'a', title: 'Auditorium A' },
    36. 

  36.       { id: 'b', title: 'Auditorium B', eventColor: 'green' },
    37. 

  37.       { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
    38. 

  38.       { id: 'd', title: 'Auditorium D', children: [
    39. 

  39.         { id: 'd1', title: 'Room D1' },
    40. 

  40.         { id: 'd2', title: 'Room D2' }
    41. 

  41.       ] },
    42. 

  42.       { id: 'e', title: 'Auditorium E' },
    43. 

  43.       { id: 'f', title: 'Auditorium F', eventColor: 'red' },
    44. 

  44.       // { id: 'g', title: 'Auditorium G' },
    45. 

  45.       // { id: 'h', title: 'Auditorium H' },
    46. 

  46.       // { id: 'i', title: 'Auditorium I' },
    47. 

  47.       // { id: 'j', title: 'Auditorium J' },
    48. 

  48.       // { id: 'k', title: 'Auditorium K' },
    49. 

  49.       // { id: 'l', title: 'Auditorium L' },
    50. 

  50.       // { id: 'm', title: 'Auditorium M' },
    51. 

  51.       // { id: 'n', title: 'Auditorium N' },
    52. 

  52.       // { id: 'o', title: 'Auditorium O' },
    53. 

  53.       // { id: 'p', title: 'Auditorium P' },
    54. 

  54.       // { id: 'q', title: 'Auditorium Q' },
    55. 

  55.       // { id: 'r', title: 'Auditorium R' },
    56. 

  56.       // { id: 's', title: 'Auditorium S' },
    57. 

  57.       // { id: 't', title: 'Auditorium T' },
    58. 

  58.       // { id: 'u', title: 'Auditorium U' },
    59. 

  59.       // { id: 'v', title: 'Auditorium V' },
    60. 

  60.       // { id: 'w', title: 'Auditorium W' },
    61. 

  61.       // { id: 'x', title: 'Auditorium X' },
    62. 

  62.       // { id: 'y', title: 'Auditorium Y' },
    63. 

  63.       // { id: 'z', title: 'Auditorium Z' }
    64. 

  64.     ],
    65. 

  65.     events: [
    66. 

  66.       { id: '1', resourceId: 'b', start: '2019-08-07T02:00:00', end: '2019-08-07T07:00:00', title: 'event 1' },
    67. 

  67.       { id: '2', resourceId: 'c', start: '2019-08-07T05:00:00', end: '2019-08-07T22:00:00', title: 'event 2' },
    68. 

  68.       { id: '3', resourceId: 'd', start: '2019-08-06', end: '2019-08-08', title: 'event 3' },
    69. 

  69.       { id: '4', resourceId: 'e', start: '2019-08-07T03:00:00', end: '2019-08-07T08:00:00', title: 'event 4' },
    70. 

  70.       { id: '5', resourceId: 'f', start: '2019-08-07T00:30:00', end: '2019-08-07T02:30:00', title: 'event 5' }
    71. 

  71.     ]
    72. 

  72.   });
    73. 

  73. 

  74.   calendar.render();
    75. 

  75. });
    76. 

  76. 

  77. </script>
    78. 

  78. <style>
    79. 

  79. 

  80.   html, body {
    81. 

  81.     overflow: hidden; /* don't do scrollbars */
    82. 

  82.     font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    83. 

  83.     font-size: 14px;
    84. 

  84.   }
    85. 

  85. 

  86.   #calendar-container {
    87. 

  87.     position: fixed;
    88. 

  88.     top: 0;
    89. 

  89.     left: 0;
    90. 

  90.     right: 0;
    91. 

  91.     bottom: 0;
    92. 

  92.   }
    93. 

  93. 

  94.   .fc-header-toolbar {
    95. 

  95.     /*
    96. 

  96.     the calendar will be butting up against the edges,
    97. 

  97.     but let's scoot in the header's buttons
    98. 

  98.     */
    99. 

  99.     padding-top: 1em;
    100. 

  100.     padding-left: 1em;
    101. 

  101.     padding-right: 1em;
    102. 

  102.   }
    103. 

  103. 

  104. </style>
    105. 

  105. </head>
    106. 

  106. <body>
    107. 

  107. 

  108.   <div id='calendar-container'>
    109. 

  109.     <div id='calendar'></div>
    110. 

  110.   </div>
    111. 

  111. 

  112. </body>
    113. 

  113. </html>
    114.