When the next and previous buttons are clicked, FullCalendar automatically switches to the agenda View

I'm currently working on integrating FullCalendar into an Angular 1 project, and I have successfully displayed events. However, I encountered an issue when trying to add events on next and previous button clicks. Despite receiving a response from the server, the events assigned to FullCalendar revert back to the default view (e.g., agenda). Below is the code snippet for better understanding:

HTML

<div id="demoCalender" fc fc-options="calendarOptions">

Angular

$scope.defaultViewAgenda = "agendaDay";

$scope.calendarOptions = {
    // Calendar options here
    
};

// Function to get rescheduled agenda events
$scope.getAgendaReschedules = function(agenda, startTime, endTime, isAgendaNextOrPrevious) {
    // Get agenda reschedules logic here
};

// Event listeners for previous and next button clicks
$('#demoCalender').fullCalendar().on('click', '.fc-prev-button', function() {
    // Previous button click logic
});

$('#demoCalender').fullCalendar().on('click', '.fc-next-button', function() {
    // Next button click logic
});

// Functions to handle previous and next agenda reschedules
$scope.getPreviousAgendaReschedules = function(agendaStartCharacterToSubtract) {
    // Logic for getting previous agenda reschedules
};

$scope.getNextAgendaReschedules = function(agendaStartCharacterToAdd) {
    // Logic for getting next agenda reschedules
};

If anyone can help figure this out, it would be greatly appreciated!

Answer №1

Upon encountering an issue where events were getting reinitialized whenever assigned, I realized the need to set the default date and agenda view to display the fetched events as intended.

$scope.getAgendaReschedules = function (agenda, startTime, endTime, isAgendaNextOrPrevious) {
    demoReschedules.getRescheduls($scope.assignedAgentId, "RESCHEDULED", startTime, endTime).then(function (response) {
        if (response.status == 200) {
            if (response.data.length > 0) {
                var groupByScheduledContacts = response.data.reduce(function (result, current) {
                    result[current.scheduled] = result[current.scheduled] || [];
                    result[current.scheduled].push(current);
                    return result;
                }, {});

                $scope.events = [{}];

                for (key in groupByScheduledContacts) {
                    var eventTime = moment(key, "DD/MM/YYYY HH:mm:ss");
                    $scope.events.push({
                        title: 'No. of rescheduled call : ' + groupByScheduledContacts[key].length,
                        start: eventTime,
                        end: eventTime,
                        description: 'This is a cool event',
                        color: $scope.getColorForReschedules(eventTime)
                    });
                }

                $scope.calendarOptions.events = $scope.events;

                if (isAgendaNextOrPrevious) {
                    $scope.calendarOptions.defaultDate = moment(startTime);
                    $scope.calendarOptions.defaultView = agenda;
                }
                else {
                    $scope.calendarOptions.defaultDate = moment(startTime);
                    $scope.calendarOptions.defaultView = agenda;
                }
            }
            else {
                $scope.calendarOptions.events.push({});                    
                $scope.calendarOptions.defaultDate = moment(startTime);
                $scope.calendarOptions.defaultView = agenda;
            }
        }            
    }, function err() { });

};  

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

Angular 2: Change Boolean value depending on a condition

I find myself facing a challenge with a search-bar feature. My goal is to display all the filtered names when the input value reaches a length of 2 or more characters. After successfully extracting the value.length from the input field, I encountered a ro ...

Executing a nested function before moving on to the subsequent code statements

I have a requirement where certain functions in my codebase need to check if a user is logged in before proceeding. Instead of duplicating this check logic, I want to call a single getUser() function each time. Here is the order of operations for the func ...

Effortless Ways to Automatically Accept SSL Certificates in Chrome

It has been quite some time that I have been attempting to find a way to automatically accept SSL certificates. Unfortunately, I haven't had any success yet. The scenario is this: I am working on selenium tests and every time I run the test on Chrome, ...

Can you explain the concept of F-Bounded Polymorphism in TypeScript?

Version 1.8 of TypeScript caught my attention because it now supports F-Bounded Polymorphism. Can you help me understand what this feature is in simple terms and how it can be beneficial? I assume that its early inclusion signifies its significance. ...

