LARAVEL- Fullcalendar
En este artículo veremos su funcionalidad básica con algunos detalles y opciones que ofrece su Fullcalendar es ideal para mostrar eventos, pero no es una solución completa para la gestión de contenido de los eventos.
Escribe el siguiente código de inicialización:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
En la cabecera de tu página, dentro de la etiqueta <head> puedes agregar los estilos y scripts necesarios para hacer funcionar Fullcalendar.
<link rel='stylesheet' type='text/css' href='npm/fullcalendar@5.6.0/main.css' />
<script type='text/javascript' src='js/main.min.js'></script>
<script type='text/javascript' src='js/locale/es.js'></script>
---
Requiere incluir la hoja de estilos CSS, la librería Moment, jQuery y Fullcalendar. En el ejemplo también estamos agregando el archivo de idioma para mostrar el calendario en español que es lo que nos interesa. Si no agregas este último archivo, el calendario aparecerá en idioma inglés por defecto.
Estos archivos también pueden ser incluidos antes de la etiqueta de cierre del cuerpo de la página </body>. Por temas de rendimiento, es mejor situarlo al final para no retrasar la carga de la página.
Dentro del cuerpo de la página, o en el lugar que más desees del <body>, agrega el contenedor que se rellenará con el calendario. Por ejemplo;
- <div id="calendar"></div>
Ahora solo queda agregar la llamada al plugin Fullcalendar para generar el calendario con las opciones que deseemos:
==============================================================
$(document).ready(function() {$('#calendar').fullCalendar({header: {left: 'prev,next',center: 'title',right: 'month,agendaWeek,agendaDay'},defaultDate: '2019-07-09',buttonIcons: true,weekNumbers: false,editable: true,eventLimit: true,events: [{title: 'All Day Event',description: 'Lorem ipsum 1...',start: '2019-07-01',color: '#3A87AD',textColor: '#ffffff',}],dayClick: function (date, jsEvent, view) {alert('Has hecho click en: '+ date.format());},eventClick: function (calEvent, jsEvent, view) {$('#event-title').text(calEvent.title);$('#event-description').html(calEvent.description);$('#modal-event').modal();},});});
============================================
Obteniendo como resultado:
Opciones
En esta llamada a Fullcalendar estamos utilizando las siguientes opciones:
header:
header: {left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
Permite definir los botones y el título de la parte superior del calendario.
En la cabecera del calendario de ejemplo queremos mostrar en la parte izquierda de la cabecera los botones para la paginación de los meses, semanas o días. Se pueden agregar botones personalizados. Ver más detalles en la documentación oficial.
En el centro de la cabecera hemos querido mostrar el título donde aparece el mes y el año por defecto y en la parte derecha nos ha interesado mostrar botones para mostrar otras vistas del calendario. En este caso, la vista del mes, semana y día.
defaultDate
defaultDate: '2019-07-09',
En este parámetro puedes definir la fecha marcada cuando se carga el calendario por primera vez.
Un formato de fecha aceptado es por ejemplo: 2019-07-09.
Cuando no se especifica, este valor se establece por defecto con la fecha actual.
buttonIcons-buttonIcons: true,
Establecido en true muestra unos iconos en los botones de la cabecera del calendario. Si su valor es false, se muestra un texto: sig y ant.
weekNumbers - weekNumbers: false,
Establecido en true muestra una pequeña columna en la parte izquierda del calendario para informar del número de la semana.
eventLimit- eventLimit: true,
Permite limitar la cantidad de eventos que se muestran en un día. El resto se mostrará en una ventana emergente. Puedes indicar true, false o un número entero.
events
events: [
{
title: 'All Day Event',
description: 'Lorem ipsum 1...',
start: '2019-07-01',
color: '#3A87AD',
textColor: '#ffffff',
}
],
Definición de la lista de objetos o eventos que se mostrarán en el calendario. A qui es donde le mandamos la lista de eventos.
dayClick
dayClick: function (date, jsEvent, view) {
alert('Has hecho click en: '+ date.format());
},
Este atributo se utiliza para controlar el evento o acción de hacer clic en un día del calendario. En el ejemplo en funcionamiento tan solo estamos mostrando una alerta pero se pueden hacer infinidad de cosas como por ejemplo mostrar un formulario para agregar un nuevo evento al calendario.
eventClick
eventClick: function (calEvent, jsEvent, view) {
$('#event-title').text(calEvent.title);
$('#event-description').html(calEvent.description);
$('#modal-event').modal();
}
Este atributo se utiliza para controlar el evento o acción de hacer clic en un evento del calendario. En el ejemplo en funcionamiento abrimos una ventana modal y agregamos el título y descripción del evento.
Comentarios
Publicar un comentario