Trouble with Fullcalendar v4: Unable to use addEvent() function in a customized view

Currently, I am utilizing fullcalendar v4 (accessible at https://fullcalendar.io/) and facing an issue where I need to refresh the dropped event in a custom view called 'timeGridSixMonth'.

var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
                defaultView: 'timeGridSixMonth',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'timeGridSixMonth,timeGridWeek,timeGridDay,listSixMonth'
                },
                buttonText: {
                    timeGridSixMonth: '6 Month',
                    listSixMonth: 'List 6 Month'
                },
                views: {
                        timeGridSixMonth: {
                        type: 'dayGrid',
                        duration: { month: 6 },
                        titleFormat: { year: 'numeric', month: 'short', day: 'numeric' },
                    },
                        listSixMonth: {
                        type: 'listMonth',
                        duration: { month: 6 },
                        titleFormat: { year: 'numeric', month: 'short', day: 'numeric' } 
                    }
},

.....

drop: function(info) {

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                console.log(info);

                $.ajax({
                    url: '/api/plan',
                    type: "POST",
                    data: {
                        'title':          info.jsEvent.explicitOriginalTarget.textContent
                        'item_id':        $('#item_id').children("option:selected"). val(),
                        'start':          start,
                        'end':            end,
                        'users_id':{{ \Illuminate\Support\Facades\Auth ::user() -> id }},
                     },
                    success: function (response) {

                        console.log(response);
                        calendar.addEvent({
                            title:  response.data.title,
                            start:  response.data.start,
                            end:    response.data.end,
                            allDay: false,
                            id:     response.data.id,
                        });
                        displayMessage('gespeichert.');
                    }
                });
            },

The response is:

{
  "success": true,
  "data": {
    "Fach": "Rhetorik",
    "faecher_id": 22,
    "dozenten_id": 112,
    "schulungsorte_id": 18,
    "Beginn": "2020-10-29T16:00:00.000000Z",
    "Ende": "2020-10-29T20:00:00.000000Z",
    "kurstermine_id": "14,17,7,21",
    "users_id": 3,
    "updated_at": "2020-04-01T16:15:34.000000Z",
    "created_at": "2020-04-01T16:15:34.000000Z",
    "id": 26,
    "title": "Rhetorik\n        Mr. Miller",
    "start": "2020-10-29T16:00:00.000000Z",
    "end": "2020-10-29T20:00:00.000000Z"
  },
  "message": "stored."
}

In the custom view, an event is being created without an ID causing addEvent() to fail.

Furthermore, when using standard views, duplicate events are being generated without IDs.

Any idea why this inconsistency is happening?

javascriptfullcalendarfullcalendar-4

Answer №1

RESOLVED:

I switched from using drop to eventReceive:

eventReceive: function(data) {

       console.log('eventReceive', data);

       var start = moment(data.event._instance.range.start).utcOffset(0).format("YYYY-MM-DD HH:mm:ss");
       var end   = moment(data.event._instance.range.start).utcOffset(0).format("YYYY-MM-DD HH:mm:ss");

                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });

                        console.log(data);

                        $.ajax({
                            url: '/api/plan',
                            type: "POST",
                            data: {
                                'title':     data.draggedEl.innerText,
                                'item_id':   data.draggedEl.dataset.event,
                                'start':     start,
                                'end':       end,
                                'users_id':  {{ \Illuminate\Support\Facades\Auth ::user() -> id }},
                            },
                            success: function (res) {

                                console.log(res);
                                data.event.setProp('title', res.data.title);
                                data.event.setProp('id', res.data.id);
                                data.event.setProp('start', res.data.start);
                                data.event.setProp('end', res.data.end);
                            }
                        });
                    },

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

Retrieve the total count of rows present in a specific table

Is there a way to accurately determine the number of rows in a table? I've attempted multiple methods (all unsuccessful) and this is my latest attempt: var _tableOfInterestsCount = wait.Until(x => x.FindElements(By.XPath("//*[@id='gridBody ...

javascriptc#selenium

Expand the boundaries of the MUI Select to encompass a different element

Is there a way to extend the border of the MUI Select dropdown menu around the IconButton next to it? I have set up sorting options (A-Z, newest-oldest) using the Select component and included a button to reverse the direction (Z-A, oldest-newest). However ...

javascriptreactjsselectmaterial-uiborder

How can we optimize axios requests with lodash debounce?

Utilizing a state prop named network busy status to control elements in the UI. Due to the rapid changes in status, my spinner appears overly active. Is there a simple method, utilizing lodash _.debounce, to throttle this section of code? const instance ...

javascriptvue.jsaxiosdebouncing

Can you nest an if statement within another if statement within a return statement?

