A new tutorial on creating a HTML5 event calendar using the open-source DayPilot Lite JavaScript library. Includes a sample PHP project. Full source code available for download.
Feb 24, 2014
Weekly HTML5 event calendar in a simle web application (tutorial):
Features:
- Weekly HTML5 event calendar
- Pure JavaScript (no third-party libraries required)
- Open source (Apache License 2.0)
- Drag and drop event moving
- Drag and drop event resizing
- CSS themes
- Easy initialization
- Compatible with jQuery (jQuery 1.x, jQuery 2.x)
Full source code is available for download.
Quick initialization sample (JavaScript):
<script type="text/javascript">
var dp = new DayPilot.Calendar("dp");
dp.viewType = "Week";
dp.init();
</script>Loading events sample (JavaScript):
<script type="text/javascript">
var dp = new DayPilot.Calendar("dp");
dp.viewType = "Week";
dp.events.list = [
{
"id":"5",
"text":"Calendar Event 5",
"start":"2014-02-25T10:30:00",
"end":"2014-02-25T16:30:00"
},
{
"id":"6",
"text":"Calendar Event 6",
"start":"2014-02-24T09:00:00",
"end":"2014-02-24T14:30:00"
},
{
"id":"7",
"text":"Calendar Event 7",
"start":"2014-02-27T12:00:00",
"end":"2014-02-27T16:00:00"
}];
dp.init();
</script>Transparent CSS Theme
Green CSS Theme
White CSS Theme
