angular-material-calendar.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <md-content layout='column' layout-fill md-swipe-left='next()' md-swipe-right='prev()'>
  2. <md-toolbar>
  3. <div class='md-toolbar-tools' layout='row'>
  4. <md-button class='md-icon-button' ng-click='prev()' aria-label='Previous month'>
  5. <md-tooltip ng-if='::tooltips()'>Previous month</md-tooltip>&laquo;</md-button>
  6. <div flex></div>
  7. <h2 class='calendar-md-title'><span>{{ calendar.start | date:titleFormat:timezone }}</span></h2>
  8. <div flex></div>
  9. <md-button class='md-icon-button' ng-click='next()' aria-label='Next month'>
  10. <md-tooltip ng-if='::tooltips()'>Next month</md-tooltip>&raquo;</md-button>
  11. </div>
  12. </md-toolbar>
  13. <!-- agenda view -->
  14. <md-content ng-if='weekLayout === columnWeekLayout' class='agenda'>
  15. <div ng-repeat='week in calendar.weeks track by $index'>
  16. <div ng-if='sameMonth(day)' ng-class='{&quot;disabled&quot; : isDisabled(day), active: active === day }' ng-click='handleDayClick(day)' ng-repeat='day in week' layout>
  17. <md-tooltip ng-if='::tooltips()'>{{ day | date:dayTooltipFormat:timezone }}</md-tooltip>
  18. <div>{{ day | date:dayFormat:timezone }}</div>
  19. <div flex ng-bind-html='dataService.data[dayKey(day)]'></div>
  20. </div>
  21. </div>
  22. </md-content>
  23. <!-- calendar view -->
  24. <md-content ng-if='weekLayout !== columnWeekLayout' flex layout='column' class='calendar'>
  25. <div layout='row' class='subheader'>
  26. <div layout-padding class='subheader-day' flex ng-repeat='day in calendar.weeks[0]'>
  27. <md-tooltip ng-if='::tooltips()'>{{ day | date:dayLabelTooltipFormat }}</md-tooltip>{{ day | date:dayLabelFormat }}</div>
  28. </div>
  29. <div ng-if='week.length' ng-repeat='week in calendar.weeks track by $index' flex layout='row'>
  30. <div tabindex='{{ sameMonth(day) ? (day | date:dayFormat:timezone) : 0 }}' ng-repeat='day in week track by $index' ng-click='handleDayClick(day)' flex layout layout-padding ng-class='{&quot;disabled&quot; : isDisabled(day), &quot;active&quot;: isActive(day), &quot;md-whiteframe-12dp&quot;: hover || focus }'
  31. ng-focus='focus = true;' ng-blur='focus = false;' ng-mouseleave='hover = false' ng-mouseenter='hover = true'>
  32. <md-tooltip ng-if='::tooltips()'>{{ day | date:dayTooltipFormat }}</md-tooltip>
  33. <div>{{ day | date:dayFormat }}</div>
  34. <div flex ng-bind-html='dataService.data[dayKey(day)]'></div>
  35. </div>
  36. </div>
  37. </md-content>
  38. </md-content>