On page load, I am attempting to populate events with different colors (red, yellow, green) on each day of the calendar. Here is a simple example showcasing events for three days:
I have data in a model that indicates the available amount of free pallets for orders on specific dates. If there are less than 10 free pallets, the event should display as red; if it's between 10 and 149, then it should be yellow, and so on (as illustrated in the example).
This is the current script for "FullCalendar":
<script type="text/javascript">
var calendar = new FullCalendar.Calendar($("#calendar")[0], {
plugins: ['interaction', 'dayGrid'],
height: 'auto',
defaultView: 'dayGridMonth',
weekNumberCalculation: 'ISO',
weekNumbers: true,
events: [
{
title: '150-300',
start: '2020-07-16',
color: 'green'
},
{
title: '10-149',
start: '2020-07-15',
color: 'yellow'
},
{
title: '<10',
start: '2020-07-14',
color: 'red'
}],
dateClick: function (info) {
window.location.href = "Incoming?date=" + info.dateStr;
}
});
calendar.render();
calendar.select('@(Model.Date?.ToString("yyyy-MM-dd"))');
</script>
The pre-defined events provided above are simply examples.
My goal is to dynamically generate colored events on every date within a month when the page loads, based on the data from the model in my MVC (.Net) application. How can I achieve this?
I have attempted various solutions suggested in this forum for dynamically adding events, but they either don't work or involve unnecessary post actions, which I believe are not needed in this case.
UPDATE
I have tried creating a JsonResult action in my controller, generating a valid Json string that I can feed to FullCalendar. Unfortunately, it does not seem to be working. Here is the action:
public JsonResult GetCalendarEvents(string id, DateTime? date)
{
//Database related code to get dates and their amount of free pallets (this is where I use the id and date parameters)
var idEvent = 1;
foreach (var v in days)
{
var title = "";
var color = "";
var freecap = (v.DayOfWeek == DayOfWeek.Friday ? 200 : 300) - model.Incomings.Where(x => x.ExpectedDate == v &&
x.ExpectedPallets.HasValue).Sum(x => x.ExpectedPallets);
if(freecap >= 150)
{
title = "150-300";
color = "green";
} else if(freecap < 150 && freecap >= 10)
{
title = "10-149";
color = "yellow";
} else
{
title = "<10";
color = "red";
}
events.Add(new CalendarEvent { id = idEvent, title = title, allDay = "", start = v.Date.ToString().Substring(0,10), end = v.Date.ToString().Substring(0, 10), color = color });
idEvent++;
}
}
return Json(events, JsonRequestBehavior.AllowGet);
The generated Json result appears like this:
[{"id":1,"title":"150-300","allDay":"","start":"19-07-2019","end":"19-07-2019","color":"green"},{"id":2,"title":"150-300","allDay":"","start":"22-08-2019","end":"22-08-2019","color":"green"},{"id":3,"title":"150-300","allDay":"","start":"30-08-2019","end":"30-08-2019","color":"green"}]
The attributes id, allDay, and end were added following the advice from a top answer on this post: Jquery Full Calendar json event source syntax, but unfortunately, that didn't solve the issue.
Despite these efforts, none of the events appear on the calendar, yet the page and calendar load without any issues (without events displayed). What could I be overlooking here?