123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199 |
- <!-- 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 -->
|