ASP.Net Core 中的日历

Question

Please let me know if this question is posted in the wrong place of Stack - I will make sure to delete this and re-write a new post in the correct place. As of now, I saw similar questions around here and deemed this acceptable as well.

So, I am wondering what should I use in order to create a view with a calendar on the whole page that has dates highlighted depending on the database dates. For example, in the database, I have the following table:

Therefore, as I said - in the calendar view, there should be a huge calendar with the StartDate and EndDate highlighted with certain colors, also stating the Name of the Release.

How could this be possible? I am pretty new to this stuff so I am looking for some hints on how I should approach this issue.

Thanks a lot!

Answer 1

It think you posted this at the proper spot. Your tags look great.

If you are familiar with JavaScript and ASP.Net Core Web APIs I would recommend Full Calendar .

1. Add a controller to your ASP.Net Core project in the Controllers folder.
2. Add Full Calendar to your page. ( Read this. )
3. Full Calendar will call your API for the event data. (reference the Full Calendar docs for the return JSON format)

Wishing you the best.

Answer 2

I'd recommend going for a jQuery UI approach. You can customise it freely (see their documentation)

You can use AJAX/jQuery or something to get the dates from the database via a method in your controller. Then display the calendar in a div.

Here's a jsfiddle.

http://jsfiddle.net/Lhpc7zt2/1/

var events = [ 
{ Title: "Birthday", Date: new Date("12/12/2019") }, 
{ Title: "Christmas", Date: new Date("12/25/2019") }, 
{ Title: "Boxing Day", Date: new Date("12/26/2019") }
];

$("#calendar").datepicker({
beforeShowDay: function(date) {
    var result = [true, '', null];
    var tooltip = "";
    var matching = $.grep(events, function(event) {
        if (event.Date.valueOf() === date.valueOf()) {
        tooltip = event.Title;
        return true;
      }
    });

    if (matching.length > 0) {
        result = [true, 'event', tooltip];
    }
    return result;
}
});

To get the JSON from the controller:

var events;    
$.getJSON('dateController/read', null, function(output) {
    events = output;
}

Then your controller action would be something like:

[HttpGet]
public IActionResult read()
{
    //Database call to read dates and convert them to JSON object...

    List<SelectedDates> highlightDates = new List<SelectedDates>();
        highlightDates.Add(new SelectedDates { Date = new DateTime(2019, 12, 
    1), Title = "Birthday" });

    return Json(highlightDates);
}