Easy jQuery Based Flat Calendar Widget - Flat Calendar

Flat Calendar is a simple and fast jQuery plugin for implementing a flat styled and responsive calendar with events support. Ideal for creating a clean and bea event calendar widget on your flat website & app.

Basic Usage:

1. Include the latest jQuery javascript library on your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

2. Include jQuery Flat Calendar files on the web page

<link href="c.css" rel="stylesheet" type="text/css">
<script src="calendar.js"></script>

3. Create a wrapper where you want to put your calendar widget in.

<div class="demo"></div>

4. The CSS for the wrapper

.demo {
text-align: center;
height: 100%
}
*:not(pre) {
vertical-align: top;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}

5. Create a event calendar using Html5 data-* attributes. Please note that the data-day value shouldn't containg leading zeroes.

<div class="calendar" data-color="green">
<div data-role="day" data-day="2013910">
<div data-role="event" data-name="This is an event" data-start="9.00" data-end="9.30" data-location="The Web"></div>
<div data-role="event" data-name="This is also an event" data-start="10.00" data-end="11.00" data-location="At Home"></div>
</div>
</div>

6.Color Swatches

data-color="red"
data-color="blue"
data-color="green"
data-color="yellow"

Change log:

v1.2.3 (2013-10-31)

• updated to the latest version

---

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