How to add a Scheduler for each instance in ASP.NET MVC?

Question

I'm writing a web application using ASP.NET MVC, and I added a calendar and a database.

The database looks like this:

Now I want to add for each class, option of calendar. Should it be an option of button on class 1, then it will send me to his own calendar?

• Class 1 building 1 needs his own calendar,
• Class 2 building 1 needs his own calendar etc.

I already have a working calendar, but I don't fully understand how to implement this.

This is the calendar that I have in Index.cshtml:

@{
    ViewBag.Title = "Index";
}
        
<h2>Index</h2>

<div id="calender"></div>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><span id="eventTitle"></span></h4>
                </div>
                <div class="modal-body">
                    <p id="pDetails"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />

    @section Scripts {
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>  
        <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar   /3.4.0/fullcalendar.min.js"></script>

        <script>
        $(document).ready(function () {
            var events = [];
            $.ajax({
                type: "GET",
                url: "/home/GetEvents",
                success: function (data) {
                    $.each(data, function (i, v) {
                        events.push({
                            title: v.Subject,
                            description: v.Description,
                            start: moment(v.Start),
                            end: v.End != null ? moment(v.End) : null,
                            color: v.ThemeColor,
                            allDay: v.IsFullDay
                        });
                    })

                    GenerateCalender(events);
                },
                error: function (error) {
                    alert('failed');
                }
            })

            function GenerateCalender(events) {
                $('#calender').fullCalendar('destroy');
                $('#calender').fullCalendar({
                    contentHeight: 400,
                    defaultDate: new Date(),
                    timeFormat: 'h(:mm)a',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,basicWeek,basicDay,agenda'
                    },
                    eventLimit: true,
                    eventColor: '#378006',
                    events: events,
                    eventClick: function (calEvent, jsEvent, view) {
                        $('#myModal #eventTitle').text(calEvent.title);
                        var $description = $('<div/>');
                        $description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
                        if (calEvent.end != null) {
                            $description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                        }
                        $description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
                        $('#myModal #pDetails').empty().html($description);

                        $('#myModal').modal();
                    }
                })
            }
        })
    </script>
}

This is the how I'm implements the DB in ClassDAO.cs

using ClasSaver.Models;
using System.Collections.Generic;
using System.Data.SqlClient;

namespace ClasSaver.Data
{
    internal class ClassDAO
    {
        private string connectionString = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=ClassaverDB;Integrated Security=True;MultipleActiveResultSets=True;Application Name=EntityFramework";

        public List<ClassesModel> FetchAll()
        {
            List<ClassesModel> returnList = new List<ClassesModel>();

            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                string SqlQuery = "SELECT * FROM dbo.Classes";

                SqlCommand Command = new SqlCommand(SqlQuery, connection);

                connection.Open();

                SqlDataReader reader = Command.ExecuteReader();

                if (reader.HasRows)
                {
                    while (reader.Read())
                    {
                        ClassesModel classes = new ClassesModel();
                        classes.Id = reader.GetInt32(0);
                        classes.Name = reader.GetString(1);
                        classes.Building = reader.GetString(2);
                        classes.How_Many_In_Class = reader.GetString(3);

                        returnList.Add(classes);
                    }
                }
            }

            return returnList;
        }
    }
}

I have a working calendar and a working DB, how can I implements this? if there is a similar thread/youtube I would like to see, I just didn't saw something like this.