5+ AngularJS Calendars Examples

Handsontable JavaScript Spreadsheet Most popular component for web apps
Sam Deering Sam Deering (updated ) calendar

Quick post today -> Here are 5 examples of AngularJS calendars, widgets and UI plugins. Enjoy! 🙂

Update 15/05/2016: I’ve added a couple more premium calendars to the list.

1. Angular Bootstrap Calendar

A port of the bootstrap calendar widget to AngularJS (no jQuery required!).
A port of the bootstrap calendar widget to AngularJS (no jQuery required!).
Github Demo

2. Angular UI Calendar

A complete AngularJS directive for the Arshaw FullCalendar. FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.
A complete AngularJS directive for the Arshaw FullCalendar. FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below.
It uses AJAX to fetch events on-the-fly and is easily configured to use your
own feed format. It is visually customizable with a rich API.
Github Demo

3. Building an AngularJs Calendar

This intermediate AngularJS mini tutorial is part 1 of a 5 part series with each teaching you how to build something you can use on your web page. This tutorial will teach you how to make a calendar using AngularJS directives among other tools.
This intermediate AngularJS mini tutorial is part 1 of a 5 part series with each teaching
you how to build something you can use on your web page. This tutorial will teach
you how to make a calendar using AngularJS directives among other tools.
Tutorial Demo

4. KenduUI Angular Calendar

The Kendo UI Calendar widget renders a graphical calendar that supports navigation and selection. It also supports custom templates for its "month" view and configuration options for minimum and maximum date, start view and the depth of the navigation.
The Kendo UI Calendar widget renders a graphical calendar that supports navigation and selection. It also supports custom templates for its “month” view and configuration
options for minimum and maximum date, start view and the depth of the navigation.
Docs Demo

5. Daily Pilot Angular Calendar Pro

DayPilot includes an Event Calendar AngularJS plugin that will let you use the event calendar component with AngularJS and take advantage of the smooth data binding.
DayPilot includes an Event Calendar AngularJS plugin that will let you use the event calendar component with AngularJS and take advantage of the smooth data binding.
Docs Demo

Premium AngularJS Calendar Plugins

Events Calender using Angularjs with Nodejs and MySQL

Events Calender using Angularjs with Nodejs and MySQL
Materialize CSS framework, Angularjs calender directive, Materialize clock-picker, Materialize color-picker, Drag and Drop events and then edit, Materialize datepicker with month and year selectable, Babel javascript, Can be extended to full Admin panel, Socket.IO with live data broadcasting
View

Mean Stack – Full Calender for events using Angularjs with Nodejs and MongoDB

Mean Stack - Full Calender for events using Angularjs with Nodejs and MongoDB
Real time sync data from any client, Authentication with role, Realtime updates – Any changes to database is updated in Realtime, Token expire time, Session management, Login, Change Password, Password encryption with , HA1, Automatic minification, compression, CDNify during deployment, Live reaload while development, Auto selection of resources for development and production, API with role based authentication, SEO optimized title and more.
View

Others we found which may be useful:

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

8 thoughts on “5+ AngularJS Calendars Examples”

  2. Pingback: ionic framework, AngularJS에서 사용할 만한 calendar component | Hosik. C.

Leave a Reply to ameanmbot Cancel reply

Your email address will not be published. Required fields are marked *