Características


var features = [
'Flexível e totalmente personalizável',
'Responsivo - tem design de mesa, tablet e móvel',
'Adicionar, remover e visualizar eventos do calendário',
'Eventos e métodos que lhe permitem pensar fora da caixa :)',
'O "aspecto moderno" conta? Então eu estou dentro!'
]; // e mais recursos que virão...

Temas

Temas simples para um plugin muito simples. Você pode escolher o que se adequa ao seu projeto ou encontrar inspiração para personalizá-lo da maneira que você quiser!

Evo Calendar - Theme: Default 

$('#calendar').evoCalendar({
// É o tema padrão :)
})
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 em ação!

Experiência evocalendária em cada tema

que comece a codificação!

html


// Configure sua marcação HTML
<div id="calendar"></div>

css


// Adicionar evo-calendar.css (tema padrão incluído) no <head> tag
<link rel="stylesheet" type="text/css" href="css/evo-calendar.css"/>
// Temas? Adicione-os logo após o css principal
<link rel="stylesheet" type="text/css" href="css/evo-calendar.midnight-blue.css"/>

javascript


// Adicione evo-calendar.js antes de seu fechamento <body> tag, logo após 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>



// Inicialize o evo-calendário em seu arquivo de script ou um inline <script> tag
$(document).ready(function() {
$('#calendar').evoCalendar({
    settingName: settingValue
})
})

visual básico html completo:


<html>
<head>
    <title>My Evo Calendar</title>
    // evo-calendar.css, seguido por [tema-nome].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>

    // aqui é para onde vai seu calendário :)
    <div id="calendar"></div>

    // evo-calendar.js, logo após jQuery (necessário)
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/evo-calendar.js"></script>

    <script>
    // inicialize seu calendário, uma vez que o DOM da página esteja pronto
    $(document).ready(function() {
	$('#calendar').evoCalendar({
	    settingName: settingValue
	})
    })
    </script>

</body>
</html>

Configurações

configurações tipo padrão descrição opções
theme string Default Definir o tema do calendário Default, Midnight Blue, Orange Coral, Royal Navy
language string 'en' Idioma do calendário en, es, de, pt
format string 'mm/dd/yyyy' Formato da data Date string format
titleFormat string 'MM yyyy' Formato de data para o título do calendário Date string format
eventHeaderFormat string 'MM d, yyyy' Formato de data para o título do evento do calendário Date string format
firstDayOfWeek number 0 Exibido no primeiro dia da semana 0 (Sunday) - 6 (Saturday)
todayHighlight boolean false Destacar a data de hoje no calendário true, false
sidebarDisplayDefault boolean true Definir a visibilidade padrão da barra lateral true, false
sidebarToggler boolean true Mostrar o botão para alternar a barra lateral true, false
eventDisplayDefault boolean true Definir a visibilidade padrão das listas de eventos true, false
eventListToggler boolean true Exibir o botão para alternar as listas de eventos true, false
calendarEvents array null Eventos definidos para o calendário a mostrar Array of events

exemplo de configurações


// calendarEvents
$('#calendar').evoCalendar({
todayHighlight: true,
calendarEvents: [
    {
	id: "4hducye", // Identificação do evento (necessário, para remover o evento)
	name: "Today's Event", // Nome do evento
	description: "Lorem ipsum dolor sit amet..", // Descrição do evento (opcional)
	date: new Date(), // Data do evento
	type: "holiday", // Tipo de evento (evento|férias|aniversário)
	color: "#63d867" // Cor personalizada do evento (opcional)
	everyYear: true // O evento é todos os anos (opcional)
    }
]
})

métodos

método argumento descrição
setTheme string Conjunto/Mudar tema
toggleSidebar boolean (optional) Mostrador da barra lateral
toggleEventList boolean (optional) Exibição da lista de eventos alternados
getActiveDate none Obtenha a data selecionada
getActiveEvents none Obtenha o(s) evento(s) de data selecionado(s)
selectYear number Selecione programmaticamente o ano
selectMonth number (0-11) Selecione programmaticamente o mês
selectDate string Selecione a data programática
addCalendarEvent array/object Adicionar evento(s) do calendário
removeCalendarEvent array/string Remover evento(s) por sua identificação
destroy none Bem... destruir o calendário

exemplo de métodos


// carregamento...

events

eventos argumento descrição
selectDate newDate, oldDate Incêndios após a escolha da data
selectEvent activeEvent Incêndios após a seleção do evento
selectMonth activeMonth, monthIndex Incêndios após a seleção do mês
selectYear activeYear Incêndios após mudança de ano
destroy calendar Incêndios após a destruição do calendário

exemplo de eventos


// carregamento...