You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

58 lines
1.7 KiB

3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. # FullCalendar Standard Bundle
  2. Easily render a full-sized drag & drop calendar with a combination of standard plugins
  3. This `fullcalendar` package bundles these plugins:
  4. - [@fullcalendar/core](https://github.com/fullcalendar/fullcalendar/tree/main/packages/core)
  5. - [@fullcalendar/interaction](https://github.com/fullcalendar/fullcalendar/tree/main/packages/interaction)
  6. - [@fullcalendar/daygrid](https://github.com/fullcalendar/fullcalendar/tree/main/packages/daygrid)
  7. - [@fullcalendar/timegrid](https://github.com/fullcalendar/fullcalendar/tree/main/packages/timegrid)
  8. - [@fullcalendar/list](https://github.com/fullcalendar/fullcalendar/tree/main/packages/list)
  9. - [@fullcalendar/multimonth](https://github.com/fullcalendar/fullcalendar/tree/main/packages/multimonth)
  10. ## Usage with CDN or ZIP archive
  11. Load the `index.global.min.js` file and use the `FullCalendar` global namespace:
  12. ```html
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16. <script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>
  17. <script>
  18. document.addEventListener('DOMContentLoaded', function() {
  19. const calendarEl = document.getElementById('calendar')
  20. const calendar = new FullCalendar.Calendar(calendarEl, {
  21. initialView: 'dayGridMonth'
  22. })
  23. calendar.render()
  24. })
  25. </script>
  26. </head>
  27. <body>
  28. <div id='calendar'></div>
  29. </body>
  30. </html>
  31. ```
  32. ## Usage with NPM and ES modules
  33. ```sh
  34. npm install fullcalendar
  35. ```
  36. ```js
  37. import { Calendar } from 'fullcalendar'
  38. document.addEventListener('DOMContentLoaded', function() {
  39. const calendarEl = document.getElementById('calendar')
  40. const calendar = new Calendar(calendarEl, {
  41. initialView: 'dayGridMonth'
  42. })
  43. calendar.render()
  44. })
  45. ```