Click here to Skip to main content
Click here to Skip to main content

HTML5 Event Calendar/Scheduler

, 9 Nov 2014 Apache
Rate this:
Please Sign up or sign in to vote.
Weekly HTML5 event calendar with CSS themes, drag and drop support, date navigator. PHP/AJAX and ASP.NET MVC backends.

HTML5 Event Calendar

In this article we will build a simple HTML5 event calendar web application. The client-side (HTML5/JavaScript) part is universal. We will use sample PHP and ASP.NET MVC backends.

Features:

  • Weekly HTML5 event calendar/scheduler
  • Changing the calendar using a date navigator (on the left side)
  • Drag and drop event creating, moving and resizing
  • Changing the look in a single click using a CSS theme
  • PHP AJAX backend
  • ASP.NET MVC AJAX backend

We will use DayPilot Lite for JavaScript [javascript.daypilot.org] to build the event calendar. DayPilot Lite for JavaScript is open-source - available under Apache License 2.0.

New (Version 1.1)

HTML5 event calendar with duration bar support

March 13, 2014: The new 1.1 version of the DayPilot Lite HTML5 event calendar supports duration bar (an indicator of real calendar event duration on the left side of the event). It is enabled by default and you can style it using the CSS theme.

Scheduler CSS Themes

DayPilot Lite for JavaScript comes with several pre-built CSS themes.

You can create your own theme using the online CSS theme designer [themes.daypilot.org].

Default CSS Theme

HTML5 Event Calendar - Default CSS Theme

Green CSS Theme

HTML5 Event Calendar - Green CSS Theme

Google-Like CSS Theme

HTML5 Event Calendar - Google-Like CSS Theme

Traditional CSS Theme

HTML5 Scheduler - Traditional CSS Theme

Transparent CSS Theme

HTML5 Scheduler - Transparent CSS Theme

White CSS Theme

HTML5 Scheduler - White CSS Theme

Step 1: Event Calendar JavaScript Library

Include daypilot-all.min.js. No other dependecies are required for the basic look (the default CSS theme is embedded).

<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script> 

Step 2: Event Calendar Placeholder

Add a placeholder <div> to the HTML5 page:

<div id="dp"></div> 

Step 3: Initialize the Scheduler

Initialize the scheduler using Daypilot.Calendar class:

<script type="text/javascript">
var dp = new DayPilot.Calendar("dp");
dp.viewType = "Week";
dp.init();
</script>

These simple steps will render an empty scheduler:

HTML5 Event Calendar (Empty)

Step 4: Load Data

We will load the data to the event calendar using a simple AJAX call:

function loadEvents() {
  $.post("backend_events.php", // use "backend/events" for ASP.NET MVC
  {
    start: dp.visibleStart().toString(),
    end: dp.visibleEnd().toString()
  }, 
  function(data) {
    dp.events.list = data;
    dp.update();
  });
}

We will detect the currently-visible date range using visibleStart() and visibleEnd() methods and send it to backend_events.php as parameters.

The backend_event.php endpoint returns the calendar event data in the following format:

[
  {
    "id":"1",
    "text":"Calendar Event 1",
    "start":"2014-02-25T10:30:00",
    "end":"2014-02-25T16:30:00"
  },
  {
    "id":"2",
    "text":"Calendar Event 2",
    "start":"2014-02-24T09:00:00",
    "end":"2014-02-24T14:30:00"
  },
  {
    "id":"3",
    "text":"Calendar Event 3",
    "start":"2014-02-27T12:00:00",
    "end":"2014-02-27T16:00:00"
  }
]

PHP backend (backend_events.php):

<?php
require_once '_db.php';
    
$stmt = $db->prepare('SELECT * FROM events WHERE NOT ((end <= :start) OR (start >= :end))');

$stmt->bindParam(':start', $_POST['start']);
$stmt->bindParam(':end', $_POST['end']);

$stmt->execute();
$result = $stmt->fetchAll();

class Event {}
$events = array();

foreach($result as $row) {
  $e = new Event();
  $e->id = $row['id'];
  $e->text = $row['name'];
  $e->start = $row['start'];
  $e->end = $row['end'];
  $events[] = $e;
}

echo json_encode($events);

?>

ASP.NET MVC backend (BackendController.cs)

public ActionResult Events(DateTime? start, DateTime? end)
{

  var events = from ev in db.Events.AsEnumerable() where !(ev.end <= start || ev.start >= end) select ev;

  var result = events
  .Select(e => new JsonEvent() { 
      start = e.start.ToString("s"),
      end = e.end.ToString("s"),
      text = e.name,
      id = e.id.ToString()
  })
  .ToList();

  return new JsonResult { Data = result };
} 

Read more about loading the calendar event data [doc.daypilot.org].

Step 4: Event Moving

HTML5 Event Calendar - Drag and Drop Moving

