calendar.tpl 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <script>
  2. function getEvents(e) {
  3. var myData = [];
  4. $.ajax({
  5. dataType: "json",
  6. url: "{{ ajax_url }}&a=get_events",
  7. success: function(response) {
  8. for (var i = 0; i < response.length; i++) {
  9. var startDate = moment(response[i].start_date + " 13:00:00").toDate();
  10. var endDate = moment(response[i].end_date + " 13:00:00").toDate();
  11. myData.push({
  12. id: response[i].id,
  13. title: response[i].title,
  14. startDate: startDate,
  15. endDate: endDate,
  16. color: response[i].color
  17. });
  18. }
  19. $(e.target).data('calendar').setDataSource(myData);
  20. }
  21. });
  22. }
  23. $(document).ready(function() {
  24. $('#calendar').calendar({
  25. style:'background',
  26. language : '{{ calendar_language }}',
  27. enableRangeSelection: true,
  28. enableContextMenu: true,
  29. /*contextMenuItems:[
  30. {
  31. text: 'Update',
  32. //click: editEvent
  33. },
  34. {
  35. text: 'Delete',
  36. click: deleteEvent
  37. }
  38. ],*/
  39. customDayRenderer: function(e) {
  40. $(e).parent().css('background-color', 'green');
  41. },
  42. {#clickDay: function(e) {#}
  43. {#var dateString = moment(e.date).format("YYYY-MM-DD");#}
  44. {#$.ajax({#}
  45. {#type: "GET",#}
  46. {#url: "{{ ajax_url }}&a=toggle_day&start_date="+dateString+"&end_date=",#}
  47. {#success: function(returnValue) {#}
  48. {#getEvents(e);#}
  49. {#}#}
  50. {#});#}
  51. {#},#}
  52. selectRange: function(e) {
  53. var startString = moment(e.startDate).format("YYYY-MM-DD");
  54. var endString = moment(e.endDate).format("YYYY-MM-DD");
  55. $.ajax({
  56. type: "GET",
  57. url: "{{ ajax_url }}&a=toggle_day&start_date="+startString+"&end_date=" + endString,
  58. success: function(returnValue) {
  59. getEvents(e);
  60. }
  61. });
  62. },
  63. yearChanged: function(e) {
  64. e.preventRendering = true;
  65. $(e.target).append('<div style="text-align:center"><i class="fa fa-spinner fa-spin fa-2x"></i></div>');
  66. getEvents(e);
  67. },
  68. });
  69. });
  70. </script>
  71. <style>
  72. #calendar {
  73. overflow: visible;
  74. }
  75. .calendar table.month tr td .day-content {
  76. height: 24px;
  77. }
  78. </style>
  79. <div class="row">
  80. <div class="col-xs-12 col-md-12">
  81. <div id="calendar"></div>
  82. </div>
  83. </div>
  84. <br />
  85. <br />
  86. <div class="row">
  87. <div class="col-xs-12 col-md-12">
  88. <table>
  89. {% for event in events %}
  90. <tr>
  91. <td>
  92. {{ event.name }}:
  93. </td>
  94. <td>
  95. <span style="display:block;height:20px;width:100px; background-color: {{ event.color }}"></span>
  96. </td>
  97. </tr>
  98. {% endfor %}
  99. </table>
  100. </div>
  101. </div>