How to use FullCalendar within Angular 2

后端 未结 5 1338
北海茫月
北海茫月 2021-02-06 05:11

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 th

相关标签:
5条回答
  • 2021-02-06 05:44

    The angular2-fullcalendar is not running with the latest versions of Angular CLI. I opened a bug informing about the solution here: Angular2-fullcalendar is not an NgModule. Unexpected directive CalendarComponent

    0 讨论(0)
  • 2021-02-06 05:48

    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.

    0 讨论(0)
  • 2021-02-06 05:49

    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>
    
    0 讨论(0)
  • 2021-02-06 05:50

    I created an npm package

    npm install angular2-fullcalendar --save
    

    you can use the options input to fully customize the fullcalendar component

    check out the docs here https://github.com/nekken/ng2-fullcalendar

    0 讨论(0)
  • 2021-02-06 06:06

    ng-fullcalendar wraps the fullcalendar module for Angular 2.

    https://github.com/jamaks/ng-fullcalendar

    I do not think wrapping it by yourself is a good idea and ng2-fullcalendar is not under maintain. ng-fullcalendar is a relatively new project and has many active check-in.

    0 讨论(0)
提交回复
热议问题