salix/front/core/components/calendar/index.html

82 lines
3.1 KiB
HTML

<div>
<vn-horizontal class="header">
<vn-auto>
<vn-icon
icon="keyboard_arrow_left"
class="pointer"
ng-click="$ctrl.movePrevious($ctrl.skip)"
ng-show="$ctrl.displayControls"/>
</vn-icon>
</vn-auto>
<vn-one>
<div>
<span translate>{{$ctrl.defaultDate | date: 'MMMM'}}</span>
<span>{{$ctrl.defaultDate | date: 'yyyy'}}</span>
</div>
</vn-one>
<vn-auto>
<vn-icon
icon="keyboard_arrow_right"
class="pointer"
ng-click="$ctrl.moveNext($ctrl.skip)"
ng-show="$ctrl.displayControls">
</vn-icon>
</vn-auto>
</vn-horizontal>
<vn-vertical class="body">
<vn-horizontal class="weekdays">
<section title="{{'Monday' | translate}}"
ng-click="$ctrl.selectAll(1)">
<span>L</span>
</section>
<section title="{{'Tuesday' | translate}}"
ng-click="$ctrl.selectAll(2)">
<span>M</span>
</section>
<section title="{{'Wednesday' | translate}}"
ng-click="$ctrl.selectAll(3)">
<span>X</span>
</section>
<section title="{{'Thursday' | translate}}"
ng-click="$ctrl.selectAll(4)">
<span>J</span>
</section>
<section title="{{'Friday' | translate}}"
ng-click="$ctrl.selectAll(5)">
<span>V</span>
</section>
<section title="{{'Saturday' | translate}}"
ng-click="$ctrl.selectAll(6)">
<span>S</span>
</section>
<section title="{{'Sunday' | translate}}"
ng-click="$ctrl.selectAll(0)">
<span>D</span>
</section>
</vn-horizontal>
<vn-horizontal class="days">
<section
ng-repeat="day in $ctrl.days"
class="day {{::$ctrl.getClass({$day: day.dated})}}"
ng-class="::{primary: day.events.length > 0 || $ctrl.hasEvents({$day: day.dated})}">
<div class="content">
<div class="day-number"
title="{{(day.eventName) | translate}}"
ng-style="$ctrl.renderStyle(day.style)"
ng-click="$ctrl.select($index)">
{{::day.dated | date: 'd'}}
</div>
<div ng-if="day.events" class="events">
<div ng-repeat="event in day.events" class="event"
title="{{(event.description || event.name) | translate}}">
<span class="chip ellipsize"
ng-style="::$ctrl.renderStyle(event.style)">
{{::event.name}}
</span>
</div>
</div>
</div>
</section>
</vn-horizontal>
</vn-vertical>
</div>