vue2.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
  6. <script src='../../packages/core/dist/index.global.js'></script>
  7. <script src='../../packages/daygrid/dist/index.global.js'></script>
  8. <script src='../../../contrib/vue2/dist/index.global.js'></script>
  9. <script>
  10. document.addEventListener('DOMContentLoaded', function () {
  11. new Vue({
  12. el: '#app',
  13. data() {
  14. return {
  15. calendarOptions: {
  16. initialView: 'dayGridMonth',
  17. events: [
  18. { title: 'Nice Event', start: new Date() }
  19. ]
  20. }
  21. }
  22. }
  23. })
  24. })
  25. </script>
  26. <style>
  27. body {
  28. margin: 40px 10px;
  29. padding: 0;
  30. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  31. font-size: 14px;
  32. }
  33. #calendar {
  34. max-width: 900px;
  35. margin: 0 auto;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div id='app'>
  41. <full-calendar :options='calendarOptions'>
  42. <template v-slot:event-content='arg'>
  43. <b>{{ arg.timeText }}</b>
  44. <i>{{ arg.event.title }}</i>
  45. </template>
  46. </full-calendar>
  47. </div>
  48. </body>
  49. </html>