Creating An Upcoming Events App with jQuery and moment.js - Eventify

Eventify is a tiny jQuery & moment.js based plugin for automatically generate an event list that shows upcoming events like a calendar.

How to use it:

1. Load the Font Awesome 4 for the font icons.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

2. Load the required eventify.css for the basic styles & themes.

<link rel="stylesheet" href="css/eventify.css">

3. Load the jQuery library together with the moment.js and eventify.js in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="js/eventify.js"></script>

4. Add your events to the event list following the Html structure as follows.

<div id="event-list">

  <div class="ei-event" data-start="2014-12-24 17:30" data-end="2014-12-24 08:30" data-loc="London">
    <div class="ei-name">Event 1</div>
    <div class="ei-description">Description 1</div>
  </div>
  
  <div class="ei-event" data-start="2013-12-26 16:30" data-end="2014-12-29 19:30" data-loc="Paris">
    <div class="ei-name">Event 2</div>
    <div class="ei-description">Description 2</div>
  </div>
  
  <div class="ei-event" data-start="2014-12-20 16:30" data-end="2014-12-26 11:30" data-loc="New York">
    <div class="ei-name">Event 3</div>
    <div class="ei-description">Description 3</div>
  </div>
  
</div>

5. Initialize the event list.

$( "#event-list" ).eventify({

  theme: "dark", // dark or elegant
  locale: "en"

});

Change logs:

2014-12-28

• css and theme fix

2014-12-27

• added dotdotdot script, fixed bug with equations

2014-12-22

• css file name changed to eventify.css
• added arrows navigation functionality

---

This awesome jQuery plugin is developed by dellax. For more Advanced Usages, please check the demo page or visit the official website.