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

File Size: 536 KB
Views Total: 8918
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//">

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="//"></script>
<script src="//"></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 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 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>

5. Initialize the event list.

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

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


Change logs:


  • css and theme fix


  • added dotdotdot script, fixed bug with equations


  • 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.