I have an asp.net app that is using fullcalendar, and I am trying to use the calendar javascript file to call the API endpoint and retrieve the list of events from the database that way, and then use those list of events to populate the calendar.
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import { req } from 'superagent';
let eventsArr = [];
document.addEventListener('DOMContentLoaded', function () {
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
plugins: [dayGridPlugin, timeGridPlugin, listPlugin],
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev, next today',
center: 'title',
right: 'dayGridMonth, timeGridWeek, listWeek'
},
events: function (fetchInfo, successCallback, failureCallback) {
fetch('/HealthCareTeams/patientList/1A0B71B3-61E4-4096-B647-70FAE91590DB', {
headers: {
'Accept': 'application/json'
}
})
.then(response => response.json())
.then(data => successCallback(data))
.catch(err => failureCallback(err)),
}
});
calendar.render()
});
Here is the controller method:
[HttpGet("patientList/{patientID}")]
public async Task<IActionResult> ReturnPatientApptListAsync(Guid patientID)
{
var healthCareTeams = await healthCareTeamRepository.ReturnPatientApptListAsync(patientID);
var calendarEvents = healthCareTeams.Select(hct => new
{
title = hct.Specialty ?? "Appoinment",
start = hct.Appointment.ToString("s")
});
return new JsonResult(calendarEvents);
}
HEre is the repo method:
public async Task<HealthCareTeam[]> ReturnPatientApptListAsync(Guid patientID)
{
var healthCareTeams = await planMyMDVisitContext.HealthCareTeams.Where(hct => hct.PatientId == patientID).ToArrayAsync();
return healthCareTeams;
}
Here is the JavaScript part of the cshtml page placing the calendar:
<div id="calendar-container">
<div id="calendar"></div>
</div>
</div>
<script type="module" src="~/dist/calendar.js"></script>
When I run the app, and place this URL in the browser…..https://localhost:7189/HealthCareTeams/patientList/1A0B71B3-61E4-4096-B647-70FAE91590DB, it is giving me a JSON array of the data contained in the database. I have looked at the console quite a few times, and no errors are showing up in there, and I have also looked at the network tab of chrome, and have seen this error many times:
(failed) net::ERR_BLOCKED_BY_ORB
I have tried to follow chatgpt suggestions to fix this error, including putting in proper CORS code into Program.cs, and that error still keeps popping up. Part of me thinks that’s the issue, part of me is not sure. But I feel like I have hit a wall.
