I'm fairly new to Angular 2 and are trying to get a grip of how to integrate Angular 2 with existing Javascript UI Framework libraries.
Now I'm trying to play with the jQuery plugin http://fullcalendar.io Or actually I want to use the premium add-on called Scheduler.
However I created a simple example in Plunker...
Feel free to use it and enlighten me in how to make it display and also how to respond to clicking on specific events.
https://plnkr.co/edit/eMK6Iy
...the component FullCalendarComponent needs modification of course. Problem is I don't know how.
import {Component} from 'angular2/core'; @Component({ selector: 'full-calendar', template: '<p>Here I would like to see a calendar</p>' }) export class FullCalendarComponent { }
Here is the way I managed to get the Scheduler working in an Angular2 project. I started with the component called Schedule created by PrimeNG as suggested in a comment above by Cagatay Civici.
I had to modify the file scheduler.component.ts like below.
export class Scheduler { // Support for Scheduler @Input() resources: any[]; @Input() resourceAreaWidth: string; @Input() resourceLabelText: string; // End Support for Scheduler // Added functionality @Input() slotLabelFormat: any; @Input() titleFormat: any; @Input() eventBackgroundColor: any; // End added properties @Input() events: any[]; ............ ............ ngAfterViewInit() { this.schedule = jQuery(this.el.nativeElement.children[0]); this.schedule.fullCalendar({ resources: this.resources, resourceAreaWidth: this.resourceAreaWidth, resourceLabelText: this.resourceLabelText, titleFormat: this.titleFormat, slotLabelFormat: this.slotLabelFormat, eventBackgroundColor: this.eventBackgroundColor, theme: true, header: this.header, ...........
Then I had to add the css and script for fullcalendar and scheduler to the index.html.
Before starting, some prerequisites in javascript directory:
jquery-ui.min.js
jquery.min.js
fullcalendar.js
calendar.js
angular.js
bootstrap.js
Files that will be needed in CSS directory:
fullcalendar.css
bootstrap.css
Now create the controller to handle the data and events:-
angular.module('myCalendarApp', ['ui.calendar']); function CalendarCtrl($scope, $http) { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var currentView = "month"; //event source that pulls from google.com $scope.eventSource = { url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic", className: 'gcal-event', // an option! currentTimezone: 'America/Chicago' // an option! }; //This will call onLoad and you can assign the values the way you want to the calendar //here DataRetriever.jsp will give me array of JSON data generated from the database data $http.get('DataRetriever.jsp').success(function(data) { for(var i = 0; i < data.length; i++) { $scope.events[i] = {id:data[i].id, title: data[i].task,start: new Date(data[i].start), end: new Date(data[i].end),allDay: false}; } }); /* //to explicitly add events to the calendar //you can add the events in following ways $scope.events = [ {title: 'All Day Event',start: new Date('Thu Oct 17 2013 09:00:00 GMT+0530 (IST)')}, {title: 'Long Event',start: new Date('Thu Oct 17 2013 10:00:00 GMT+0530 (IST)'),end: new Date('Thu Oct 17 2013 17:00:00 GMT+0530 (IST)')}, {id: 999,title: 'Repeating Event',start: new Date('Thu Oct 17 2013 09:00:00 GMT+0530 (IST)'),allDay: false}, {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false}, {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false}, {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'} ]; //we don't need it right now*/ //with this you can handle the events that generated by clicking the day(empty spot) in the calendar $scope.dayClick = function( date, allDay, jsEvent, view ){ $scope.$apply(function(){ $scope.alertMessage = ('Day Clicked ' + date); }); }; //with this you can handle the events that generated by droping any event to different position in the calendar $scope.alertOnDrop = function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view){ $scope.$apply(function(){ $scope.alertMessage = ('Event Droped to make dayDelta ' + dayDelta); }); }; //with this you can handle the events that generated by resizing any event to different position in the calendar $scope.alertOnResize = function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ){ $scope.$apply(function(){ $scope.alertMessage = ('Event Resized to make dayDelta ' + minuteDelta); }); }; /* //this code will add new event and remove the event present on index //you can call it explicitly in any method $scope.events.push({ title: 'New Task', start: new Date(y, m, 28), end: new Date(y, m, 29), className: ['newtask'] }); $scope.events.splice(index,1);*/ //with this you can handle the click on the events $scope.eventClick = function(event){ $scope.$apply(function(){ $scope.alertMessage = (event.title + ' is clicked'); }); }; //with this you can handle the events that generated by each page render process $scope.renderView = function(view){ var date = new Date(view.calendar.getDate()); $scope.currentDate = date.toDateString(); $scope.$apply(function(){ $scope.alertMessage = ('Page render with date '+ $scope.currentDate); }); }; //with this you can handle the events that generated when we change the view i.e. Month, Week and Day $scope.changeView = function(view,calendar) { currentView = view; calendar.fullCalendar('changeView',view); $scope.$apply(function(){ $scope.alertMessage = ('You are looking at '+ currentView); }); }; /* config object */ $scope.uiConfig = { calendar:{ height: 450, editable: true, header:{ left: 'title', center: '', right: 'today prev,next' }, dayClick: $scope.dayClick, eventDrop: $scope.alertOnDrop, eventResize: $scope.alertOnResize, eventClick: $scope.eventClick, viewRender: $scope.renderView } }; /* event sources array*/ $scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF]; }
Now in your view file(jsp, gsp or html) add the following codes:- This have to be added before the head, AngularJS norms (for more detail go through AngularJS tutorial)
1 2 <html lang="en" ng-app="myCalendarApp" id="top">
This will give the basic calendar structure with 3 agenda buttons.
<div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar)">Day</button> <button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar)">Week</button> <button class="btn btn-success" ng-click="changeView('month', myCalendar)">Month</button> </div> </div> <div class="calendar" ng-model="eventSources" calendar="myCalendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
This is where the alert message will be shown
<div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''"> <h4>{{alertMessage}}</h4> </div>
This will give the list of task for the current date
<ul class="unstyled"> <li ng-repeat="e in events | filter:currentDate"> <div class="alert alert-info"> <a class="close" ng-click="remove($index)"><i class="icon-remove"></i></a> <b> {{e.title}}</b> - {{e.start | date:"MMM dd"}} </div> </li> </ul>
