data_as_a_function.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href='../../dist/fullcalendar.css' rel='stylesheet' />
  5. <script src='../../node_modules/jquery/dist/jquery.js'></script>
  6. <script src='../../node_modules/moment/moment.js'></script>
  7. <script src='../../dist/fullcalendar.js'></script>
  8. <script>
  9. $(document).ready(function() {
  10. $('#calendar').fullCalendar({
  11. year: 2010,
  12. month: 0,
  13. header: {
  14. left: 'prev,next today',
  15. center: 'title',
  16. right: 'dayGridMonth,week,dayGridWeek,day,dayGridDay'
  17. },
  18. editable: true,
  19. events: {
  20. url: "many_events_json.txt",
  21. data: function() {
  22. var custom_data = { q: 'custom data value' }; // should see this in Networking
  23. console.log('setting custom_data as part of the eventSource fetch');
  24. return custom_data;
  25. }
  26. }
  27. });
  28. });
  29. </script>
  30. <style>
  31. body {
  32. margin-top: 40px;
  33. text-align: center;
  34. font-size: 13px;
  35. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  36. }
  37. #calendar {
  38. width: 900px;
  39. margin: 0 auto;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div id='calendar'></div>
  45. </body>
  46. </html>