events.component.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <br><br><br>
  2. <ng-template #modalContent let-close="close">
  3. <div class="modal-header">
  4. <h5 class="modal-title">Event action occurred</h5>
  5. <button type="button" class="close" (click)="close()">
  6. <span aria-hidden="true">&times;</span>
  7. </button>
  8. </div>
  9. <div class="modal-body">
  10. <div>
  11. Action:
  12. <pre>{{ modalData?.action }}</pre>
  13. </div>
  14. <div>
  15. Event:
  16. <pre>{{ modalData?.event | json }}</pre>
  17. </div>
  18. </div>
  19. <div class="modal-footer">
  20. <button type="button" class="btn btn-outline-secondary" (click)="close()">OK</button>
  21. </div>
  22. </ng-template>
  23. <div class="row text-center">
  24. <div class="col-md-4">
  25. <div class="btn-group">
  26. <div
  27. class="btn btn-primary"
  28. mwlCalendarPreviousView
  29. [view]="view"
  30. [(viewDate)]="viewDate"
  31. (viewDateChange)="activeDayIsOpen = false">
  32. Previous
  33. </div>
  34. <div
  35. class="btn btn-outline-secondary"
  36. mwlCalendarToday
  37. [(viewDate)]="viewDate">
  38. Today
  39. </div>
  40. <div
  41. class="btn btn-primary"
  42. mwlCalendarNextView
  43. [view]="view"
  44. [(viewDate)]="viewDate"
  45. (viewDateChange)="activeDayIsOpen = false">
  46. Next
  47. </div>
  48. </div>
  49. </div>
  50. <div class="col-md-4">
  51. <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
  52. </div>
  53. <div class="col-md-4">
  54. <div class="btn-group">
  55. <div
  56. class="btn btn-primary"
  57. (click)="view = CalendarView.Month"
  58. [class.active]="view === CalendarView.Month">
  59. Month
  60. </div>
  61. <div
  62. class="btn btn-primary"
  63. (click)="view = CalendarView.Week"
  64. [class.active]="view === CalendarView.Week">
  65. Week
  66. </div>
  67. <div
  68. class="btn btn-primary"
  69. (click)="view = CalendarView.Day"
  70. [class.active]="view === CalendarView.Day">
  71. Day
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. <br>
  77. <div [ngSwitch]="view">
  78. <mwl-calendar-month-view
  79. *ngSwitchCase="CalendarView.Month"
  80. [viewDate]="viewDate"
  81. [events]="events"
  82. [refresh]="refresh"
  83. [activeDayIsOpen]="activeDayIsOpen"
  84. (dayClicked)="dayClicked($event.day)"
  85. (eventClicked)="handleEvent('Clicked', $event.event)"
  86. (eventTimesChanged)="eventTimesChanged($event)">
  87. </mwl-calendar-month-view>
  88. <mwl-calendar-week-view
  89. *ngSwitchCase="CalendarView.Week"
  90. [viewDate]="viewDate"
  91. [events]="events"
  92. [refresh]="refresh"
  93. (eventClicked)="handleEvent('Clicked', $event.event)"
  94. (eventTimesChanged)="eventTimesChanged($event)">
  95. </mwl-calendar-week-view>
  96. <mwl-calendar-day-view
  97. *ngSwitchCase="CalendarView.Day"
  98. [viewDate]="viewDate"
  99. [events]="events"
  100. [refresh]="refresh"
  101. (eventClicked)="handleEvent('Clicked', $event.event)"
  102. (eventTimesChanged)="eventTimesChanged($event)">
  103. </mwl-calendar-day-view>
  104. </div>
  105. <br><br><br>