data_as_a_function.html 1.2 KB

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