Closed willsnake closed 9 years ago
Have you included the calendar CSS file?
Hi!
Yes, I've added it. Here I post my code.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Maestria</title>
<!-- Bootstrap Core CSS -->
<link href="http://localhost/Maestria/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/Maestria/bower_components/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" type="text/css">
<link href="http://localhost/Maestria/css/main.css" type="text/css">
<!-- MetisMenu CSS -->
<!-- <link href="--><?//= base_url("css/plugins/metisMenu/metisMenu.min.css") ?><!--" rel="stylesheet">-->
<!-- Custom CSS -->
<!-- <link href="--><?//= base_url("css/sb-admin-2.css") ?><!--" rel="stylesheet">-->
<!-- Custom Fonts -->
<!-- <link href="--><?//= base_url("font-awesome-4.2.0/css/font-awesome.min.css") ?><!--" rel="stylesheet" type="text/css">-->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="mwl.calendar">
<div id="wrapper">
<div id="page-wrapper">
<div class="container-fluid">
<div class="row" ng-controller="MainCtrl" id="demo">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">{{ calendarControl.getTitle() }}</h2>
<div class="row">
<div class="col-md-6 text-center">
<div class="btn-group">
<button class="btn btn-primary" ng-click="calendarControl.prev()">Previous</button>
<button class="btn btn-default" ng-click="setCalendarToToday()">Today</button>
<button class="btn btn-primary" ng-click="calendarControl.next()">Next</button>
</div>
</div>
<br class="visible-xs visible-sm">
<div class="col-md-6 text-center">
<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>
<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="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
calendar-delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
calendar-edit-event-click="eventEdited($event)"
calendar-delete-event-click="eventDeleted($event)"
calendar-auto-open="true"
></mwl-calendar>
<br><br><br>
<script type="text/ng-template" id="modalContent.html">
<div class="modal-header">
<h3 class="modal-title">Event action occurred!</h3>
</div>
<div class="modal-body">
<p>Action: <pre>{{ action }}</pre></p>
<p>Event: <pre>{{ event | json }}</pre></p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$modalInstance.close()">OK</button>
</div>
</script>
<h3 id="event-editor">
Edit events
<button class="btn btn-primary pull-right" ng-click="events.push({title: 'New event', type: 'important'})">Add new</button>
<div class="clearfix"></div>
</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Type</th>
<th>Starts at</th>
<th>Ends at</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="event in events">
<td><input type="text" class="form-control" ng-model="event.title"></td>
<td>
<select ng-model="event.type" class="form-control">
<option value="important">Important</option>
<option value="warning">Warning</option>
<option value="info">Info</option>
<option value="inverse">Inverse</option>
<option value="success">Success</option>
<option value="special">Special</option>
</select>
</td>
<td>
<p class="input-group" style="max-width: 250px">
<input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="event.starts_at" is-open="event.startOpen" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggle($event, 'startOpen', event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<timepicker ng-model="event.starts_at" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
</td>
<td>
<p class="input-group" style="max-width: 250px">
<input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="event.ends_at" is-open="event.endOpen" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggle($event, 'endOpen', event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<timepicker ng-model="event.ends_at" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
</td>
<td><button class="btn btn-danger" ng-click="events.splice($index, 1)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper --></div>
<!-- /#wrapper -->
<script src="http://localhost/Maestria/bower_components/moment/min/moment.min.js"></script>
<script src="http://localhost/Maestria/bower_components/angular/angular.min.js"></script>
<script src="http://localhost/Maestria/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="http://localhost/Maestria/bower_components/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
<script src="http://localhost/Maestria/js/main.js"></script>
</body>
</html>
Are there any errors in the console? What shows up if you inspect element on where the calendar should be?
Yes, I've got an error, but from jquery.
Can you try to reproduce it on http://plnkr.co/
Without actually being able to hack about with the code myself, I’m pretty much just guessing otherwise.
On 24 January 2015 at 18:21:42, Daniel Rodríguez Monroy (notifications@github.com) wrote:
Yes, I've got an error, but from jquery.
— Reply to this email directly or view it on GitHub.
Hi!
I'm creating a repository, as soon as it's up, I will share you the link. Also, I want to thank you for all your help. And sorry for my english.
Hi!
Here it's the link to the proyect link the proyect. Thanks in advancem for all your help.
Hi!
I've solved it, the problema was that I forgot to specify the rel
type on the <link>
tag.
Sorry, rookie mistake.
But thanks for your time.
Glad to hear :)
Hi!
I'm trying to use the calendar with the framework Codeigniter, I've used the code in the demo but I can't get it to work. Could you please guide me with this?