Crear un calendario de eventos simple con JavaScript-Caleandar. js

Vista prévia

Descripción

Caleandar. js es una sencilla biblioteca de JavaScript que se usa para generar un calendario en línea en la página web que admite eventos personalizados definidos en JavaScript.

Funcionamiento

Cargue el Caleandar. js y un tema CSS de su elección en la Página Web.

<link rel="stylesheet" href="css/theme1.css">
<script src="js/caleandar.js"></script>

Cree un contenedor vacío para colocar el calendario.

<div id="caleandar">
</div>

Agregar eventos personalizados en el calendario.

var events = [


{'Date': new Date(2016, 6, 7), 'Title 1': 'Doctor appointment at 3:25pm.'},


{'Date': new Date(2016, 6, 18), 'Title 2': 'New Garfield movie comes out!', 'Link': 'https://garfield.com'},


{'Date': new Date(2016, 6, 27), 'Title 3': '25 year anniversary', 'Link': 'https://www.google.com.au/#q=anniversary+gifts'},
];

Pase las siguientes opciones al calendario.

var settings = {


Color: '',


LinkColor: '',


NavShow: true,


NavVertical: false,


NavLocation: '',


DateTimeShow: true,


DateTimeFormat: 'mmm, yyyy',


DatetimeLocation: '',


EventClick: '',


EventTargetWholeDay: false,


DisabledDays: [],


ModelChange: model
};

Genere un calendario de eventos dentro del contenedor que ha creado.

var element = document.getElementById('caleandar');
caleandar(element, events, settings);