AngularJS Event Calendar/Scheduler
Dan Letecky,
Download Tutorial Source Code/PHP (AngularJS, PHP, SQLite)
Download Tutorial Source Code/ASP.NET MVC (AngularJS, Visual Studio 2013, ASP.NET MVC 5, SQL Server)
Download DayPilot Lite for JavaScript [javascript.daypilot.org]
This article shows how to use the AngularJS event calendar (scheduler) from the open-source DayPilot Lite for JavaScript [javascript.daypilot.org] library to build a calendar/scheduling web application.
Drag and drop event creating
Drag and drop event moving
Drag and drop event resizing
Event editing and deleting using a modal dialog
Switching between day and week views
Date navigator for switching the visible day/week
Automatic binding to a shared event data object using AngularJS
AJAX notification calls to update the database (the server part is implemented in PHP and in ASP.NET MVC)
Open-source (Apache License 2.0)
The server part is very light-weight and is based on simple JSON messages.
AngularJS Event Calendar
DayPilot Lite for JavaScript lets you create the event calendar/scheduler UI using JavaScript. The latest release (version 1.2 [javascript.daypilot.org]) adds an AngularJS plugin.
The plugin provides element-based AngularJS directives that will let you create the calendar UI components easily:
In this article we will use the
and
directives to create a simple scheduling application with the following components:
daily event calendar
weekly event calendar
date navigator
See also the AngularJS event calendar documentation [doc.daypilot.org].
AngularJS Scheduler Day View
We will add the daily scheduler using
AngularJS element.
The configuration is set using dayConfig object (daypilot-config="dayConfig")
The events are set using events object (daypilot-events="events")
Hide Copy Code
AngularJS Scheduler Week View
We will use another instance of the scheduler to create the week view. The configuration is very similar. The only difference is that we will keep this instance hidden (visible: false).
Hide Copy Code
Loading Events
Since both calendar views point to the same event data source (daypilot-events="events") all we need to do to fill both instances with data is to load the events to $scope.events:
Hide Copy Code
PHP backend (backend_events.php)
Hide Shrink Copy Code
ASP.NET MVC backend (BackendController.cs)
Hide Shrink Copy Code
Sample JSON response:
Hide Copy Code
Switching Day/Week View
Now we will add two buttons ("Day" and "Week") that will let the user switch between the day and week calendar view:
Hide Shrink Copy Code
Date Navigator
The next step will be adding a date navigator control using
AngularJS element. It will let us switch the visible date:
Hide Shrink Copy Code
CSS Themes
You can build your own CSS theme for DayPilot AngularJS Event Calendar using the online CSS theme designer. It is a WYSIWYG editor that lets you create themes by specifying styles for the calendar elements (events, headers, time cells).
History
October 25, 2015: CSS Theme Designer added (event calendar, navigator supported), DayPilot Lite for JavaScript 1.2 SP2 available
April 26, 2015: Minor improvements
March 23, 2015: ASP.NET MVC 5 backend added
March 16, 2015: Initial release
License
This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0