En este artículo os explicaré como utilizar el AngularJS event calendar de la librería open-source DayPilot Lite for Javascript para que podáis construir vuestro propio calendario o agenda en la web. A continuación os listaré las funciones del calendario que vamos a utilizar:
- Arrastrar y soltar para crear eventos
- Arrastrar y soltar para mover eventos
- Arrastrar y soltar para cambiar el tamaño de dichos eventos
- Modificación y eliminado de eventos utilizando ventanas modales
- Cambios de vista entre días y semanas
- Date Picker para cambiar los días visibles
- Las notificaciones AJAX actualizan automáticamente la base de datos
- Open-source (Licencia Apache 2.0)
La parte del servidor es muy ligera y se basa en simples mensajes JSON
Calendario de eventos con AngularJS
DayPilot Lite para JavaScript te permite crear una interfaz de usuario para el calendario de eventos utilizando JavaScript. La última versión, la 1.2, añade un plugin de AngularJS. Este plugin proporciona directivas de AngularJS para crear los componentes de la interfaz de usuario para el calendario de una forma fácil y sencilla:
En este artículo vamos a utilizar las directivas y para crear una aplicación sencilla con los siguientes componentes:
- Calendario de eventos diaria
- Calendario de eventos semanales
- Navegador entre fechas
Vista diaria del calendario de AngularJS
Vamos a añadir el planificador diario usando el elemento de AngularJS .
- La configuración se ajusta con el objeto dayConfig (daypilot-config="dayConfig")
- Los eventos se establecen usando objetos de eventos (daypilot-events = "events")
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>
<div ng-app="main" ng-controller="DemoCtrl" >
<daypilot-calendar id="day" daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
</div>
<script type="text/javascript">
var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
$scope.events = [];
$scope.dayConfig = {
viewType: "Day"
};
});
</script>
Vista semanal del calendario de AngularJS
Usaremos otra instancia del calendario para crear la vista semanal. La configuración es muy similar. La única diferencia es que vamos a permanecer con esta instancia oculta (visible: false)
<div ng-app="main" ng-controller="DemoCtrl" >
<daypilot-calendar id="day" daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
<daypilot-calendar id="week" daypilot-config="weekConfig" daypilot-events="events" ></daypilot-calendar>
</div>
<script type="text/javascript">
var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
$scope.events = [];
$scope.dayConfig = {
viewType: "Day"
};
$scope.weekConfig = {
visible: false,
viewType: "Week"
};
});
</script>
Cargando eventos
Los dos ejemplos de calendarios que hemos visto apuntan hacia la misma fuente de datos de eventos (daypilot-eventos = "events"). Todo lo que necesitamos hacer para llenar de contenido ambos casos con los datos necesarios es cargar los eventos con $scope.events:
function loadEvents() {
// using $timeout to make sure all changes are applied before reading visibleStart() and visibleEnd()
$timeout(function() {
var params = {
start: $scope.week.visibleStart().toString(),
end: $scope.week.visibleEnd().toString()
};
$http.post("backend_events.php", params).success(function(data) {
$scope.events = data;
});
});
}
Backend PHP (backend_events.php)
require_once '_db.php';
$json = file_get_contents('php://input');
$params = json_decode($json);
$stmt = $db->prepare("SELECT * FROM events WHERE NOT ((end <= :start) OR (start >= :end))");
$stmt->bindParam(':start', $params->start);
$stmt->bindParam(':end', $params->end);
$stmt->execute();
$result = $stmt->fetchAll();
class Event {}
$events = array();
date_default_timezone_set("UTC");
$now = new DateTime("now");
$today = $now->setTime(0, 0, 0);
foreach($result as $row) {
$e = new Event();
$e->id = $row['id'];
$e->text = $row['text'];
$e->start = $row['start'];
$e->end = $row['end'];
$events[] = $e;
}
header('Content-Type: application/json');
echo json_encode($events);
Backend ASP.NET MVC (BackendController.cs)
public class BackendController : Controller
{
CalendarDataContext db = new CalendarDataContext();
public class JsonEvent
{
public string id { get; set; }
public string text { get; set; }
public string start { get; set; }
public string end { get; set; }
}
// URL: /Backend/Events
public ActionResult Events(DateTime? start, DateTime? end)
{
// SQL: SELECT * FROM [event] WHERE NOT (([end] <= @start) OR ([start] >= @end))
var events = from ev in db.Events.AsEnumerable() where !(ev.End <= start || ev.Start >= end) select ev;
var result = events.Select(e => new JsonEvent()
{
start = e.Start.ToString("s"),
end = e.End.ToString("s"),
text = e.Text,
id = e.Id.ToString()
})
.ToList();
return new JsonResult { Data = result };
}
// ...
}
Respuesta JSON de ejemplo
[
{
"id":"12",
"text":"Test",
"start":"2015-03-16T11:30:00",
"end":"2015-03-16T16:30:00"
}
]
Cambiando de vista diaria a vista semanal
Ahora vamos a añadir dos botones ("Day" y "Week") que permitirá al usuario cambiar entre la vista diaria y la vista semanal del propio calendario:
<div ng-app="main" ng-controller="DemoCtrl" >
<div class="space">
<button ng-click="showDay()">Day</button>
<button ng-click="showWeek()">Week</button>
</div>
<daypilot-calendar id="day" daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
<daypilot-calendar id="week" daypilot-config="weekConfig" daypilot-events="events" ></daypilot-calendar>
</div>
<script type="text/javascript">
var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
// ...
$scope.showDay = function() {
$scope.dayConfig.visible = true;
$scope.weekConfig.visible = false;
};
$scope.showWeek = function() {
$scope.dayConfig.visible = false;
$scope.weekConfig.visible = true;
};
});
</script>
Navegación por fechas
El siguiente paso es la inserción de un control para navegar entre fechas utilizando el elemento de AngularJS . Esto nos permitirá cambiar la la fecha de la vista:
<div ng-app="main" ng-controller="DemoCtrl" >
<div style="float:left; width: 160px">
<daypilot-navigator id="navi" daypilot-config="navigatorConfig" ></daypilot-navigator>
</div>
<div style="margin-left: 160px">
<div class="space">
<button ng-click="showDay()">Day</button>
<button ng-click="showWeek()">Week</button>
</div>
<daypilot-calendar id="day" daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
<daypilot-calendar id="week" daypilot-config="weekConfig" daypilot-events="events" ></daypilot-calendar>
</div>
</div>
<script type="text/javascript">
var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
$scope.navigatorConfig = {
selectMode: "day",
showMonths: 3,
skipMonths: 3,
onTimeRangeSelected: function(args) {
$scope.weekConfig.startDate = args.day;
$scope.dayConfig.startDate = args.day;
loadEvents();
}
};
// ...
});
</script>
Plantillas CSS para el calendario
Puedes construir tu propia plantilla CSS para el DayPilot AngularJS Event Calendar utilizando el diseñadorde plantillas online. Se trata de un editor WYSIWYG que te permite crear temas especificando estilos para los elementos de calendario (eventos, encabezados, celdas de tiempo).
Y este ha sido el artículo en el que trataba explicaros cómo crear un calendario de eventos con AngularJS, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!