199 lines
7.0 KiB
HTML
Executable File
199 lines
7.0 KiB
HTML
Executable File
<!-- start: PAGE TITLE -->
|
|
<section id="page-title">
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<h1 class="mainTitle" translate="sidebar.nav.pages.CALENDAR">{{ mainTitle }}</h1>
|
|
<span class="mainDescription">A port of the bootstrap calendar widget to AngularJS (no jQuery required).</span>
|
|
</div>
|
|
<div ncy-breadcrumb></div>
|
|
</div>
|
|
</section>
|
|
<!-- end: PAGE TITLE -->
|
|
<!-- start: CALENDAR -->
|
|
<div class="container-fluid container-fullw bg-white">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<!-- /// controller: 'CalendarCtrl' - localtion: assets/js/controllers/calendarCtrl.js /// -->
|
|
<div ng-controller="CalendarCtrl" id="demo">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="margin-bottom-30">
|
|
<button class="btn btn-primary btn-o btn-wide" ng-click="addEvent()">
|
|
<i class="ti-plus"></i> Add new event
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h2 class="text-center margin-bottom-20 margin-top-20">{{ calendarControl.getTitle() }} </h2>
|
|
</div>
|
|
<div class="col-xs-8">
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary" ng-click="calendarControl.prev()">
|
|
<i class="ti-angle-left"></i>
|
|
</button>
|
|
<button class="btn btn-primary" ng-click="calendarControl.next()">
|
|
<i class="ti-angle-right"></i>
|
|
</button>
|
|
</div>
|
|
<button class="btn btn-primary btn-o" ng-click="setCalendarToToday()">
|
|
Today
|
|
</button>
|
|
</div>
|
|
<div class="col-xs-4 text-right">
|
|
<div class="visible-md visible-lg hidden-sm hidden-xs">
|
|
<div class="btn-group">
|
|
<label class="btn btn-primary" ng-model="calendarView" btn-radio="'year'">
|
|
Year
|
|
</label>
|
|
<label class="btn btn-primary" ng-model="calendarView" btn-radio="'month'">
|
|
Month
|
|
</label>
|
|
<label class="btn btn-primary" ng-model="calendarView" btn-radio="'week'">
|
|
Week
|
|
</label>
|
|
<label class="btn btn-primary" ng-model="calendarView" btn-radio="'day'">
|
|
Day
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="visible-xs visible-sm hidden-md hidden-lg">
|
|
<div class="btn-group" dropdown>
|
|
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
|
|
<i class="fa fa-cog"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right dropdown-light" role="menu">
|
|
<li>
|
|
<a ng-model="calendarView" btn-radio="'year'" href="">
|
|
Year
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a ng-model="calendarView" btn-radio="'month'" href="">
|
|
Month
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a ng-model="calendarView" btn-radio="'week'" href="">
|
|
Week
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a ng-model="calendarView" btn-radio="'day'" href="">
|
|
Day
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<mwl-calendar
|
|
calendar-events="events"
|
|
calendar-view="calendarView"
|
|
calendar-current-day="calendarDay"
|
|
calendar-control="calendarControl"
|
|
calendar-event-click="eventClicked($event)"
|
|
calendar-edit-event-html="'<div class=\'btn btn-primary btn-sm pull-right\'><i class=\'ti-pencil\'></i></div>'"
|
|
calendar-delete-event-html="'<div class=\'btn btn-danger btn-sm margin-right-10 pull-right\'><i class=\'ti-close\'></i></div>'"
|
|
calendar-edit-event-click="eventEdited($event)"
|
|
calendar-delete-event-click="eventDeleted($event)"
|
|
calendar-auto-open="false"
|
|
></mwl-calendar>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<!-- start: EDIT EVENT TEMPLATE -->
|
|
<script type="text/ng-template" id="calendarEvent.html">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>
|
|
event.title
|
|
</label>
|
|
<input type="datetime" placeholder="Enter title" class="form-control underline text-large" ng-model="event.title" >
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
Start
|
|
</label>
|
|
<span class="input-icon">
|
|
<input type="text" class="form-control underline" ng-click="startOpen = !startOpen" datepicker-popup="fullDate" ng-model="event.starts_at" is-open="startOpen" ng-init="startOpen = false" max-date="event.ends_at" close-text="Close" />
|
|
<i class="ti-calendar"></i> </span>
|
|
<timepicker ng-model="event.starts_at" show-meridian="true" ng-show="!event.allDay"></timepicker>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
End
|
|
</label>
|
|
<span class="input-icon">
|
|
<input type="text" class="form-control underline" ng-click="endOpen = !endOpen" datepicker-popup="fullDate" ng-model="event.ends_at" is-open="endOpen" ng-init="endOpen = false" min-date="event.starts_at" close-text="Close" />
|
|
<i class="ti-calendar"></i> </span>
|
|
<timepicker ng-model="event.ends_at" show-meridian="true" ng-show="!event.allDay"></timepicker>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
Category
|
|
</label>
|
|
<div class="row">
|
|
<div class="col-xs-6">
|
|
<div class="radio clip-radio radio-primary">
|
|
<input type="radio" id="job" name="optionsCategory" value="job" ng-model="event.type">
|
|
<label for="job">
|
|
<span class="fa fa-circle text-primary"></span> Job
|
|
</label>
|
|
</div>
|
|
<div class="radio clip-radio radio-primary">
|
|
<input type="radio" id="home" name="optionsCategory" value="home" ng-model="event.type">
|
|
<label for="home">
|
|
<span class="fa fa-circle text-purple"></span> Home
|
|
</label>
|
|
</div>
|
|
<div class="radio clip-radio radio-primary">
|
|
<input type="radio" id="off-site-work" name="optionsCategory" value="off-site-work" ng-model="event.type">
|
|
<label for="off-site-work">
|
|
<span class="fa fa-circle text-green"></span> Off site
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<div class="radio clip-radio radio-primary">
|
|
<input type="radio" id="cancelled" name="optionsCategory" value="cancelled" ng-model="event.type">
|
|
<label for="cancelled">
|
|
<span class="fa fa-circle text-yellow"></span> Cancelled
|
|
</label>
|
|
</div>
|
|
<div class="radio clip-radio radio-primary">
|
|
<input type="radio" id="generic" name="optionsCategory" value="generic" ng-model="event.type">
|
|
<label for="generic">
|
|
<span class="fa fa-circle text-info"></span> Generic
|
|
</label>
|
|
</div>
|
|
<div class="radio clip-radio radio-primary">
|
|
<input type="radio" id="to-do" name="optionsCategory" value="to-do" ng-model="event.type">
|
|
<label for="to-do">
|
|
<span class="fa fa-circle text-orange"></span> ToDo
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-danger btn-o" ng-click="deleteEvent(event)">
|
|
Delete
|
|
</button>
|
|
<button class="btn btn-primary btn-o" ng-click="cancel()">
|
|
Ok
|
|
</button>
|
|
</div>
|
|
</script>
|
|
<!-- end: EDIT EVENT TEMPLATE -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: CALENDAR -->
|