Get new jQuery plugins just once a week

×

simple-calendar

FavoriteLoadingAdd to favorites

December 29, 2014

simple-calendar | jQuery plugin to create an event calendar & datepicker.

Simple-Calendar is jQuery plugin to make it easier for you to create an event calendar and a datepicker.

Created by Philip Ehsing

Download

simple-calendar

event-datepicker

jQuery.Simple-Event-Calendar

jQuery.Simple-Event-Calendar make it easier for you to create an calendar. Check out the demo!

Install

bower install simpleeventcalendar

Setup

<!-- You'll need jquery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- and you'll need to include equalheight -->
<script src="simplecalendar.js"></script>

<!-- and you'll need to include style.css -->
<script src="style.css"></script>

<!-- and all you'll need to do is add some divs for event-->
<div class="day-event" date-month="2" date-day="16" date-year="2016" data-number="1">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">Lorem ipsum 3</h2>
<span class="date">2014-12-16</span>
<p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok.</p>
<button class="read-more">Read more</button>
</div>

Load from json

"events": [{
  "month": "2",
  "day": "12",
  "year": "2016",
  "title": "Lorem ipsum",
  "description": "Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam."
  }]
}

Personal list

alt tag

JSON example

alt tag

Updates

simple-calendar

Related posts:

Chibi
Grid
progressBarWars

To install using Bower
bower install simpleeventcalendar

simple-calendar

http://jquer.in/wp-content/uploads/2014/12/simple-calendar.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever