Biblioteca de calendario JavaScript Pure personalizable-jsCalendar

Vista prévia

Descripción

jsCalendar es una biblioteca de JavaScript independiente que le ayuda a crear calendarios en línea personalizables en la Página Web.

Más características

• 3 temas incorporados: default, material Design y Classic.
• Cada tema tiene 5 colores: azul, amarillo, naranja, rojo, verde.
• Toneladas de opciones, eventos y métodos de API.
• i18n. Admite más de 9 idiomas.

¿Cómo funciona?

Incluya el JavaScript y la hoja de estilo de jsCalendar en la página HTML.

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

Incluya un archivo de idioma de su elección:

<script src="jsCalendar.lang.de.js"></script>

Cree un elemento para el calendario.

<div id="my-calendar"></div>

Para inicializar el calendario automáticamente, simplemente agregue la clase ' auto-jsCalendar ' al elemento contenedor.

<div class="auto-jsCalendar"></div>

O a través de JavaScript:

// Get the element
var element = document.getElementById("my-calendar");
// Create the calendar
jsCalendar.new(element);

Establezca la fecha seleccionada en init.

jsCalendar.new(element, "30/01/2017");

Aplique un tema de su elección al calendario.

<!-- Material theme -->
<div class="auto-jsCalendar material-theme"></div>
<!-- Classic theme -->
<div class="auto-jsCalendar classic-theme"></div>
<!-- Green theme -->
<div class="auto-jsCalendar green"></div>
<!-- Blue theme -->
<div class="auto-jsCalendar blue"></div>
<!-- Yellow theme -->
<div class="auto-jsCalendar yellow"></div>
<!-- Orange theme -->
<div class="auto-jsCalendar orange"></div>
<!-- Red theme -->
<div class="auto-jsCalendar red"></div>

Todas las posibles opciones de calendario.

jsCalendar.new(element, "30/01/2017",{


// language

language : "en",


// Enable/Disable date's number zero fill

zeroFill : false,


// Custom month string format

// month: Month's full name "February"

// ##: Month's number
"02"

// #: Month's number
"2"

// YYYY: Year
"2017"

monthFormat : "month",


// Custom day of the week string forma

// day: Day's full name "Monday"

// DDD: Day's first 3 letters "Mon"

// DD: Day's first 2 letters "Mo"

// D: Day's first letter
"M"

dayFormat : "D",


// 1 = monday

firstDayOfTheWeek: 1


// Enable/Disable month's navigation buttons.

navigator : true,


// both | left | right

navigatorPosition : "both",


// min date

min : false,


// max date

max : false


});

API methods.

// goto the next month
jsCalendar.next();

// goto the previous month
jsCalendar.previous();

// set a new date
jsCalendar.set("30/01/2017");

// refresh the calendar
jsCalendar.refresh();

// goto a specified date
jsCalendar.goto("30/01/2017");

// rest the calendar
jsCalendar.reset();

// change the calendar language
jsCalendar.setLanguage("de");

// set min/max dates
jsCalendar.min("now");
jsCalendar.max("now");

Eventos disponibles.

jsCalendar.onDateClick(function(event, date){

// On day click
});

jsCalendar.onMonthChange(function(event, date){

// On month change
});

Registro de cambios

10/04/2018

• Se corrigió el nombre del traductor y del idioma
• Limpieza de código general y algunas correcciones CSS