The client is not displaying any events on the full calendar

I am currently working on creating a unique calendar display that showcases all the weekdays and events, regardless of the specific day in a month. The dates extracted from the database may seem "random", but in my C# code, I have devised a method to map each random date to the corresponding day within the current week (using the function public DateTime AssimilarDataAoDiaSemana(string dia, List dts)).

Furthermore, I have included a link to the C# code https://pastebin.com/ipe4t8Pa, which generates a JSON response similar to:

{
    "events":[
     {
         "title": "VIP",
         "start": "2018-03-03 10:00:00",
         "end": "2018-03-03 11:00:00",
         "allDay": false
     },
     {
         "title": "ALMANAQUE DA CACAU",
         "start": "2018-02-25 17:00:00",
         "end": "2018-02-25 18:00:00",
         "allDay": false
     }
    ]
}

This JavaScript function is crucial for rendering the calendar:

function Grade() {
if (VerificarURL("programacao")) {
    var cal = $("#calendario").fullCalendar({
        events: {
            url: "/programacao/calendario",
            dataType: "json",
            type: "GET",
            success: function (data) {
                console.log(data);
            },
            color: "white",
            textColor: 'white'
        },
        columnHeaderFormat: "dddd",
        handleWindowResize: true,
        header: false,
        height: "auto",
        defaultView: "agendaWeek",
        editable: false,
        minTime: "06:00",
        maxTime: "24:00",
        displayEventTime: false,
        allDaySlot: false,
        allDayText: false,
        timeFormat: "HH(:mm)",
        slotLabelFormat: "HH:mm",
    });
}
}

The main issue encountered is that the events are not being displayed properly on the client side. Do you have any suggestions or solutions?

Answer №1

The JSON format you are currently returning is not compatible with what fullCalendar requires. You need to ensure that your event data is structured as an array without any additional wrapping objects. The correct structure should be:

[
     {
         "title": "VIP",
         "start": "2018-03-03 10:00:00",
         "end": "2018-03-03 11:00:00",
         "allDay": false
     },
     {
         "title": "ALMANAQUE DA CACAU",
         "start": "2018-02-25 17:00:00",
         "end": "2018-02-25 18:00:00",
         "allDay": false
     }
]

fullCalendar specifically expects the JSON data to be in array format. If you provide an object like you did in your example, it will not recognize the events within it, assuming there are no events present.

If you adjust your C# code to generate the required output as shown above, it should integrate smoothly with fullCalendar.

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

Pan motion gesture above HTML components

Is it possible to create a hovering effect over elements in a container using a pan gesture? Here's the HTML code: <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item">< ...

Issues concerning date and time manipulation - Library Moment.js

As a beginner in JavaScript, I've been working on an activity that generates a table of train times based on user input. However, I'm facing issues with formatting the arrival time correctly. Whenever I input the arrival time in military format ( ...

Display a dynamic list of data fetched from an axios Get request in a React MUI dropdown menu

import { useEffect, useState } from "react"; import Box from "@mui/material/Box"; import FormControl from "@mui/material/FormControl"; import InputLabel from "@mui/material/InputLabel"; import MenuItem from "@m ...

Direct back to the current page post deleting entry from mongodb

After removing data from MongoDB, how can I redirect to the same view (handlebar)? I tried using res.render, but it shows that the website cannot be reached. Thank you for your assistance. Controller Logic var express = require('express'); va ...

Tips for reducing code length in jQuery

Here's an interesting question that I've been pondering. Is there a more efficient way to optimize and condense code like the one below? Could it be achieved using functions or loops instead of having lengthy jQuery code? var panels = ["panel1", ...

Retrieving data from a child component that has been added in React

One of the challenges I am facing is dealing with a main react component that dynamically appends child components, like <Child />, on button click The structure of my Child component looks something like this: <form> <input .... /> ...

Issues with Entity Framework 6: Inconsistencies with the functionality of "HasRequired" and "WithMany" relationships

After spending hours searching online, I decided to reach out here for help. I have been using Entity Framework for over 5 years and have never encountered the issue I am facing now. I have two POCO classes (edited): public class Company { public vir ...

"Transferring an array of data to a Laravel controller via AJAX: A step-by-step guide

Is there a way to send arrays of data to the back-end all at once? The Problem 1. This is what I'm currently sending: array:5 [ "_token" => "S5s5ZTTnnP93MyXgCql0l9vhHsiqt5VWaFyEedXj" "product_id" => "21" "specification_id" => "6" " ...

Why is the updated index.html not loading with the root request?

I'm currently working on an Angular app and facing an issue with the index.html file not being updated when changes are made. I have noticed that even after modifying the index.html file, requests to localhost:8000 do not reflect the updates. This pro ...

Is there a way for me to retrieve both a ModelAndView file and a string?

Can JavaScript return an object and a string simultaneously? const myModel = new Map(); if (preview === "pdf") { myModel.set("IS_IGNORE_PAGINATION", false); myModel.set("format", "pdf"); } else if (preview === "xls") { myModel.set("IS_IGNO ...

Tips for effectively handling errors in a RESTful API

Have you seen this project on Github? It's a RESTful API designed for managing a movie rental service. While it currently "works", one issue is that error messages are sent directly to clients from internal methods. Consider this code snippet: /* GE ...

Creating an Array of Nested Sibling Objects Using Groovy's JsonBuilder

I am attempting to create a JSON array with multiple nested objects. Desired Output: [ { "User": { "Name": "Foo", "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85f1e0f6f1c5e0fde4 ...

The link and source attributes are missing from the .ejs template

I am experiencing an issue where the href and src attributes in my .ejs file are not referencing my local files properly. My setup involves node.js and express. Here is a snippet from the .ejs template that is causing the problem. <head> & ...

Passing a callback function through a prop in Vue.js

Currently, I have a component structured in the following way: <template> <div> <pagination class="center" :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination> </div> </t ...

Modifying the status of a link using jQuery

My ajax function handles two different outcomes based on the class of the link that is clicked. To avoid reloading the entire page when the link is clicked, I have utilized the following code: Everything seems to be working fine, however jQuery still rec ...

Redirecting to new page after submitting form using Ajax

I'm having some trouble with my HTML form submission using JQuery and AJAX. After successfully submitting the form, I want to display a modal and then redirect to another page based on certain conditions. I've written the logic in my JS file wh ...

Is it possible to build a Node.js (Express) application using a combination of JavaScript and TypeScript?

Currently, I have a Node.js project (Express REST API) that is written in JavaScript. My team and I have made the decision to gradually rewrite the entire project into TypeScript. Is it possible to do this incrementally, part by part, while still being ab ...

Tips for ensuring jwt token is not lost when refreshing a page in an angularjs app

My project involves authorizing users using jwt tokens, but I am facing an issue where the token is lost upon page refresh and subsequent requests to the server do not include the token. The setup includes storing the token in local storage and utilizing ...

Waiting for an Element to Become Visible in Selenium-Webdriver Using Javascript

When using selenium-webdriver (api docs here), how can you ensure that an element is visible before proceeding? Within a set of custom testing helpers, there are two functions provided. The first function successfully waits for an element to exist, howeve ...

Top solution for preventing text selection and image downloading exclusively on mobile devices

My plan is to use the following code to accomplish a specific goal: -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); I& ...