The drag and drop user actions (selecting a time range, event moving, event resizing) are enabled by default in the scheduler.

We just need to add custom handler to submit the changes to the server side using an AJAX call.

JavaScript event handler

dp.onEventMoved = function (args) {
  $.post("backend_move.php",   // use "backend/move" for ASP.NET MVC
    {
        id: args.e.id(),
        newStart: args.newStart.toString(),
        newEnd: args.newEnd.toString()
    }, 
    function() {
        console.log("Moved.");
    });
};

PHP backend (backend_move.php)

<?php
require_once '_db.php';

$insert = "UPDATE events SET start = :start, end = :end WHERE id = :id";

$stmt = $db->prepare($insert);

$stmt->bindParam(':start', $_POST['newStart']);
$stmt->bindParam(':end', $_POST['newEnd']);
$stmt->bindParam(':id', $_POST['id']);

$stmt->execute();

class Result {}

$response = new Result();
$response->result = 'OK';
$response->message = 'Update successful';

echo json_encode($response);

?>

ASP.NET MVC backend (BackendController.cs)

public ActionResult Move(int id, string newStart, string newEnd)
{
  var toBeResized = (from ev in db.Events where ev.id == id select ev).First();
  toBeResized.start = Convert.ToDateTime(newStart);
  toBeResized.end = Convert.ToDateTime(newEnd);
  db.SubmitChanges();

  return new JsonResult { Data = new Dictionary<string, object> { { "id", toBeResized.id } } };
} 

Read more about drag and drop event moving [doc.daypilot.org].

Step 5: Apply the CSS Theme

HTML5 Event Calendar - CSS Theme

If you want to use a custom CSS theme you need to include the stylesheet:

<link type="text/css" rel="stylesheet" href="themes/calendar_transparent.css" /> 

And set the theme property during initialization:

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Week";
  dp.theme = "calendar_transparent";
  dp.init();
</script> 

You can choose one of the included CSS themes or you can create your own using the online CSS theme designer.

Event Calendar Localization

HTML5 Event Calendar Localization

You can switch the event calendar locale easily using .locale property:

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.locale = "de-de";
  dp.init();
</script>  

The calendar includes built-in support for the following locales:

  • ca-es
  • cs-cz
  • da-dk
  • de-at
  • de-ch
  • de-de
  • de-lu
  • en-au
  • en-ca
  • en-gb
  • en-us
  • es-es
  • es-mx
  • eu-es
  • fi-fi
  • fr-be
  • fr-ch
  • fr-fr
  • fr-lu
  • gl-es
  • it-it
  • it-ch
  • ja-jp
  • nb-no
  • nl-nl
  • nl-be
  • nn-no
  • pt-br
  • pl-pl
  • pt-pt
  • ru-ru
  • sk-sk
  • sv-se
  • zh-cn

You can also create and register your own locale:

