Características


var features = [
'Flexible y totalmente personalizable',
'Responde - tiene diseño de escritorio, tableta y móvil',
'Añadir, eliminar y ver los eventos del calendario',
'Eventos y métodos que te permiten pensar fuera de la caja :)',
'¿Cuenta el "aspecto moderno"? ¡Entonces me apunto!'
]; // y más características por venir...

Temas

Temas simples para un plugin muy simple. Puedes elegir lo que se adapte a tu proyecto o encontrar la inspiración para personalizarlo como quieras!

Evo Calendar - Theme: Default 

$('#calendar').evoCalendar({
// Es el tema por defecto :)
})
Evo Calendar - Theme: Midnight Blue 

$('#calendar').evoCalendar({
theme: 'Midnight Blue'
})
Evo Calendar - Theme: Royal Navy 

$('#calendar').evoCalendar({
theme: 'Royal Navy'
})
Evo Calendar - Theme: Orange Coral 

$('#calendar').evoCalendar({
theme: 'Orange Coral'
})

evocalendar en acción!

Experimente el evocalendar en cada tema

¡Que comience la codificación!

html


// Configura tu marcado HTML
<div id="calendar"></div>

css


// Añada el evo-calendar.css (tema predeterminado incluido) en el <head> etiqueta
<link rel="stylesheet" type="text/css" href="css/evo-calendar.css"/>
// ¿Temas? Añádelos justo después del css principal
<link rel="stylesheet" type="text/css" href="css/evo-calendar.midnight-blue.css"/>

javascript


// Añade evo-calendar.js antes de tu cierre <body> etiqueta, justo después de jQuery (requerido)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/evo-calendar.js"></script>



// Inicializa el evo-calendar en tu archivo de guión o en un inline <script> tag
$(document).ready(function() {
$('#calendar').evoCalendar({
    settingName: settingValue
})
})

un aspecto completo de html básico:


<html>
<head>
    <title>My Evo Calendar</title>
    // evo-calendar.css, seguido de [theme-name].css (opcional)
    <link rel="stylesheet" type="text/css" href="css/evo-calendar.css"/>
    <link rel="stylesheet" type="text/css" href="css/evo-calendar.midnight-blue.css"/>
</head>
<body>

    // aquí es donde va tu calendario... :)
    <div id="calendar"></div>

    // evo-calendar.js, right after jQuery (required)
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/evo-calendar.js"></script>

    <script>
    // Inicie su calendario, una vez que el DOM de la página esté listo...
    $(document).ready(function() {
	$('#calendar').evoCalendar({
	    settingName: settingValue
	})
    })
    </script>

</body>
</html>

Ajustes

ajustes escriba por defecto descripción opciones
theme string Default Definir el tema del calendario Default, Midnight Blue, Orange Coral, Royal Navy
language string 'en' El lenguaje del calendario en, es, de, pt
format string 'mm/dd/yyyy' Formato de la fecha Date string format
titleFormat string 'MM yyyy' Formato de fecha para el título del calendario Date string format
eventHeaderFormat string 'MM d, yyyy' Formato de fecha para el título del evento del calendario Date string format
firstDayOfWeek number 0 Se muestra el primer día de la semana 0 (Sunday) - 6 (Saturday)
todayHighlight boolean false Destaca la fecha de hoy en el calendario true, false
sidebarDisplayDefault boolean true Establecer la visibilidad por defecto de la barra lateral true, false
sidebarToggler boolean true Mostrar el botón para conmutar la barra lateral true, false
eventDisplayDefault boolean true Establecer la visibilidad por defecto de las listas de eventos true, false
eventListToggler boolean true Mostrar el botón para conmutar las listas de eventos true, false
calendarEvents array null Se definieron eventos para que el calendario muestre Array of events

ejemplo de configuración


// calendarEvents
$('#calendar').evoCalendar({
todayHighlight: true,
calendarEvents: [
    {
	id: "4hducye", // Identificación del evento (requerida, para eliminar el evento)
	name: "Today's Event", // Nombre del evento
	description: "Lorem ipsum dolor sit amet..", // Descripción del evento (opcional)
	date: new Date(), // Fecha del evento
	type: "holiday", // Tipo de evento (event|holiday|birthday)
	color: "#63d867" // Color personalizado del evento (opcional)
	everyYear: true // El evento es cada año (opcional)
    }
]
})

métodos

método argumento descripción
setTheme string Establecer/cambiar el tema
toggleSidebar boolean (optional) Cambiar la pantalla de la barra lateral
toggleEventList boolean (optional) Cambiar la visualización de la lista de eventos
getActiveDate none Obtener la fecha seleccionada
getActiveEvents none Obtener el evento o eventos de la fecha seleccionada
selectYear number Seleccione el año programáticamente
selectMonth number (0-11) Seleccione el mes de forma programada
selectDate string Seleccione la fecha por medio de un programa.
addCalendarEvent array/object Añadir evento(s) de calendario
removeCalendarEvent array/string Eliminar los eventos por su identificación
destroy none Bueno .. destruir el calendario

ejemplo de métodos


// cargando...

eventos

eventos argumento descripción
selectDate newDate, oldDate Incendios después de seleccionar la fecha
selectEvent activeEvent Disparos después de seleccionar el evento
selectMonth activeMonth, monthIndex Incendios después de seleccionar el mes
selectYear activeYear Incendios después de cambiar de año
destroy calendar Los incendios después de destruir el calendario

ejemplo de eventos


// cargando...