Easy Event Navigation

Features

How to use it

The main files of this plugin are evendar.min.js and evendar.min.css, which are generated by compiling and minifying evendar.js and evendar.css. The plugin relies on jQuery and moment.js libraries, also needs to be included before including evendar.min.js.

The font used on this plugin is Roboto, and the icons are provided by Font Awesome which are included remotely from their CDN's. You can change it anyway you want.

The example configuration which can be found in the base index file is:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.4.min.js" type="text/javascript"><\/script>')</script>
<!-- .evendar includes -->
<link href="build/css/evendar.min.css" rel="stylesheet"/>
<script src="build/js/moment.min.js"></script>
<script src="build/js/evendar.min.js"></script>
<!-- .end evendar includes -->
`

Then, to attach a evendar object to an element you desire, use this:

$(".evendar").evendar({
  events: [], // or eventsUrl is required
  format: "" // the date format you use in your events, also required
});

or the element's data-plugin-options property.

<input class="evendar" data-plugin-options='{"events":[],"format":""}' name="calendar-input" type="text" value="3"/>

Note: To set the default event which you want to be selected at initialization, set the id parameter of the event as the input value.

Once initalized, you can access the evendar object like this:

var evendar = $(".evendar:eq(3)").data("evendar");
evendar.config.startDate = new Date();
evendar.reDrawCalendars();

Properties

Once you've got the evendar instance object, you can access these properties:

• elem [DOM node object]: The HTML dom node which the instance is created on.
• $elem [jQuery Object]: jQuery object of the dom node. Equals to $(evendar.elem)

For example,

  var evendar = $("#elem1").evendar();
  // evendar.elem will be equal to document.getElementById("elem1") or $("#elem1").get(0);
  // evendar.$elem will be equal to $("#elem1");

• config [JS Object]: The instance's configuration object. Consists of merging default values and user defined settings. The details of it is explained in the Options section.

These properties are also defined, but not recommended to tinker on.

• container [jQuery Object]: This refers to the outermost container element of the instance dropdown or inline instance and the input itself.
• header [jQuery Object]: This refers to the header part of the plugin.
• button [jQuery Object]: If not defined as inline, you can access the trigger button with this.
• footer [jQuery Object]: This refers to the footer part, - not the mobile buttons part - the ranges part of the plugin.
• input [jQuery Object]: This refers to the first child of the container, which contains everything except the input which is evendar instantiated on.

Configuration

These are the options you can set with the javascript plugin initialization object, or with the data-plugin-options html attribute on the input element, or within the events by directly modifying the evendar.config object.

• currentDate [moment object|javascript Date Object|string]: the selected start date, initially today is selected if not defined inside the input's value, or any of the initialization configuration methods. default: moment().startOf('day')
• format [string]: the default format for showing in input, defaults to short date format of locale, for all possible inputs, look here: https://momentjs.com/docs/#/displaying/format/ default: "L"
• dayLabelFormat [string]: the format which you want to show in the event header , default "dddd, D MMMM YYYY".
• hourLabelFormat [string]: the hour format which you want to show in event items and event grid. default: HH:mm
• shortDateLabelFormat [string]: the short date format which you want to show in event items. default: DD/MM
• calendarCount [integer]: how many calendars will be shown in the plugin screen, default 2
• inline [boolean]: display as an inline input replacement instead of input dropdown. default: false
• minDate [moment object|javascript Date Object|string|null]: minimum selectable date, default null (no minimum)
• maxDate [moment object|javascript Date Object|string|null]: maximum selectable date, default null (no minimum)
• startOnMonday [boolean] // if you want to start the calendars on Monday, set this to true. Note that if the locale already starts on Monday, this setting will be ignored. default false
• container [string]: the selector of the dropdowns container, default "body"
• oneCalendarWidth [integer]: the width of one calendar, if two calendars are shown, the input width will be (2 x this setting). default 230
• enableKeyboard [boolean]: enables keyboard navigation on the calendars. default true
• showOn["bottom"|"top"]: dropdown placement position relative to input element, will be adjusted to the viewport, default "bottom"
• autoAlign [boolean]: enables auto alignment vertically when viewport isn't enough for the direction for the dropdown to open. default true
• locale [string]: moment locale setting, for more information: https://momentjs.com/docs/#/i18n/changing-locale/, and for a list of available locales: https://momentjs.com/ (bottom of the page) default moment.locale() (the current locale of the system)
• target: [jquery object] the element to update after selection, if it's null, the element that is instantiated on will be updated. default null
• autoCloseOnSelect [boolean]: On instances that are not displayed inline, this setting is used to automatically close the dropdown when a selection is made. Default: false
• cancelLabel [string] : The text displayed on the cancel button on the footer, default "Cancel"
• clearLabel [string]: The Clear button label, default "Clear"
• closeLabel [string]: The Clear button label, default "Close"
• applyLabel [string]: The apply button label, default "Select"
• namelessLabel [string]: If event name is not provided, this text will be shown instead, default "[unnamed]"
• buttonDefaultText [string]: The text which is shown on the trigger button. default: "Select Event"
• goToEventLabel [string]: The html shown in the go to event button. Default font awesome right arrow
• goToEventTooltipText [string]: The tooltip text of go to event button. Default: "Go to event page"
• enableMonthSwitcher [boolean]: Enables the month switcher when clicking on month names. Default: true
• enableYearSwitcher [boolean]: Enables the year switcher when clicking on years. Default: true

• events [array]: The events which will be processed in this plugin, default []

  Event structure:

    events: [
        {
            // id of the event, required
            id: 1,
            // name/title of the event, if not provided, it'll show the defined `namelessLabel` in the config
            name: "Test event",
            // starting time of the event, required
            startDate: "14/05/2017 12:00",
            //ending time of the event
            endDate: "14/05/2017 22:00",
            // the part of the content you wish to show on the list, accepts HTML
            excerpt: "Test excerpt",
            // the content you want to show on the details page, accepts HTML
            content: "Test content, a little longer than the excerpt",
            // the link to the full event page in the description view
            link: "http://www.example.com/event/1",
            // where the link will open, accepted values: "_blank" (new page), "_self" (same page), "_parent" (parent document), "_top" (outermost document), "[framename]" (desired frame)
            target: "_blank",
            // where the event will take place
            place: "Sample Arena @ Sampletown",
            // the event image shown in the description (on error or not defined, it'll revert to the default image defined in config)
            image: "/events/sample.png",
        },
        ...
    ]
  

• eventsUrl [string]: The source URL which contains the events. If this is provided, the events object will be overwritten. default null

• showDefaultEvent [boolean]:
• defaultEvent [object]: Defines the properties of the default event, currently only label member is used. Will be extended later. Default: { label: "No events for today" }
• defaultEventClickable [boolean]:
• defaultView [string] (grid|list): The default view type which will be shown when the calendar is displayed. Default: "list"
• staticBoxHeight [boolean]: If you want static calendar height (which doesn't change when contents change), set this to true. Default false
• boxHeight [integer]: If staticBoxHeight parameter is set to true, you can define the static height of the event box with this parameter. Default null
• enableGridView [boolean]: If you don't want users to see the grid view as an option on the titlebar, set this to false. Default: true
• enableListView [boolean]: If you don't want users to see the list view as an option on the titlebar, set this to false. Default true
• enableFullView [boolean]: If you don't want users to see the full list view as an option on the titlebar, set this to false. Default true
• enableMinimize [boolean]: If you don't want users to have the ability to expand the calendars and hide the events, set this to false. Default: true
• enableMaximize [boolean]: If you don't want users to have the ability to expand the event box and hide the calendars, set this to false. Default: true
• defaultEventImage[string]: The path to the placeholder image when no image is provided or the provided image doesn't exist. Default: "../assets/noimage.png"
• defaultEventColor [string]: The color assigned to the events which have no color property. Default:
  #74d3ae
• showEventDetails [boolean]: When clicked to the event, if this is set to false, it'll select the event directly. If not, it'll show you the event details panel, and then you'll select the event with the button on the details page. default true
• showGoToEventLink [boolean]: Whether to show the "go to event page" button on the event details page. default true
• showAddEventLink [boolean]: Shows the "Add new Event" button on the desired location. When this is clicked, onAddButtonClick event will be called. default true
• addNewLabel [string]: The string on the add button, default  Add New Event
• showAddButtonOn [string] (middle|bottom): The position of the "Add New Event" button, default false
• numericMonthSwitcher [boolean]: Displays numbers instead of month names in month switcher panel, default false

Available Events

• onbeforeselect [function]: event which is triggered before selecting the event. The return value decides whether the selection will happen or not. Returning false will prevent the input to update.

  Prototype:

    onbeforeselect: function(evendar, event){
      // evendar: evendar object instance
      // event: event object
      return true; // false prevents update
    }
  

• onafterselect [function]: event which is triggered after selecting the event ( the input value changed )

  Prototype:

    onafterselect: function(evendar, event){
      // evendar: evendar object instance
      // event: event object
    }
  

• onbeforeshow [function]: event which is triggered before showing the dropdown

  Prototype:

    onbeforeshow: function(evendar){
      // evendar: evendar object instance
    }
  

• onbeforehide [function]: event which is triggered before hiding the dropdown

  Prototype:

    onbeforehide: function(evendar){
      // evendar: evendar object instance
    }
  

• onaftershow [function]: event which is triggered after showing the dropdown

  Prototype:

    onaftershow: function(evendar){
      // evendar: evendar object instance
    }
  

• onafterhide [function]: event which is triggered after hiding the dropdown

  Prototype:

    onafterhide: function(evendar){
      // evendar: evendar object instance
    }
  

• new onbeforedaychange [function]: event which fires before changing the current day. The return value decides whether the day will be changed or not.

  Prototype:

    onbeforedaychange: function(evendar, clickedDay){
      // evendar: evendar object instance
      // clickedDay : moment.js object of the clicked day
      return true; // false disables changing the day
    }
  

  • onbeforemonthchange [function]: event which fires before changing the first calendar month of multiple calendars, or the month of a single calendar. The return value decides whether the month switch will take place.

    Prototype:

    onbeforemonthchange: function(evendar, month, direction){
      // evendar: evendar object instance
      // month : moment.js object of first day of the month selected on the **first** calendar
      // direction: "next" or "prev", shows the month change direction. if `month.month()` is 4, and direction is "prev", next month will be 3.
      return true; // false disables switching
    }
    

• onaftermonthchange [function]: event which fires after changing the first calendar month of multiple calendars, or the month of a single calendar

  Prototype:

    onaftermonthchange: function(evendar, month){
      // evendar: evendar object instance
      // month : moment.js object of first day of the month selected on the first calendar
    }
  

• ondraw [function]: event which fires after redraws in calendar

  Prototype:

    onredraw: function(evendar){
      // evendar: evendar object instance
    }
  

• oninit [function]: event which fires after instance initialization

  Prototype:

    oninit: function(evendar){
      // evendar: evendar object instance
    }
  

• onDefaultEventClick [function]: event which fires when default event click is enabled and clicked, one example use case is redirecting user to a new event registration, or showing a modal etc..

  Prototype:

    onDefaultEventClick: function(evendar, currentDate){
      // evendar: evendar object instance
    }
  

• onAddButtonClick [function]: event which fires when add new event button is enabled and clicked, can be used for different purposes by changing its label.

  Prototype:

    onAddButtonClick: function(evendar, currentDate){
      // evendar: evendar object instance
    }
  

Methods

• fetchInputs [function]: Retrieves the date(s) from the instance holder input and validates them before putting it to it's configuration.

• updateInput [function]: Updates the instance holder input with the instance values and configuration.

• drawNextMonth [function]: Triggers the instance show the next month after the first calendar month as the first calendar.

• drawPrevMonth [function]: Triggers the instance show the previous month before the first calendar month as the first calendar.

• drawEvents [function]: Triggers the event box redraw related to the specified view type in the configuration object.

• reDrawCalendars [function]: Triggers a complete restructuring of the instance. Drawing the container first, then the header, then the calendars, then the footer.

• setViewport [function]: On dropdown instances, if the dropdown falls outside of the viewport (when shown, not scrolled) this function decides and calculates it's new position opposed to its configuration. For example, if the dropdown position is set to bottom and it falls below the page bottom edge, this method makes it appear as it was set to top for once.

• showDropdown [function]: On dropdown and mobile instances, if the dropdown is not visible, this method triggers the show method.

• hideDropdown [function]: On dropdown and mobile instances, if the dropdown is visible, this method hides it.

Examples

Default Event Calendar/Picker

---

Preview:

HTML:

    <input type="text" id="evendar-ex-1" />

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-1").evendar({
        format: "DD/MM/YYYY HH:mm",
        events: exampleData
      });
    </script>

Defining Initial Value

---

Setting the input value to an ID will be enough Preview:

HTML:

    <input type="text" id="evendar-ex-1-1" value="3" />

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-1-1").evendar({
        format: "DD/MM/YYYY HH:mm",
        events: exampleData
      });
    </script>

Changing calendar count

---

Preview:

HTML:

    <input type="text" id="evendar-ex-2" />

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-2").evendar({
        format: "DD/MM/YYYY HH:mm",
        events: exampleData,
        calendarCount: 3
    });
    </script>

Displaying the calendar inline

---

Preview:

HTML:

    <input type="text" id="evendar-ex-3" />

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-3").evendar({
        format: "DD/MM/YYYY HH:mm",
        events: exampleData,
        inline: true
    });
    </script>

Static height (inline)

---

Preview:

HTML:

    <input type="text" id="evendar-ex-3-1" />

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-3-1").evendar({
        format: "DD/MM/YYYY HH:mm",
        events: exampleData,
        inline: true,
        staticBoxHeight: true,
        boxHeight: 700
    });
    </script>

Static height (dropdown)

---

Preview:

HTML:

    <input type="text" id="evendar-ex-3-2" />

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-3-2").evendar({
        format: "DD/MM/YYYY HH:mm",
        events: exampleData,
        inline: false,
        staticBoxHeight: true,
        boxHeight: 700
    });
    </script>

Minimal Event Picker

---

Preview:

HTML:

    <input type="text" id="evendar-ex-4" />

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-4").evendar({
        calendarCount: 1,
        oneCalendarWidth: 300,
        autoCloseOnSelect: true,
        showEventDetails: false,
        format: "DD/MM/YYYY HH:mm",
        events: exampleData
      });
    </script>

Hide event details

---

Preview:

HTML:

  <input type="text" id="evendar-ex-4-1" />

JavaScript:

  <script type="text/javascript">
    $("#evendar-ex-4-1").evendar({
        showEventDetails: false,
        format: "DD/MM/YYYY HH:mm",
        events: exampleData
    });
  </script>

Auto Close on Select (showEventDetails: true)

---

Preview:

HTML:

  <input type="text" id="evendar-ex-5" />

JavaScript:

  <script type="text/javascript">
    $("#evendar-ex-5").evendar({
        autoCloseOnSelect: true,
        format: "DD/MM/YYYY HH:mm",
        events: exampleData
    });
  </script>

Auto Close on Select (showEventDetails: false)

---

Preview:

HTML:

  <input type="text" id="evendar-ex-5-1" />

JavaScript:

  <script type="text/javascript">
    $("#evendar-ex-5-1").evendar({
        showEventDetails: false,
        autoCloseOnSelect: true,
        format: "DD/MM/YYYY HH:mm",
        events: exampleData
    });
  </script>

Defining Min/Max Dates

---

Preview:

HTML:

  <input type="text" id="evendar-ex-6" />

JavaScript:

  <script type="text/javascript">
    $("#evendar-ex-6").evendar({
      minDate: moment().subtract(1, "weeks").startOf("week"),
      maxDate: moment().add(1, "weeks").endOf("week"),
      format: "DD/MM/YYYY HH:mm",
      events: exampleData
    });
  </script>

Inline Events Definition

---

Preview:

HTML:

    <input type="text" id="evendar-ex-7" />

JavaScript:

    <script type="text/javascript">$("#evendar-ex-7").evendar({events: [
        {
        id: 1,
        name: "Eric Clapton confirms three-night London Royal Albert Hall residency",
        startDate: getTime(12, 0, 0), // demo method
        endDate: getTime(15, 59, 0), // demo method
        excerpt: "Slowhand himself has announced a trio of shows at London’s Royal Albert Hall. ",
        description: "<p>Eric will be joined by his band members Paul Carrack, Steve Gadd, Nathan East, Chris Stainton, Sharon White and Michelle John at all dates.</p> <p>The gigs are Eric’s first at the venue since his landmark seven-night stint in 2015 to celebrate his 70th birthday.</p> <p>Once he has completed his May 2017 residency, Eric will have performed at the Royal Albert Hall an astonishing 208 times, including 181 headline shows.</p> <p>Tickets to his 2017 shows are limited to six per customer and go on sale at 9am on Thursday 22nd September.</p> <p>See Eric at the following dates:</p> <p><strong>MAY 2017 </strong><br> London Royal Albert Hall – Mon 22nd<br> London Royal Albert Hall – Wed 24th<br> London Royal Albert Hall – Thu 25th</p>",
        link: "",
        target: "_blank",
        place: "Royal Albert Hall, London",
        image: "../assets/1.jpg"
    },
    {
        id: 2,
        name: "Joe Bonamassa to release ‘Live At Carnegie Hall - An Acoustic Evening’ this summer",
        startDate: getTime(22, 0, 1), // demo method
        endDate: getTime(23, 59, 1), // demo method
        excerpt: "Blues rock hero Joe Bonamassa will release a new live album and concert film this June.",
        description: "<p>The unique gigs saw Joe perform stripped down versions of some of his biggest anthems together with brand new, never-heard-before songs.</p> <p> He was flanked by an eclectic array of musicians including Chinese cellist Tina Guo and Egyptian percussionist and Jimmy Page/Robert Plant collaborator Hossam Ramzy. The line-up also featured Reese Wynans (piano), Anton Fig (Drums) Eric Bazilian (mandolin, hurdy-gurdy, saxophone, acoustic guitar, vocals) and backing vocalists, Mahalia Barnes, Juanita Tippins and Gary Pinto.</p> <p>Joe comments: \"Despite being among the most ambitious things I’ve done – I played with a 9-piece acoustic band – It came out great. It was a typical Joe freak show.\"</p> <p>The full track-listing is as follows:</p> <p><strong>1. This Train<br> 2. Drive<br> 3. The Valley Runs<br> 4. Dust Bowl<br> 5. Driving Towards The Daylight<br> 6. Black Lung Heartache<br> 7. Blue And Evil<br> 8. Livin’ Easy<br> 9. Get Back My Tomorrow<br> 10. Mountain Time<br> 11. How Can A Poor Man Stand Such Times And Live<br> 12. Song Of Yesterday<br> 13. Woke Up Dreaming<br> 14. Hummingbird<br> 15. The Rose</strong></p>",
        color: "#f18f01",
        link: "",
        target: "_blank",
        image: "../assets/2.jpg",
        place: "Carnegie Hall, New York"
    }
    ],
    format: "DD/MM/YYYY HH:mm"
    });</script>

Custom events

---

Preview:

HTML:

    <input type="text" id="evendar-ex-8" />
    <div class="evendarlabel"></div>

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-8").evendar({
        format: "DD/MM/YYYY HH:mm",
        events: exampleData,
        onafterselect: function(evendar, event) {
          evendar.$elem.closest(".well").find(".evendarlabel").text("You have chosen the \"" + event.name + "\" event");
        }
      });
    </script>

Change first day of week

---

Preview:

HTML:

    <input type="text" id="evendar-ex-9" />

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-9").evendar({startOnMonday: true,format: "DD/MM/YYYY HH:mm",
        events: exampleData, });
    </script>

Changing locale

---

Preview:

HTML:

    <input type="text" id="evendar-ex-10" />

JavaScript:

    <script type="text/javascript">
      var userLanguage = navigator.language || navigator.userLanguage;
      if(userLanguage == "en") userLanguage = "fr";
      $("#evendar-ex-10").evendar({locale: userLanguage,format: "DD/MM/YYYY HH:mm",
        events: exampleData});
    </script>

Show & Hide with triggers

---

Preview:

HTML:

    <input type="text" id="evendar-ex-11" />
    <button class="evendar-show">Show Instance</button>
    <button class="evendar-hide">Hide Instance</button>

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-11").evendar({
        format: "DD/MM/YYYY HH:mm",
        events: exampleData
      });
      $(".evendar-show").on("click",function(){
        var evendar = $("#evendar-ex-11").data("evendar");
        evendar.showDropdown();
      });
      $(".evendar-hide").on("click",function(){
        var evendar = $("#evendar-ex-11").data("evendar");
        evendar.hideDropdown();
      });
    </script>

Using inside a modal

---

Preview:

HTML:

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <input type="text" id="evendar-ex-12" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" onclick="$('#myModal').modal('show');" >
      Launch demo modal
  </button>

JavaScript:

    <script type="text/javascript">
      $("#evendar-ex-12").evendar({
        format: "DD/MM/YYYY HH:mm",
        events: exampleData
      });
    </script>

Changelog

• v1.0.0

  • Released initial version.

• v1.0.1

  • fixed css height issues on calendars
  • added place and date information to description and listings
  • fixed css on evendar trigger button
  • documentation sidebar visibility fix
  • added more examples
  • changed images to wikimedia sourced ones

• v1.0.2

  • added destroy method

• v1.1.0

  • updated documentation design
  • fixed linter errors
  • fixed locale issues
  • added tests for evendar
  • removed code obfuscation
  • buttons now don't submit forms
  • added ie10 fixes, optimizations
  • fixed event duplication on document.click
  • fixed close dropdown issues
  • changed code to make clicking on disabled days select start/end date
  • added some transition delays to make it smoother
  • added keyboard navigation (enableKeyboard option) up: previous week down: next week left: previous day right: next day space: select day pageup: previous month pagedown next month shift + pageup: previous year shift + pagedown: next year
  • added easy year switch buttons on year list
  • added inline view support on mobile devices
  • moved event bubbling in one method
  • added "left" "right" display options ("showOn" option, default "bottom")
  • added auto positioning enable/disable flag ("autoAlign" option, default "true")
  • added position recalculation on window scroll and resize events
  • added adjustment for font-size in month selector page
  • fixed tests
  • added IE10 and IE11 fixes

• v1.1.1

  • Repeating day issue caused by daylight saving time activation fixed.

• v1.1.2

  • converted moment instances to unix timestamps on reDrawCells method
  • removed autoprefixer and added postcss plugin for browser compatible CSS
  • fixed visibility issues
  • added evendar-not-in-month class for the days that don't belong to that month
  • Replaced moment's startOf("day") to middleOfDay() extension function to minimize DST change bugs
  • switched from grunt-jasmine to karma test runner

• v1.1.3

  • fixed wrong month start day issue
  • added numericMonthSelector (boolean) flag to display month numbers instead of month names in month selector
  • removed global locale setting, locales are now instance based
  • removed image failed src code to prevent infinite loops when the placeholder image also doesn't exist

• v1.2.0

  • updated jQuery library in demos and readme to v3.1.2
  • updated getDimensions method to more paint and memory friendly version
  • added istanbul test code coverage tools

• v1.2.1

  • fixed dropdown positioning on inner scrolling container other than window
  • fixed calendar title locale bug
  • fixed startOnMonday dismissing the 1st day row when its on sunday
  • added complete event list display mode
  • fixed list type selection bug
  • changed visuals
  • fixed add new button interaction
  • tied a lazy loading mechanism to descriptions

Copyright & Licenses

• Evendar - Event Calendar/Picker
  Copyright (c) Taha PAKSU http://www.tahapaksu.com
  All rights reserved.
  

• Based on jQuery — New Wave JavaScript http://www.jquery.org
  Copyright (c) JS Foundation and other contributors, https://js.foundation/
  Released under jQuery License
  All rights reserved.
  

• Based on Moment.js http://www.momentjs.com
  Copyright (c) JS Foundation and other contributors
  Moment.js is freely distributable under the terms of the MIT license.
  All rights reserved.
  

• Includes hammer.js http://hammerjs.github.io
  Copyright (C) 2011-2014 by Jorik Tangelder (Eight Media)
  hammer.js is freely distributable under the terms of the MIT license.
  All rights reserved.
  

• Includes sample event data from http://www.planetrock.com. All rights reserved.