locales.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../fullcalendar.min.css' rel='stylesheet' />
  6. <link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
  7. <script src='../lib/moment.min.js'></script>
  8. <script src='../lib/jquery.min.js'></script>
  9. <script src='../fullcalendar.min.js'></script>
  10. <script src='../locale-all.js'></script>
  11. <script>
  12. $(document).ready(function() {
  13. var initialLocaleCode = 'en';
  14. $('#calendar').fullCalendar({
  15. header: {
  16. left: 'prev,next today',
  17. center: 'title',
  18. right: 'month,agendaWeek,agendaDay,listMonth'
  19. },
  20. defaultDate: '2020-05-12',
  21. locale: initialLocaleCode,
  22. buttonIcons: false, // show the prev/next text
  23. weekNumbers: true,
  24. navLinks: true, // can click day/week names to navigate views
  25. editable: true,
  26. eventLimit: true, // allow "more" link when too many events
  27. events: [
  28. {
  29. title: 'All Day Event',
  30. start: '2020-05-01'
  31. },
  32. {
  33. title: 'Long Event',
  34. start: '2020-05-07',
  35. end: '2020-05-10'
  36. },
  37. {
  38. id: 999,
  39. title: 'Repeating Event',
  40. start: '2020-05-09T16:00:00'
  41. },
  42. {
  43. id: 999,
  44. title: 'Repeating Event',
  45. start: '2020-05-16T16:00:00'
  46. },
  47. {
  48. title: 'Conference',
  49. start: '2020-05-11',
  50. end: '2020-05-13'
  51. },
  52. {
  53. title: 'Meeting',
  54. start: '2020-05-12T10:30:00',
  55. end: '2020-05-12T12:30:00'
  56. },
  57. {
  58. title: 'Lunch',
  59. start: '2020-05-12T12:00:00'
  60. },
  61. {
  62. title: 'Meeting',
  63. start: '2020-05-12T14:30:00'
  64. },
  65. {
  66. title: 'Happy Hour',
  67. start: '2020-05-12T17:30:00'
  68. },
  69. {
  70. title: 'Dinner',
  71. start: '2020-05-12T20:00:00'
  72. },
  73. {
  74. title: 'Birthday Party',
  75. start: '2020-05-13T07:00:00'
  76. },
  77. {
  78. title: 'Click for Google',
  79. url: 'http://google.com/',
  80. start: '2020-05-28'
  81. }
  82. ]
  83. });
  84. // build the locale selector's options
  85. $.each($.fullCalendar.locales, function(localeCode) {
  86. $('#locale-selector').append(
  87. $('<option/>')
  88. .attr('value', localeCode)
  89. .prop('selected', localeCode == initialLocaleCode)
  90. .text(localeCode)
  91. );
  92. });
  93. // when the selected option changes, dynamically change the calendar option
  94. $('#locale-selector').on('change', function() {
  95. if (this.value) {
  96. $('#calendar').fullCalendar('option', 'locale', this.value);
  97. }
  98. });
  99. });
  100. </script>
  101. <style>
  102. body {
  103. margin: 0;
  104. padding: 0;
  105. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  106. font-size: 14px;
  107. }
  108. #top {
  109. background: #eee;
  110. border-bottom: 1px solid #ddd;
  111. padding: 0 10px;
  112. line-height: 40px;
  113. font-size: 12px;
  114. }
  115. #calendar {
  116. max-width: 900px;
  117. margin: 40px auto;
  118. padding: 0 10px;
  119. }
  120. </style>
  121. </head>
  122. <body>
  123. <div id='top'>
  124. Locales:
  125. <select id='locale-selector'></select>
  126. </div>
  127. <div id='calendar'></div>
  128. </body>
  129. </html>