Having difficulty showing custom events on angular full calendar

After pushing events loaded from the server, I am encountering an issue where they are not being displayed on the calendar. Interestingly, the events are in the correct format and can be seen when printed on the page, but for some reason, they do not show up on the calendar...

Here's a snippet of my code:

dashboardCtrl.controller('CalendarioCtrl', ['$scope', '$log', '$compile', 'uiCalendarConfig', 'SedutaGiuntaSrvc', 'ProgressivoSrvc', function ($scope, $log, $compile, uiCalendarConfig, SedutaGiuntaSrvc, ProgressivoSrvc) {
$scope.events = [];

/* Fetching meetings */
var loadSedutePerCalendario = function () {
    SedutaGiuntaSrvc.getSeduteCalendario().then(function (response) {
        if ('item' in response.data.response.result.items) {
            var sedute = convertToArray(response.data.response.result.items.item);
            angular.forEach(sedute, function (s, index) {
                if (index < sedute.length) {
                    var date = new Date(s.data);
                    var d = date.getDate();
                    var m = date.getMonth();
                    var y = date.getFullYear();
                   $scope.events.push({id: s.id, title: s.progressivo + '_' + y, start: new Date(y, m, d+1)}); 
                }
            });
        }
    });
};

loadSedutePerCalendario();

$scope.eventSources = [$scope.events];

// Various event functions...

where could the problem lie?

This is the content of eventSources as printed on the page:

[{"id":1,"title":"1/2014","start":"2014-10-06T22:00:00.000Z","_id":1}]

I've looked into similar issues like the one discussed in this post on Stack Overflow, but unfortunately, it hasn't resolved my problem.

Answer №1

let eventList = [retrieveEventData];
          function retrieveEventData(start, end, timezone, dataCallback) {
                    //data retrieval and manipulation logic will go here
                      dataCallback(eventList);
                      });
         }

Answer №2

For eventSources to function correctly, it needs to be an array of arrays. Here is an example:

$scope.events = [{"id":1,"title":"1/2014","start":"2014-10-06T22:00:00.000Z","_id":1}];
$scope.eventSources = [$scope.events]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on validating an email through a 6-digit code using Flutter, Node.js, and MongoDB

My goal is to create a registration process where users enter their email and password on a screen. After clicking "register", they should receive an email with a random 6-digit code for verification on the next page. I have everything set up, but I' ...

Leveraging the power of JavaScript Math methods to dictate the Co-ordinates of HTML Canvas .fillRect

Greetings to everyone! I have dedicated my entire evening to understanding how to implement the (Math.floor(Math.random()) function as the coordinates for the .fillRect method on an HTML canvas element. Despite searching through this website and various ...

Leveraging React Hooks' useEffect to trigger a prop callback function defined with useCallback

Currently, I am working on developing a versatile infinite scrolling feature using React Hooks along with the ResearchGate React Intersection Observer. The main concept revolves around a parent passing down a mapped JSX array of data and a callback functio ...

What is the syntax for implementing the 'slice' function in React?

While working on my React app, I encountered an issue when trying to extract the first 5 characters from a string using slice. The error message displayed was: TypeError: Cannot read property 'slice' of undefined I am utilizing a functional compo ...

Retrieving InnerHTML of a Rendered DOM Element in AngularJS

Can I retrieve the innerHTML code of a rendered element that contains an ng-repeat loop? Here is an example: <div id="container"> <div ng-repeat="e in ctrl.elements>{{e.name}}</div> </div> ...

Angular UI Router provides a convenient way to set up nested states for the home page, allowing for a clear distinction

Embarking on a new project using the MEAN boilerplate provided by MEAN.JS (not .IO). I'm fresh to ui-router and facing difficulty in achieving this particular scenario: If the user is logged in, direct them to state "home.loggedIn". If the user is ...

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...

Double-clicking with Ajax and JSF after the initial click

When I interact with a dataTable that has a column named DELETE (which is a link) and has a listener attached to it, I experience an issue. After clicking on the link for the first time (click 1), the row gets deleted as expected. However, subsequent click ...

Is there a feature in VS Code that can automatically update import paths for JavaScript and TypeScript files when they are renamed or

Are there any extensions available for vscode that can automatically update file paths? For example, if I have the following import statement: import './someDir/somelib' and I rename or move the file somelib, will it update the file path in all ...

What causes the error "property does not exist on type" when using object destructuring?

Why am I encountering an error in TypeScript when using Object destructuring? The JavaScript code executes without any issues, but TypeScript is showing errors. fn error: This expression is not callable. Not all elements of type '(() => void) | ...

Formatting numbers in Angular 2 to include a space every three zeros in a money amount

Let's say I have the number 30000 and I want to format it as 30 000. What method should I use to achieve this? Here are more examples: 300000 -> 300 000, 3000000 -> 3 000 000. Just to clarify, this is not about using dots or commas, but rather reco ...

Dynamic animations with RaphaelJS - Creating animated connections

I recently came across a similar project here: My current project involves animating boxes by clicking a button. While I am able to move the boxes around smoothly during animation, the issue is that the connections between them do not move along. Is there ...

Updating Cart Array in Angular 4 when Adding a New Item

I'm currently using angular 4 and I have encountered an issue in the code where adding a new product to the cart overwrites the existing item instead of appending it to the array. Here is a screenshot illustrating the problem cart.service.ts export ...

Retrieve the id for the chosen user name within a function that contains an array of objects

const userList = [ {name:"jonh" ,id:EAD1234}, {name:"peter" ,id:EAD1235}, {name:"matt" ,id:EAD1236}, {name:"henry" ,id:EAD1237}, ] In the array above, there are various users with their respective IDs. The goal is t ...

The babel-preset-es2016 plugin is in need of the babel-runtime peer dependency, however it seems that it

While I am aware that npm no longer automatically installs peer dependencies, why do I still receive a warning after manually installing them? ➜ npm install babel-runtime -g /usr/local/lib └─┬ <a href="/cdn-cgi/l/email-protect ...

Is there a way to configure Cordova to utilize Yarn JS instead of NPM when installing plugins?

Updated Question: When adding plugins to my Cordova project, I currently use the command cordova plugin add x, which I believe utilizes npm in the background. Is there a way to switch out npm for Yarn within Cordova? This change would greatly impact cach ...

Entering numerical value using input type = text

Looking to utilize Angular's number validation, but it seems that it necessitates using input type=number. Ordinarily, this wouldn't be an issue, however I'm not keen on the up and down arrows that typically appear beside this input type. I ...

Unable to Access Browser Page

After printing out the URL in the console, I encountered an issue while trying to retrieve it using browser.get(). The error message displayed is as follows: Failed: Parameter 'url' must be a string, not object. Failed: Parameter 'url&apo ...

Choosing from a variety of tr elements

I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue. Using nth-child seems like an option, but it can get quite verbose if I nee ...

Angular material components such as buttons and tabs can be positioned in the right top corner for a

Is there a better way to position buttons in the right corner of the md-tab directive? I attempted using position:absolute, but it felt somewhat hacky. <div style="position:absolute; top:15px; right:5px; z-index:5000"> <md-button class="md-pri ...