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

Maintain checkbox selection even after leaving the page

I am looking for a way to maintain the state of a checkbox even after navigating away from the page in an AngularJS and bootstrap environment. Currently, I find that my bound variable gets reset to false every time I reload the page when the controller run ...

Challenges encountered with a simple PHP calendar script

I created this PHP calendar template that starts from Monday instead of Sunday to suit my Italian preferences. <?php $date = strtotime("2021-10-28"); $monthNames = Array("Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", ...

Set the value of ng-model using a radio button选择radio按钮指定

As a beginner in Angular JS, I might make some errors. Currently, I am attempting to set a value to an ng-model using dynamically generated radio buttons. Here is the code I have so far: <div data-ng-init="radio=['Core','Software Develop ...

Using NextJS to pass a parameter to an onClick function

I've been using the react-simple-star-rating package in this sample code. However, I'm facing an issue: Within my trains parameter, there is a variable id that I would like to pass to the handleRating function using onClick, but I can't see ...

Can jQuery be used to change the functionality of a submit button, such as toggling between show, hide, and submit options?

I am having trouble toggling a button to either submit a form on click or reveal an input field, depending on whether the user clicks outside the input field to hide/collapse it. The issue arises when the user dismisses the input field and the submit butto ...

Using scope in ng-style to manipulate a portion of a CSS property value in Angular

I've been attempting to add a border using ng-style, but I'm struggling to figure out how to concatenate the value from the scope variable. None of the methods below seem to be working for me: <div ng-style="{'border-top' :'1p ...

I am having trouble understanding why my GraphQL query is not retrieving any data from the WordPress GraphQL API when using SWR

I have created a query to retrieve my WordPress navigation menus using the WordPress graphql plugin along with swr, graphql, graphql-request, and next.js on my local files. When I add the query on the wp-grphql section of my site, I am able to successfully ...

What crucial element am I overlooking in the React Transition Group Component while implementing it for a carousel design?

I'm trying to add a feature to my Carousel where the opacity changes between images. When clicking on the icons, the images should transition smoothly. I've been using React Transition Group, but for some reason, it's not working as expected ...

The use of `preventDefault()` in React for the `onCopy` event is ineffective

I'm currently exploring ways to prevent the clipboard events from copying text when the onCopy event is triggered. I've tried using the onCopy handler and e.preventDefault() method, but the text is still being copied without any issues. What am I ...

Transmitting data using JavaScript to Spring server

I am facing a challenge of uploading an image to a server using Spring. The code snippet I am using to get the file is as follows: var file = $("#form-field-photo").get(0).files[0]; I have attempted several methods to post it, but so far, all my attempts ...

What steps can I take to resolve a dependency update causing issues in my code?

My program stopped working after updating one of the dependencies and kept throwing the same error. Usually, when I run 'ng serve' in my project everything works fine, but after updating Chartist, I encountered this error: An unhandled exception ...

The 'npm start' command is failing to recognize the changes made to the

I am embarking on a new node application journey, starting with the package.json below, which is quite basic. { "name": "mynewnodeventure", "version": "1.0.1", "description": "Exploring node", "main": "index.js", "start": "node server. ...

The AJAX call returned undefined, leading to an error when trying to access the length property

I've scoured various resources to find a solution for this issue, but unfortunately, I haven't had any luck with implementing the code. The problem lies with my JSON parser function, which is designed to construct a table based on data received ...

Vue.js - Implementing multiple values (array) for a component through a property

I am currently working with vue.js components that receive their data from external sources. For example: <vue-button icon="fa-arrow-right" text="mytext"></vue-button> Initially, this setup is effective. However, I encountered a challenge wh ...

Error: The "map" property cannot be read if it is undefined in a Django and React application

While I was following the react and django tutorial, I encountered an issue when I added some code for concern with. The error message 'Cannot read property 'map' of undefined' keeps getting thrown. The error location is pointed out ...

Instructions for displaying typed chat messages on the screen using socket.io and node.js

I am currently developing a chat application using socket.io and node.js. I have successfully connected the server and both the socket.io and client-side socket.io are also connected. However, when I type a message on the localhost page and hit enter, noth ...

Remove any posts that have a date earlier than the current day

Currently, I am working on a website showcasing events organized by my friend's music label. However, I have run into an issue while attempting to implement an "archiving automation". The code I have tried below is not functioning as expected, as my " ...

Tips for assigning custom values using CSS and jQuery for a standalone look

I am facing a challenge with my HTML markup: <div> <figure></figure> <figure></figure> <figure></figure> </div> Alongside some CSS styling: div { position: relative; } figure { position: absolu ...

Iterate endlessly over CSS styles in Angular 4

I'm looking to create a website background 'screensaver' by looping through an array of background URLs with a delay between switches. Currently, I have the array stored in my .ts file and I am using the NgFor directive in my HTML. However, ...

Is there a way to utilize classes in various elements when other jQuery selectors are not functioning properly?

Could someone please clarify or provide an alternative solution to the following situation: The class fruit is present in two different tag elements, and one of these elements has the add class used in a jQuery selector. However, the alert box is not disp ...