evocalendar

features


var features = [
    'Flexible and fully customizable',
    'Responsive — has desktop, tablet and mobile design',
    'Add, remove and view calendar events',
    'Events and methods that lets you think outside the box :)',
    'Does "modern-looking" counts? Then I'm in!'
]; // and more features to come...

themes

Simple themes for a very simple plugin. You can choose what suits to your project or find inspiration to customize it just the way you like!

Evo Calendar - Theme: Default 

$('#calendar').evoCalendar({
    // It's the default theme :)
})
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'
})

Let me customize a theme for you. Click here!

evocalendar in action!

Experience evocalendar in every theme

let the coding begins!

html


// Set up your HTML markup
<div id="calendar"></div>

css


// Add evo-calendar.css (default theme included) in the <head> tag
<link rel="stylesheet" type="text/css" href="css/evo-calendar.css"/>
// Themes? Add them right after the main css
<link rel="stylesheet" type="text/css" href="css/evo-calendar.midnight-blue.css"/>

javascript


// Add evo-calendar.js before your closing <body> tag, 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>



// Initialize evo-calendar in your script file or an inline <script> tag
$(document).ready(function() {
    $('#calendar').evoCalendar({
        settingName: settingValue
    })
})

basic html complete look:


<html>
    <head>
        <title>My Evo Calendar</title>
        // evo-calendar.css, followed by [theme-name].css (optional)
        <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>

        // this is where your calendar goes.. :)
        <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>
        // initialize your calendar, once the page's DOM is ready
        $(document).ready(function() {
            $('#calendar').evoCalendar({
                settingName: settingValue
            })
        })
        </script>

    </body>
</html>

settings

settings type default description options
theme string Default Define calendar's theme Default, Midnight Blue, Orange Coral, Royal Navy
language string 'en' Calendar's language en, es, de, pt
format string 'mm/dd/yyyy' Date format Date string format
titleFormat string 'MM yyyy' Date format for calendar title Date string format
eventHeaderFormat string 'MM d, yyyy' Date format for calendar event's title Date string format
firstDayOfWeek number 0 Displayed first day of the week 0 (Sunday) - 6 (Saturday)
todayHighlight boolean false Highlight today's date in calendar true, false
sidebarDisplayDefault boolean true Set default visibility of sidebar true, false
sidebarToggler boolean true Display the button for toggling the sidebar true, false
eventDisplayDefault boolean true Set default visibility of event lists true, false
eventListToggler boolean true Display the button for toggling the event lists true, false
calendarEvents array null Defined events for calendar to show Array of events

settings example


// calendarEvents
$('#calendar').evoCalendar({
    todayHighlight: true,
    calendarEvents: [
        {
            id: "4hducye", // Event's id (required, for removing event)
            name: "Today's Event", // Name of event
            description: "Lorem ipsum dolor sit amet..", // Description of event (optional)
            date: new Date(), // Date of event
            type: "holiday", // Type of event (event|holiday|birthday)
            color: "#63d867" // Event custom color (optional)
            everyYear: true // Event is every year (optional)
        }
    ]
})

methods

method argument description
setTheme string Set/Change theme
toggleSidebar boolean (optional) Toggle sidebar display
toggleEventList boolean (optional) Toggle event list display
getActiveDate none Get the selected date
getActiveEvents none Get the event(s) of selected date
selectYear number Select year programmatically
selectMonth number (0-11) Select month programmatically
selectDate string Select date programmatically
addCalendarEvent array/object Add Calendar event(s)
removeCalendarEvent array/string Remove event(s) by their id
destroy none Well.. destroy the calendar

methods example


// loading...

events

events argument description
selectDate newDate, oldDate Fires after selecting date
selectEvent activeEvent Fires after selecting event
selectMonth activeMonth, monthIndex Fires after selecting month
selectYear activeYear Fires after changing year
destroy calendar Fires after destroying calendar

events example


// loading...