_global-vue.html 999 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../packages/common/main.css' rel='stylesheet' />
  6. <link href='../packages/daygrid/main.css' rel='stylesheet' />
  7. <script src='../node_modules/vue/dist/vue.js'></script>
  8. <script src='../packages/core/main.global.js'></script>
  9. <script src='../packages/daygrid/main.global.js'></script>
  10. <script src='../packages-contrib/vue/dist/main.global.js'></script>
  11. <script>
  12. document.addEventListener('DOMContentLoaded', function () {
  13. new Vue({
  14. el: '#app',
  15. data() {
  16. return {
  17. calendarOptions: {
  18. initialView: 'dayGridMonth'
  19. }
  20. }
  21. }
  22. })
  23. })
  24. </script>
  25. <style>
  26. body {
  27. margin: 40px 10px;
  28. padding: 0;
  29. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  30. font-size: 14px;
  31. }
  32. #calendar {
  33. max-width: 900px;
  34. margin: 0 auto;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div id='app'>
  40. <full-calendar :plugins='calendarOptions' />
  41. </div>
  42. </body>
  43. </html>