Laden...

Blazor: wie mache ich es das ich jeden Monat in einen neuen Tab anzeigen kann?

Letzter Beitrag vor einem Jahr 2 Posts 621 Views
Blazor: wie mache ich es das ich jeden Monat in einen neuen Tab anzeigen kann?

Guten Morgen,

ich versuche momentan ein Kalender auf der Webseite zu visualisieren. Der Kalender wird auch soweit angezeigt, aber nun möchte ich, das nicht alles aufeinmal angezeigt wird, sondern das ich durch Tab klicks zum nächsten Monat komme. ich hätte auch ne Idee. nach jeden Monats ende ein neuen DIV erstellen der dann in den neuen Tab erscheinen soll,  aber leider kann man keine divs in   <tr> setzen im bild habe ich es noch mal Visualisiert.

Code.

<table class="table">
   <tbody>
       <tr>
           <td> </td>
               @for (int month = 1; month <= 12; month++)
               {
                   for (int day = 1; day <= DateTime.DaysInMonth(DateTime.Now.Year, month); day++)
                   {
                       DateTime curDay = new DateTime(2024, month, day);
                       <td style="text-align:center">@curDay.Day</td>
                   }
               } 
       </tr>
       @foreach (var user in ViewModel.GetAllUser())
       {
           <tr>
               <td>@user.Name</td>
               @foreach (var day in ViewModel.Days)
               {
                   if (day.IsWeekend)
                   {
                       <td class="border-1" style="background:#B10000"></td>
                   }
                   else
                   {
                       switch (day.DateType)
                       {
                           case Services.Database.Enums.CalenderDayTypeEnum.SchoolHoliday:
                               <td class="border-1" style="background:#C9CCD1"></td>
                               break;
                           case Services.Database.Enums.CalenderDayTypeEnum.Holiday:
                               <td class="border-1" style="background:#E8494C"></td>
                               break;
                           default:
                               <td class="border-1"></td>
                               break;
                       }
                   }
               }
           </tr>
       }
   </tbody>
</table>

Das hat mit Blazor nichts am Hut, das sind einfache HTML Strukturgrundlagen - und die besagen dass in einem tr kein div stecken kann.

Tabellen-Controls sind eh nicht unbedingt die modernste Art und Weise, weil sie Limits bei responsiveness haben. Musst Dir also eine andere Struktur überlegen, zB über Flexbox Tables.