The fullcalendar is experiencing difficulties in showing the event

I am facing an issue with Fullcalendar where the events fetched by ajax are not showing up on the calendar. Even though the events are successfully passed and can be displayed in a pop-up, they do not render on the calendar. When manually setting the events, they show up without any problem, but using data from a .cs file causes them to not display.

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Diagnostics;
using System.Web.Services;
using System.Linq;
using System.Web.UI.WebControls;
import System.Web.Script.Serialization;
using System.Collections;
using System.Data;

namespace TravelPlannerO
{
    public partial class Schedule : System.Web.UI.Page
    {

    protected void Page_Load(object sender, EventArgs e)
        {
        }

        public class Event
        {
        public string id { get; set; }
        public string title { get; set; }
        public string start { get; set; }
        public string end { get; set; }
        public string desc { get; set; }
        public string status { get; set; }

        public Event(string id, string title, string start, string end,string desc,string status)
        {
            this.id = id;
            this.title = title;
            this.start = start;
            this.end = end;
            this.desc = desc;
            this.status = status;
        }
        };


        [WebMethod]
        public static string GetEvent()
        {
            string strSelect;
            SqlCommand cmdSelect;
            SqlDataReader dtr;
            SqlConnection conn;
            string connStr = ConfigurationManager.ConnectionStrings["plannerdb"].ConnectionString;
            conn = new SqlConnection(connStr);

            strSelect = "Select * from [Source.SavedPlan]";

            cmdSelect = new SqlCommand(strSelect, conn);
            conn.Open();
            dtr = cmdSelect.ExecuteReader();

<script src="Scripts/moment.min.js"></script>
<script src="Scripts/jquery-ui.custom.min.js"></script>
<script src="Scripts/fullcalendar.min.js"></script>
        
<script type="text/javascript">

    var listofevent;
    $(document).ready(function () {
    $('#calendar').fullCalendar({
    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
    },
    events:function (id,title,start, end, callback) {
    $.ajax({
    type: "POST ",
    url: '<%=Microsoft.AspNet.FriendlyUrls.FriendlyUrl.Resolve(" /Schedule.aspx / GetEvent ")%>',
    data: {},
    contentType: "application / json;charset = utf - 8 ",
    dataType: "json ",
    success: function (list) {
    listofevent = list.d;
    alert(listofevent);
    var events = [];
    alert(list.d);
    var obj = $.parseJSON(list.d);
    console.log(obj);
    
    $(list).find('event').each(function () {
    events.push({
    title: $(this).attr('title'),
    start: $(this).attr('start'),
    end: $(this).attr('end')
    });
    console.log(obj.calEvent);
    });
    //callback(events);
    callback && callback(events);
    },
    error: function (xhr, status, error) {
    alert(xhr.responseText);
    }
    });
    },
    defaultDate: '2015-1-1',
    selectable: true,
    editable: true,
    selectHelper: true,
    eventLimit: true, // allow "
more " link when too many events
                  </script>
<link href="Content/fullcalendar.css" rel="stylesheet" /> <link href="Content/fullcalendar.print.css" rel="stylesheet" media="print" /> <link href="Content/jquery-ui.min.css" rel="stylesheet"/>
<div id='calendar'></div>

            List<object> array = new List<object>();

            if (dtr.HasRows)
            {
                var index_id = dtr.GetOrdinal("PlanId");
                var index_title = dtr.GetOrdinal("Name");
                var index_start = dtr.GetOrdinal("DateFrom");
                var index_end = dtr.GetOrdinal("DateTo");
                var index_desc = dtr.GetOrdinal("Description");
                var index_status = dtr.GetOrdinal("Status");


                while (dtr.Read())
                {
                var id = dtr.GetValue(index_id).ToString();
                var title = dtr.GetValue(index_title).ToString();
                var datestart = dtr.GetValue(index_start).ToString();
                var dateend = dtr.GetValue(index_end).ToString();
                var desc = dtr.GetValue(index_desc).ToString();
                var status = dtr.GetValue(index_status).ToString();

                DateTime RealStartDate = Convert.ToDateTime(datestart);
                DateTime RealEndDate = Convert.ToDateTime(dateend);
                string start = RealStartDate.ToString("s");
                string end = RealEndDate.ToString("s");

                Event eventrows = new Event(id, title, start, end,desc,status);

                array.Add(eventrows);   
                }
            }
            string myJsonString = (new JavaScriptSerializer()).Serialize(array);
            return myJsonString;
        }
        private static DateTime ConvertFromUnixTimestamp(double timestamp)
        {
            var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
            return origin.AddSeconds(timestamp);
        }
    }
}

Answer №1

While working in my visual studio, I realized that there are no spaces between the code lines. I fear that I may accidentally add extra spaces while copying it here. I am puzzled as to why the events are not appearing as expected. When I print 'list.d' from the success function(list), the output shows: [{"id:"1","title":"testoh","start":"2015-01-01T00:00:00","end":"2015-01-02T00:00:00","desc":"abaaba","status":"first "}, [{"id:"2","title":"okok","start":"2015-05-01T00:00:00","end":"2015-05-02T00:00:00","desc":"fdgd","status":"second "}] I am questioning if the format is correct. Additionally, I have observed that my callback function is not being executed, yet I cannot pinpoint the reason behind this issue.

Answer №2

To resolve the issue, I made a modification to the parameter in the

events:function (id,title,start, end, callback)
by changing it to
events:function (start, end,timezone, callback)
. By the way, thank you for your assistance!

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

Choose an option using jQuery with the ability to navigate to the previous or next

I encountered a bug when I tried to click the next or previous button. Below is the HTML code snippet: $("#nextPage").click(function() { $('#pagination option:selected').next().attr('selected', 'selected'); console.log( ...

Is it possible to safeguard undisclosed data in browser console?

Can JavaScript be employed to prevent users from editing hidden fields through the browser console? ...

Exploring an array in Angular 2 using TypeScript

Just starting out with typescript and angular2 and working through some issues. I have a form that needs to display results from an array of changing items, so I don't know the exact index of each result. Here is my scenario: In my form.html file: ...

Unable to load images on website

I'm having trouble showing images on my website using Node.js Express and an HBS file. The image is not appearing on the webpage and I'm seeing an error message that says "GET http://localhost:3000/tempelates/P2.jpg 404 (Not Found)" Here is the ...

The JQuery .replaceWith method exclusively offers unprocessed HTML content

I'm experiencing a minor issue with my ajax response where it returns raw html and does not execute any scripts, resulting in the jquery ui scripts not being executed. Here are some details: I am currently working with ASP.NET MVC and I need to comm ...

Is there a way to remove a checkbox node that has already been generated?

I've been working on creating a to-do list, and I've run into an issue with deleting the checkbox once the task is complete. I attempted to create a function within the main function containing an if/else statement, but it didn't seem to wo ...

Is there a way to continuously send out this ajax request?

My attempt to use setInterval for sending an AJAX request every 2 seconds is causing the page to crash. It seems like there is something wrong in my code! Check out the code below: var fburl = "http://graph.facebook.com/http://xzenweb.co.uk?callback=?" ...

Where is the source of this ever-changing image?

Recently, I decided to dive into the world of jQuery and experiment with a plugin carousel. However, I must admit it is all a bit overwhelming for me at the moment. Currently, I have the plugin installed and I am struggling to get rid of the bottom scroll ...

The date picker feature of Jquery Mobile is not appearing on the popup field

I implemented the jtsage jquery mobile date picker, and I am facing an issue where the date picker appears behind the popup instead of in front of it when the text inside the popup is clicked. Here is a snippet of my code: <div data-role="content"> ...

Apply a specific image layout once the drop event occurs

I have a container with 5 image pieces that need to be dropped into another container to complete the image. Once an image is dropped, I want to apply the style "position:absolute" so that it sticks to the previous image in that container. Although I have ...

What is the best method for installing a package specified as a peerDependency?

I'm in the process of creating a library and I'm looking to figure out how to specify and install a dependency under peerDependencies. I couldn't find any information about this in the npm documentation when using the command npm install: ...

Fuel Calculation - Unable to pinpoint the error

My JavaScript Code for Calculating CO2 Emissions I'm working on a program that calculates how much CO2 a person produces per kilometer. This is part of my school project and I'm still learning, so please bear with me... I also just signed up on ...

There seems to be an issue with locating a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables like Arrays

My route.js const express = require('express'); const router = express.Router(); const University = require('../models/university'); var mongo = require('mongodb').MongoClient; var assert = require('assert'); va ...

"Extending Material-UI: Utilizing Multiple Snackbar Components

I've been struggling to display multiple warnings using Snackbar from the Material UI library in my React project. I haven't found any examples with React, only Vue. Can anyone help me with this? Here is the code that I have tried so far: https: ...

Tips on updating service variable values dynamically

I need to update a date value that is shared across all controllers in my website dynamically. The goal is to have a common date displayed throughout the site by updating it from any controller and having the new value reflected on all controllers. Can yo ...

Converting Arrays into Objects with Multiple Dimensions

I have been attempting to transform this complex array into an object. However, I am facing an issue where only the second part of the array is being saved in the object, while the first part is missing. Is there a way to ensure that the entire array gets ...

Combine array elements in Angular/Javascript based on a certain condition

Is there a way to combine elements from two arrays while avoiding duplicates? array = [ {id: 1, name:'abc'},{id: 1, name:'xyz'},{id: 2, name:'text1'},{id: 2, name:'text2'} ]; The desired output is: result = [{id: ...

Tips for incorporating the multiply times async function into mocha tests

I am attempting to utilize the async function foo multiple times in my mocha tests. Here is how I have structured it: describe('This test', () => { const foo = async () => { const wrapper = mount(Component); const button ...

summing 3 numbers to a total of 100 percent

I am currently trying to calculate the percentages of different statuses based on 3 count values. Let's assume I have 3 statuses: 1) Passed 2) Failed 3) Skipped When dealing with only two cases, I was able to use a combination of the Floor and Ceil ...

After logging out, Next-auth redirects me straight back to the dashboard

In my NextJS application, I've implemented a credential-based authentication flow along with a dashboard page. To handle cases where an unauthorized user lands on the dashboard route, I've created a custom AccessDenied component. In the getServer ...