jQuery Flat Calendar Plugin Demo
This widget is a part of Flatmin Responsive Framework by Eric Wennerberg
This widget is dependent on Jquery
If you like this plugin and want to follow the development, follow me on twitter
<link href="c.css" rel="stylesheet">
The plugin can now be called with JS only. Check out documentation for how.
The plugin is now harnessing the full power of flexbox. But dont worry its compitable with old browsers aswell.
In this version you must use the format YYYYMMDD, example 20130101. This is in order to fix problems with some months. Thanks to web frogs for pointing this out.
Name of days
Just as shown in the example above you can now option to show the name of the days. Check out usage section to learn how.
Included in the zip is a SASS-file in order to make customizations easier.
The widget will look great, no matter the width of the container.
The css file contains code to change between 4 color swatches. Its also possible to add your own color with a little css-knowledge.
Months are loaded/unloaded as theyre toggled on/off.
Combined filesize is ~10kb.
No Month Range
The only limitation is before 1970 (Epoch). Everything else can be displayed.
Easily add events with certain properties such as starting time, ending time, location and name.
Possible to style it with the help of the included css files.
This will result in a calendar without any events.
In order to show name of the days add the data showdays="true" to the calendar element. Like this:
<div class="calendar" data-showdays="true" ></div>
Calendar with events
<div data-role="day" data-day="20130910">
<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>
Within the calendar container you can add events to be processed by the script. Each event must be wrapped in a container together with other events on the same day just as in the example.
The data-day value should containg leading zeroes.
<div data-role="day" data-day="201311">
This is incorrect and should instead be:
<div data-role="day" data-day="20130101">
Calendar with events
Where array is, surprisingly, an array containing the events. Example:
The dates should contain leading zeroes.
You can pass along an option-object in the scriptcall. Accepted options are color, and showdays. Example:
These options are the default.
<div class="calendar" data-color="red" ></div>
This will result in a red calendar, like the one on the top of this page. The color is set to red by default.