Good Practices and Use of Datetime in Viewmodels List

Question

I’m making a system for the client, and he dismissed the use of fullcalendar, which would be practical. With this, I created in a table with the fields Agendaid(int), and Scheduling(Datetime) years forward (about 20000 lines).

With that I rode the following Viewmodel:

public class AgendaAgendamentoVM
{
    public int Id { get; set; }
    public int? AgendamentoId { get; set; }
    public DateTime Date { get; set; }
    public int? ClienteId { get; set; }
    public string ClienteNome { get; set; }
}

And I have a second table named Reserve with the fields:

public class Reserva
    {
        public int ReservaId { get; set; }
        public int AgendaId { get; set; }

        [Required]
        public int ClienteId { get; set; }
        public string Servico { get; set; }

        public virtual Cliente Cliente { get; set; }
    }

And Customers

public class Cliente
{
    public int ClienteId { get; set; }

    [Column(TypeName = "varchar(50)")]
    public string Nome { get; set; }

    [Column(TypeName = "varchar(50)")]
    public string Telefone { get; set; }

    [Column(TypeName = "varchar(50)")]
    public string Endereco { get; set; }

    [Column(TypeName = "varchar(50)")]
    public string Email { get; set; }

    public DateTime DataCadastro { get; set; }

}

The Viewmodel code below returns every day from 6 am to 10 pm:

 IList<AgendaAgendamentoVM> _listaAgendaVM = new List<AgendaAgendamentoVM>();

        if (!String.IsNullOrEmpty(mes))
        {
            var data = DateTime.Parse(mes);
            ViewBag.Data = data;
            ViewBag.Ontem = data.AddDays(-1);
            ViewBag.Amanha = data.AddDays(1);

            var dias = await _context.Agenda
            .Where(x => x.DataAgenda >= data.AddHours(6))
            .Where(x => x.DataAgenda <= data.AddHours(22))
            .ToListAsync();


            foreach (var item in dias)
            {
                AgendaAgendamentoVM li = new AgendaAgendamentoVM();
                li.Id = item.AgendaId;
                li.Date = DateTime.Parse(item.DataAgenda.ToString());
                _listaAgendaVM.Add(li);
            }

            ViewData["ListaAgenda"] = _listaAgendaVM;
            return View();

A View:

@{
ViewBag.Title = "Agenda";
}

<form>
<input type="date" name="mes" required /> <input type="submit" value="Enviar" />
</form>
<div class="row m-1 p-2 bg-success rounded">

<div class="col-4">
    <a class="text-white" href="/Agenda/[email protected]("{0:d}", ViewBag.Ontem)"><</a>
</div>

<div class="col-4 text-center text-white font-weight-bolder">
    @String.Format("{0:d}", ViewBag.Data)
</div>


<div class="col-4 text-right">
    <a class="text-white" href="/Agenda/[email protected]("{0:d}", ViewBag.Amanha)">></a>
</div></div>

    <ul class="list-group m-1">
    @foreach (var item in ViewData["ListaAgenda"] as List<Camarim.Core.ViewModels.AgendaAgendamentoVM>)
{
    <li class="list-group-item"><a href="#[email protected]">@String.Format("{0:HH:mm}", item.Date) - @item.ClienteNome</a></li>

}

Only with the table Agenda, I can display a "navigable" calendar in a view according to the image:

Still in the Reserve table, I have a Clienteid field, where I return a specific customer. In the Viewmodel List, I use a foreach calling the Reservation table and Customers, according to the photo:

The problem with this is, by doing so, the view stops displaying the entire list from 6 to 22, only shows the fields where it has scheduled clients. My goal was to leave at least this way:

How can I get to this goal: and/OR another: There is some other way to do this without using the database for popular dates?