zuel-itsm-3.0.2/assets/views/pages_calendar.html

<!-- 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>&nbsp;<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 -->