What is the best method for transmitting data to HTML using Node.js?

I retrieved the database data using nodejs and now I need to display it in an HTML file. What steps should I take? Here is my app.js code: var express = require('express'); var router = express.Router(); router.get('/', function(re ...

Troubleshooting jQuery Dropdown Menu Animation Bugs

Take a look at this interesting fiddle: https://jsfiddle.net/willbeeler/tfm8ohmw/ HTML: <a href="#" class="roll-btn">Press me! Roll me down and up again!</a> <ul class="roll-btns"> <li><a href="#" class="control animated noshow ...

Using jQuery to load the center HTML element

So here's the plan: I wanted to create a simple static website with responsive images that load based on the browser width. I followed some suggestions from this link, but unfortunately, it didn't work for me. I tried all the answers and even a ...

There was an error encountered: TypeError - It is not possible to access the property 'handle' of an undefined object. Nevertheless, the following condition was set: if (fn.handle && fn

Seeking assistance with my first project involving node and express. I followed the instructions on the Express.js site but encountered an issue that I can’t seem to figure out. Any guidance on what might be causing this error would be greatly appreciate ...

Having trouble finding the sum of values in an array using the Reduce method?

I have always used a 'for' loop to calculate sums in tables, but recently I learned about a better way - using the 'reduce' method. Following documentation and examples with simple arrays was easy enough, but now I am working with an ar ...

Why does my node-js API's second endpoint not function properly?

Currently working on my first API project. Everything was going smoothly, until I encountered an issue with my second route, app.route('characters/:characterId'). For some reason, none of the endpoints are functioning, while the first route, app. ...

JavaScript Node.js is the perfect tool for organizing and arranging nested arrays. With its

My challenge involves dealing with an array that outputs multiple nested arrays. If certain codes match, they are placed in the same nested array. How can I separate them? For instance, consider this example of my array: [ [ [ '0011', 6, 96, &apo ...

Tips for displaying a message in a concealed field with jQuery

I have an input field that saves values for checking a specific condition. When the condition is false, I want to display a message. If the field is hidden, the message will not be displayed. HTML <input type="hidden" id="year1_req_fund_hidden" name= ...

Difficulties with Grid Layout in React Material Design UI

I've been working on a project and I'm using the Material UI Grid Component to create a specific layout, but no matter what I do, I just can't seem to get it right. The layout I'm aiming for in my Dialog looks like this: https://i.sst ...

Error in mandatory data required by the Screenleap API in JavaScript

I have a JSON encoded data stored in a variable called $json. Here is how it appears: I have referred to the documentation at "https://www.screenleap.com/api/presenter" ...

Transforming JSON data into a dynamic Tableview

I've been experimenting with this issue for quite some time now, but I can't seem to find a solution. My API returns tasks in JSON format. When I print the data using Ti.API.info(this.responseText), it looks like this: [INFO] [{"created_at":"20 ...

Combining multiple pipe collections in a single Gulp task for both CoffeeScript and JavaScript files

I've been working on creating a single scripts task that can handle both .coffee and .js files effectively: Coffee files need to go through coffee(), coffeelint() and coffeelint.reporter() JS files should run through jshint() All files then need to ...

Issues with jQuery functionality in Django

Having some trouble displaying HTML data stored in result on my page with this code: $("#regerror").html(result); It doesn't seem to be working. However, when I use plain Javascript it works fine: document.getElementById("regerror").innerHTML = res ...

Build a new shop using a section of data from a JSON database

Let's say I have a JSON store that is set up as shown below var subAccountStore = new Ext.data.JsonStore({ autoLoad: true, proxy: { type:'ajax', url : '/opUI/json/subaccount.action?name="ABC"' }, fields: ['acc ...

Is assigning an ID to multiple objects a poor decision?

While working on my Django project, the template quickly became cluttered with elements all having unique IDs. I could reduce the number of IDs by assigning them to their parent elements, but this would require longer jQuery code. So now I'm faced wit ...

Is it true that every time we call canvas.getContext("2d"), it returns the same instance?

Can I rely on canvas.getContext("2d") to consistently return the same context instance whenever it's called? I'm seeking clarification because I am attempting to implement the guidance provided in this response to prevent my scaled canvases from ...