Is it feasible to include an if statement inside another if statement within a return function? I understand the standard syntax like: return ( <div> { myVar ? <Component/> : <AnotherComponent/> } </div> ...

javascriptreactjs

Show each text field individually in JavaScript

Is it possible to display text fields one by one upon button click? Initially, all text fields are hidden, but when the button is clicked, they should be displayed one after another with their visibility property set to visible? This is what I have attemp ...

javascriptjqueryajax

Disabling the Enter key to submit an AJAX form is causing the focus to not move to the next input field

I've encountered a small issue that I can't seem to find a solution for (maybe my keyword search wasn't effective): The scenario: I have successfully prevented a form from being submitted when hitting the Enter key (13). It's importan ...

javascriptjqueryajaxforms

Error thrown when attempting to access properties of null values (Uncaught TypeError: Cannot read properties of undefined (reading 'map'))

import React, { useState, useEffect } from "react"; import { TaskLists } from "./TaskLists"; import { Daycard } from "./daycard"; import { getTasks, deleteTask } from "../api/task.api"; export function TaskManager() { const [tasks, setTasks] = useState( ...

javascriptreactjsstate

Issue encountered during the creation of a Nuxt3 project. The download of the template from the registry was

Trying to create a new Nuxt 3 project using the command below: npx nuxi init nuxt-app The following error message is displayed: ERROR (node:1752) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time ...

javascriptvue.jsfrontendnuxt.jsnuxt3.js

The local copy of Jquery.min.js is failing to trigger the window load function

Recently, I encountered an issue with the focus of tabs while working with jQuery. Initially, everything was fine when I included: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> in my JSP file. The wi ...

javascriptjqueryajaxgoogle-apilocal

Do we need to use the "new" keyword when using ObjectID in a MongoDB query

Recently, I was immersed in a Typescript web project that involved the use of MongoDB and ExpressJS. One particular task required me to utilize a MongoDB query to locate and delete a document using the HTTP DELETE method. However, during the process of exe ...

javascriptnode.jstypescriptmongodbexpress

Display the URL with proper formatting in the print function

I am trying to create a table with clickable URLs in a "Link" column, but the URLs are too long and I want to show a custom title instead. So far, I have used the following code: str = "Test Title"; link = str.link("https://my_long_url.com/v1.0/ui/index. ...

javascriptapache-zeppelin

Understanding the reverse order of numbers displayed with while loop and innerHTML

function doItAgain() { var loopCount = 5; while(loopCount > 0) { var target = document.getElementById("target"); target.innerHTML = "LoopCount: " + loopCount + "& ...

javascriptloopswhile-loopinnerhtml

Arranging and moving list elements without the use of jQuery UI (or any jQuery libraries at all?)

I have been searching for a JavaScript plugin that offers the same functionality as jQuery UI Sortable, which is the ability to drag and drop items to reorder them. In my case, these items are <li> tags. I prefer not to use jQuery UI because it is h ...

javascriptjqueryjquery-uijquery-ui-sortablezepto

Inquiry regarding the ng-disabled directive in AngularJS

<div ng-app="myApp" ng-controller="myCtrl"> <button type="submit" class="btn btn-primary pull-left" ng- disabled="captchaError">Submit</button> </div> <script> var app = angular.module('myApp', []); app.controller( ...

javascriptangularjs

Get a reference to pass as an injection into a child component using Vue js

Is there a way to pass a reference to child components? For example: The Parent component provides the ref: <template> <div ref="myRef" /> </template> <script> export default { name: 'SearchContainer', pr ...

javascriptvue.jsvuejs2

Obtain the URL of the parent window from a modal dialog using JavaScript

What is the proper syntax for obtaining the URL (specifically, the PATH) of the parent window from a modal dialog box in Internet Explorer. I have attempted several variations such as: window.opener.document.location window.opener.location this.opener.do ...

javascriptasp.nethtml

JQuery magic: Enhancing a div's visibility with animated mouseover effects

I'm trying to figure out how to animate a div on mouseover, specifically making it fade in/appear slowly. I believe I need to use the .animate function or something similar. $("#logo").mouseover(function() { $("#nav").css('visibility',&apos ...

javascriptjquery

Secure your browsing experience with AngularJS authentication prompt

Currently, I am working on building an application using AngularJS for the front-end and JavaEE for the back-end. In my AngularJS application, I am trying to access a REST resource provided by the back-end which is protected with JAAS authentication, allow ...

javajavascriptangularjsauthentication

Experiencing difficulties with a click event function for displaying or hiding content

Struggling with implementing an onClick function for my two dynamically created components. Currently, when I click on any index in the first component, all content is displayed. What I want is to show only the corresponding index in the second component ...

javascripttypescriptstenciljs

The code for populating the lookup does not perform as expected on the initial attempt

I've encountered an issue with my JavaScript code on a form where it auto populates 2 lookup fields with the current user when the record is being created. Most of the time, this function works as intended. However, I've noticed that during the f ...

javascriptdynamics-crm-2011