Angularjs Full Calendar doesn't display events

Question

I am using that https://github.com/angular-ui/ui-calendar to use the FullCalendar in Angularjs.

It displays the calendar and showing no errors;

<div class="calendar" ng-model="eventSources" id="eventCalendar" calendar="calendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>

but it wont display the events, i am not sure if i am doing it right, but it shows no error and i search through the internet and didnt find a solution yet. Could anybody give me a hint why its not working?

Here is the code snippet:

var calApp = angular.module('usercalapp', ['ui.bootstrap','dialogs','ngCookies','ui.calendar']);

calApp.controller('UserCtrl', function ($scope, $http, $rootScope, $timeout,,$dialogs,$cookieStore,$compile,uiCalendarConfig) 
{
    $scope.eventSources = [];
    $scope.calendar = $('#calendar');

    $scope.uiConfig = {
       calendar : {
          height: 450,
           editable: true,
           header: {
            left: 'month basicWeek basicDay',
            center: 'title',
            right: 'today prev, next'
            },
        dayClick: $scope.alertEventOnClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnSize
    }
};

$scope.cal_func = function()
{
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $scope.eventSources = [
    {
        title: 'All Day Test Event',
        start: new Date(y, m, 1)
    },
    {
        title: 'Long Test Event',
        start: new Date(y, m, d - 5),
        end: new Date(y, m, d - 2)
    },
    {
        title: 'Test Birthday Party',
        start: new Date(y, m, d + 1, 19, 0),
        end: new Date(y, m, d + 1, 22, 30),
        allDay: false
    }];

    $scope.calendar.fullCalendar('refetchEvents');
};

$scope.showColorPicker = function(index)
{
    $cookieStore.showuserid = index;
    dlg = $dialogs.create('/dialogs/pickColor.html','pickColorCtrl',{},{key:false ,back:'static'});

    dlg.result.then(function()      
    {       
        $scope.cal_func();
    });
};

....

so i wanted that the user chooses a color, and then 3 events should show up in the Calendar, but nothing happens...

Sahil Sharma · Accepted Answer · 2015-12-28 11:20:11Z

7

Here, in your eventSources you have entered the events directly.

What you should do is provide a list of arrays in which you have stored your events. Something like this: $scope.eventSources = [$scope.myEvents, $scope.someOtherArray, $scope.otherEvents];

and in $scope.myEvents, you can put your events.

$scope.myEvents = [
  {
    title: 'All Day Test Event',
    start: new Date(y, m, 1)
  },
  {
    title: 'Long Test Event',
    start: new Date(y, m, d - 5),
    end: new Date(y, m, d - 2)
  },
  {
    title: 'Test Birthday Party',
    start: new Date(y, m, d + 1, 19, 0),
    end: new Date(y, m, d + 1, 22, 30),
    allDay: false
  }
];

$scope.someOtherArray, $scope.otherEvents can be some other source for events.

As far as colors are concerned, you can customize them either through events object or event source object

$scope.someOtherArray = [];
$scope.weeklyEvents = {
    color: '#656565',
    textColor: 'white',
    events: []
};
$scope.otherEvents = {
    color: '#B2B2B2',
    textColor: 'black',
    events: []
};

You can modify your code to use either of the above two mentioned approaches(Visit those links).

edited Dec 28, 2015 at 11:20

Sahil Sharma

2,01728 silver badges34 bronze badges

answered Dec 9, 2014 at 14:22

Aniket Sinha

6,0316 gold badges39 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Aniket Sinha Over a year ago

You need to provide array list in $scope.eventSources = []; i.e 4th line in the code(inside controller). This is where calendar looks for events, which is empty in your case.

MrsNobody Over a year ago

yeah, i already tried to use $scope.events and then push it in the $scope.eventSources, but it didnt work out either.... At the beginning there shouldnt be any events, thats why i want the eventSources to be empty. a user have to select a color to show some events, but they dont show up, i read i need to write $scope.calendar.fullCalendar('refetchEvents'); but that still dont change anything...

Aniket Sinha Over a year ago

Use $scope.eventSources = [$scope.events];. If you don't want any events, then keep $scope.events= []; and push events in it as per your requirement.

MrsNobody Over a year ago

i tried that, but it still didn't show any events, i wrote one event in $scope.events, and this event is shown, but when i get in the function and i try 'removeEvents' and and overwrite $scope.events and 'addEventSource' nothing will work... but at the end of the function $scope.eventSources have the data but it wont show up in the calendar, why??

Aniket Sinha Over a year ago

I don't get it what you meant when you said "when i get in the function and i try 'removeEvents' and and overwrite $scope.events and 'addEventSource' nothing will work...", Can you create a plunk reproducing your issue? That will be a great help in debugging.

|

Sumit Vairagar · Accepted Answer · 2017-07-01 18:45:31Z

1

What worked me is.

Instead of this.

$scope.eventSources = [$scope.myEvents, $scope.someOtherArray, $scope.otherEvents];

TRY THIS

$scope.eventSources.push($scope.myEvents);

answered Jul 1, 2017 at 18:45

Sumit Vairagar

5543 silver badges13 bronze badges

Comments

Baldrick · Accepted Answer · 2017-04-21 08:09:33Z

0

I used

$scope.callCalendar = function (){
... ...
};

and in html file:

 <div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"></div>

The events doesn't show up in the calendar; but I found the $scope.events has correct value in console.log($scope.events).

edited Apr 21, 2017 at 8:09

Baldrick

11.2k21 gold badges78 silver badges94 bronze badges

answered Apr 21, 2017 at 7:54

Dav1011

11 bronze badge

Collectives™ on Stack Overflow

Angularjs Full Calendar doesn't display events

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related