DayPilot.Locale.register(
  new DayPilot.Locale('en-us', 
  {
    'dayNames':['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    'dayNamesShort':['Su','Mo','Tu','We','Th','Fr','Sa'],
    'monthNames':['January','February','March','April','May','June','July','August','September','October','November','December'],
    'monthNamesShort':['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    'timePattern':'h:mm tt',
    'datePattern':'M/d/yyyy',
    'dateTimePattern':'M/d/yyyy h:mm tt',
    'timeFormat':'Clock12Hours',
    'weekStarts':0
  }
)); 

Changing the Scheduler Date

You can use the DayPilot.Navigator control (on the left in the screenshot above) to change the scheduler dates (the visible week):

<div id="nav"></div>

<script type="text/javascript">
  var nav = new DayPilot.Navigator("nav");
  nav.showMonths = 3;
  nav.skipMonths = 3;
  nav.selectMode = "week";
  nav.onTimeRangeSelected = function(args) {
      dp.startDate = args.day;
      dp.update();
      loadEvents();
  };
  nav.init();
</script>

See Also

History

  • November 10, 2014: Doc links added.
  • July 17, 2014: Navigator code for switching the visible week added
  • May 15, 2014: backend_events.php code listing fixed ($_POST instead of $_GET)
  • April 1, 2014: DayPilot Lite for JavaScript 1.1 SP1 released, localization example added
  • March 17, 2014: Sample ASP.NET MVC5 backend added (download and code listing)
  • March 13, 2014: DayPilot Lite for JavaScript 1.1 released
  • February 24, 2014: Initial version

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0

Share

About the Author

Dan Letecky

Czech Republic Czech Republic
My open-source event calendar/scheduling AJAX controls:
 
DayPilot for JavaScript/HTML5/jQuery
DayPilot for ASP.NET
DayPilot for MVC
DayPilot for Java

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalSibeesh KV24-Sep-14 0:19 
GeneralRe: My vote of 5 PinmemberDan Letecky9-Nov-14 23:58 
GeneralRe: My vote of 5 PinprofessionalSibeesh KV10-Nov-14 0:16 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun19-May-14 21:22 
GeneralRe: My vote of 5 PinmemberDan Letecky19-May-14 21:43 
GeneralMy vote of 5 PinmemberJasonMacD1-Apr-14 8:52 
GeneralRe: My vote of 5 PinmemberDan Letecky1-Apr-14 9:38 
QuestionHow to set an upper limit of an event [modified] Pinmemberfranva00823-Mar-14 6:04 
AnswerRe: How to set an upper limit of an event PinmemberDan Letecky31-Mar-14 23:57 
Questionpop-up modal does not show at the center of my screen [modified] Pinmemberfranva00820-Mar-14 2:40 
AnswerRe: pop-up model does not show at the center of my screen PinmemberDan Letecky20-Mar-14 3:13 
GeneralRe: pop-up model does not show at the center of my screen Pinmemberfranva00820-Mar-14 4:43 
GeneralRe: pop-up model does not show at the center of my screen PinmemberDan Letecky20-Mar-14 5:10 
GeneralRe: pop-up model does not show at the center of my screen Pinmemberfranva00821-Mar-14 13:24 
GeneralRe: pop-up model does not show at the center of my screen Pinmemberfranva00823-Mar-14 6:50 
GeneralRe: pop-up model does not show at the center of my screen PinmemberDan Letecky24-Mar-14 0:55 
GeneralRe: pop-up model does not show at the center of my screen Pinmemberfranva00827-Mar-14 1:01 
QuestionHow can I use customized event objects/classes. The TimeRangeSelectedArgs only has 2 properties.. Pinmemberfranva00819-Mar-14 5:13 
AnswerRe: How can I use customized event objects/classes. The TimeRangeSelectedArgs only has 2 properties.. PinmemberDan Letecky19-Mar-14 6:17 
GeneralRe: How can I use customized event objects/classes. The TimeRangeSelectedArgs only has 2 properties.. Pinmemberfranva00819-Mar-14 6:35 
GeneralRe: How can I use customized event objects/classes. The TimeRangeSelectedArgs only has 2 properties.. PinmemberDan Letecky19-Mar-14 7:00 
GeneralRe: How can I use customized event objects/classes. The TimeRangeSelectedArgs only has 2 properties.. Pinmemberfranva00819-Mar-14 7:23 
GeneralRe: How can I use customized event objects/classes. The TimeRangeSelectedArgs only has 2 properties.. PinmemberDan Letecky19-Mar-14 7:28 
GeneralRe: How can I use customized event objects/classes. The TimeRangeSelectedArgs only has 2 properties.. Pinmemberfranva00819-Mar-14 8:11 
SuggestionRe: How can I use customized event objects/classes. The TimeRangeSelectedArgs only has 2 properties.. [modified] Pinmemberfranva00819-Mar-14 15:55 
GeneralRe: How can I use customized event objects/classes. The TimeRangeSelectedArgs only has 2 properties.. PinmemberDan Letecky20-Mar-14 5:25 
QuestionTypeAccessException was unhandled by user code Pinmemberfranva00819-Mar-14 1:59 
AnswerRe: TypeAccessException was unhandled by user code PinmemberDan Letecky19-Mar-14 2:07 
GeneralRe: TypeAccessException was unhandled by user code Pinmemberfranva00819-Mar-14 2:21 
GeneralRe: TypeAccessException was unhandled by user code PinmemberDan Letecky19-Mar-14 3:27 
GeneralRe: TypeAccessException was unhandled by user code Pinmemberfranva00819-Mar-14 2:44 
GeneralRe: TypeAccessException was unhandled by user code PinmemberDan Letecky19-Mar-14 2:57 
QuestionThe files in download for ASP.NET backend is damaged Pinmemberfranva00817-Mar-14 19:09 
AnswerRe: The files in download for ASP.NET backend is damaged PinmemberDan Letecky17-Mar-14 22:41 
GeneralRe: The files in download for ASP.NET backend is damaged Pinmemberfranva00818-Mar-14 15:00 
GeneralRe: The files in download for ASP.NET backend is damaged Pinmemberfranva00819-Mar-14 2:28 
GeneralRe: The files in download for ASP.NET backend is damaged PinmemberDan Letecky19-Mar-14 3:25 
AnswerRe: The files in download for ASP.NET backend is damaged PinmemberDan Letecky18-Mar-14 0:20 
QuestionMessage Automatically Removed Pinmemberমোঃ নূরে আলম17-Mar-14 7:00 
GeneralMy vote of 5 Pinprofessional@AmitGajjar3-Mar-14 1:13 
GeneralRe: My vote of 5 PinmemberDan Letecky3-Mar-14 1:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411023.1 | Last Updated 10 Nov 2014
Article Copyright 2014 by Dan Letecky
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid