Расчетное расписание

Question

Может ли кто-нибудь помочь мне в разработке расписания студента? Нижеследующие данные скриншотов извлекаются из базы данных в 2 Модели, первая модель имеет отличный start_time и end_time для этого ученика, а вторая модель имеет start_time, end_time и данные курса, в представлении я запускаю цикл по каждому элементу модели 1 и другим внутренним петлям для каждого дня в модели2, см. ниже код

Вопрос: Я хочу организовать расписание, такое же, как календарь перспективы (изображение 2), сгенерировать квадрат с самого начала время до конца, я пробовал большинство плагинов для управления этим без каких-либо успехов.

Благодаря

<div class="row"> 
<div class="col-md-12"> 
    <div class="box box-primary"> 
     <div class="box-body"> 

      <table class="table table-bordered" style="background-color:white !important;"> 
       <thead> 
        <tr class="bg-primary align-center"> 
         <td class="text-bold" width="10%">Time</td> 
         <td class="text-bold" width="15%">Sunday</td> 
         <td class="text-bold" width="15%">Monday</td> 
         <td class="text-bold" width="15%">Tuesday</td> 
         <td class="text-bold" width="15%">Wednesday</td> 
         <td class="text-bold" width="15%">Thursday</td> 
         <td class="text-bold" width="15%">Saturday</td> 
        </tr> 

       </thead> 
       @if (Model != null) 
       { 
        foreach (var item in Model.TimeSlot) 
        { 
         <tr class="align-center"> 
          <td class="bg-info text-bold" style="white-space: nowrap;">@item.BEGIN_TIME_DISP - @item.END_TIME_DISP</td> 
          <td class="drop" id="@("Sun" + item.BEGIN_TIME+item.END_TIME)"> 
           @foreach (var Sitem in Model.Schedule.Where(i => i.SUN == "U" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME)) 
           { 

            <span style="color:blue; font-weight:bold;"> 
             <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster"> 

              @Sitem.COURSE_CRN<br /> 
              @Sitem.COURSE_CODE 
             </a><br /> 
             @Sitem.COURSE_TITLE<br /> 
            </span> 
            @Sitem.ROOM_CODE 
            <span style="color:darkred; font-size:10px" class="sDate"> 
             <br /> 
             from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br /> 
            </span> 
           } 
          </td> 
          <td class="drop" id="@("Mon" + item.BEGIN_TIME+item.END_TIME)"> 
           @foreach (var Sitem in Model.Schedule.Where(i => i.MON == "M" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME)) 
           { 
            <span style="color:blue; font-weight:bold;"> 
             <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster"> 
              @Sitem.COURSE_CRN<br /> 
              @Sitem.COURSE_CODE 
             </a><br /> 
             @Sitem.COURSE_TITLE<br /> 
            </span> 
            @Sitem.ROOM_CODE<br /> 
                <span style="color:darkred; font-size:10px" class="sDate"> 

                 from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br /> 
                </span> 
           } 
          </td> 
          <td class="drop" id="@("Tue" + item.BEGIN_TIME+item.END_TIME)"> 
           @foreach (var Sitem in Model.Schedule.Where(i => i.TUE == "T" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME)) 
           { 
            <span style="color:blue; font-weight:bold;"> 
             <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster"> 
              @Sitem.COURSE_CRN<br /> 
              @Sitem.COURSE_CODE 
             </a><br /> 
             @Sitem.COURSE_TITLE<br /> 
            </span> 
            @Sitem.ROOM_CODE<br /> 
                <span style="color:darkred; font-size:10px" class="sDate"> 

                 from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br /> 
                </span> 
           } 
          </td> 
          <td class="drop" id="@("Wed" + item.BEGIN_TIME+item.END_TIME)"> 
           @foreach (var Sitem in Model.Schedule.Where(i => i.WED == "W" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME)) 
           { 
            <span style="color:blue; font-weight:bold;"> 
             <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster"> 
              @Sitem.COURSE_CRN<br /> 
              @Sitem.COURSE_CODE 
             </a><br /> 
             @Sitem.COURSE_TITLE<br /> 
            </span> 
            @Sitem.ROOM_CODE<br /> 
                <span style="color:darkred; font-size:10px" class="sDate"> 

                 from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br /> 
                </span> 
           } 
          </td> 
          <td class="drop" id="@("Thu" + item.BEGIN_TIME+item.END_TIME)"> 
           @foreach (var Sitem in Model.Schedule.Where(i => i.THU == "R" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME)) 
           { 
            <span style="color:blue; font-weight:bold;"> 
             <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster"> 
              @Sitem.COURSE_CRN<br /> 
              @Sitem.COURSE_CODE 
             </a><br /> 
             @Sitem.COURSE_TITLE<br /> 
            </span> 
            @Sitem.ROOM_CODE          <br /> 
                <span style="color:darkred; font-size:10px" class="sDate"> 

                 from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br /> 
                </span> 
           } 
          </td> 
          <td class="drop" id="@("Sat" + item.BEGIN_TIME+item.END_TIME)"> 
           @foreach (var Sitem in Model.Schedule.Where(i => i.SAT == "S" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME)) 
           { 
            <span style="color:blue; font-weight:bold;"> 
             <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster"> 
              @Sitem.COURSE_CRN<br /> 
              @Sitem.COURSE_CODE 
             </a><br /> 
             @Sitem.COURSE_TITLE<br /> 
            </span> 
            @Sitem.ROOM_CODE          <br /> 
                <span style="color:darkred; font-size:10px" class="sDate"> 

                 from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br /> 
                </span> 
           } 
          </td> 

         </tr> 
        } 
       } 
      </table> 

     </div> 
    </div> 
</div> 

Answer 1

С текущего <table> макета, вы можете использовать атрибут <td> элементов rowspan, чтобы позволить вашему Course продлить вниз несколько строк по вертикали.

Ваш текущий код просмотра, использующий несколько запросов в вашей модели данных, трудно читать и проверять и дублирует код. Вы должны начать с создания моделей представления для представления вашего дисплея, что в вашем случае означает, что вы представляете ячейку таблицы (содержащую свойства Course, которые вы хотите отобразить), один из которых представляет собой таблицу (коллекцию ячеек) и одну, представляющую таблицу (сбор строк).

public class CourseVM // represents a table cell 
{ 
    public string Code { get; set; } 
    ... // other properties of Course that will be displayed in the view 
    public int? TimeSlots { get; set; } 
} 

Свойство TimeSlot (за неимением лучшего названия) используется для определения количества строк (часов), что Course проходит вниз.

public class WeekVM // represents a table row 
{ 
    public WeekVM() 
    { 
     Days = new List<CourseVM>(); 
     // Hard code for 1 week, but could add a parameter in the constructor to generate a variable number of days 
     for (int i = 0; i < 7; i++) 
     { 
      Days.Add(new CourseVM()); 
     } 
    } 
    public List<CourseVM> Days { get; set; } 
} 

public class ScheduleVM // represents the table 
{ 
    public ScheduleVM(DateTime startDate, TimeSpan startTime, TimeSpan endTime) 
    { 
     StartDate = startDate.Date.Add(startTime); 
     TimeSlots = new List<WeekVM>(); 
     // Assume 1 hour slots 
     int intervals = (int)((endTime - startTime).TotalMinutes)/60; 
     for (int i = 0; i < intervals; i++) 
     { 
      TimeSlots.Add(new WeekVM()); 
     } 
    } 
    public DateTime StartDate { get; set; } 
    public List<WeekVM> TimeSlots { get; set; } 
} 

Затем в контроллере, инициализировать новый экземпляр ScheduleVM и установить его свойства на основе вами коллекции Course

// Set parameters (these may come from parameters in the method 
DateTime startDate = new DateTime(2017, 1, 22); 
TimeSpan startTime = new TimeSpan(9, 0, 0); 
TimeSpan endTime = new TimeSpan(16, 0, 0); 
// Get collection of data model 
IEnumerable<Course> courses = db.Courses.Where(...); 
// Initialize view model 
ScheduleVM model = new ScheduleVM(startDate, startTime, endTime); 
foreach(Course course in courses) 
{ 
    // Get row and column indexes of the table where this instance needs to be displayed 
    int dayIndex = (int)course.StartTime.DayOfWeek; 
    int slotIndex = course.StartTime.Hour - startTime.Hours; 
    // Determine how any rows this needs to span over 
    int timeSlots = (course.EndTime - course.StartTime).Hours; 
    // Set view model properties 
    var courseVM = model.TimeSlots[slotIndex].Days[dayIndex]; 
    courseVM.Code = course.Code; 
    courseVM.Title = course.Title; 
    courseVM.TimeSlots = timeSlots; 
    for (int i = 1; i < timeSlots; i++) 
    { 
     slotIndex++; 
     model.TimeSlots[slotIndex].Days[dayIndex].TimeSlots = 0; 
    } 
} 
return View(model); 

Обратите внимание, что для rowspan на работу, последующие строки должны опустить соответствующие <td> если клетка выше в нее. В приведенном выше коде блок if устанавливает значение TimeSlots в 0 в последующих строках, чтобы его можно было условно проверить в представлении. Затем открывается вид

@model ScheduleVM 
.... 
<table> 
    <thead> 
     <tr> 
      <th></th> 
      @for(int i = 0; i < 7; i++) 
      { 
       <th>@Model.StartDate.AddDays(i).DayOfWeek</th> 
      } 
     </tr> 
    </thead> 
    <tbody> 
     @foreach(var timeSlot in Model.TimeSlots) 
     {   
      <tr> 
       <td>@Model.StartDate.AddHours(rowIndex).ToString("hh:mm tt")</td> 
       @foreach(var course in timeSlot.Days) 
       { 
        if (!course.TimeSlots.HasValue) 
        {  
         <td></td> 
        } 
        else if (course.TimeSlots > 0) 
        { 
         <td rowspan="@course.TimeSlots"> 
          <div class="course"> 
           <div>@course.Code</div> 
           .... // other properties of course 
          </div> 
         </td> 
        } 
       } 
      </tr> 
      rowIndex++; 
     } 
    </tbody> 
</table> 

Для этого вам просто нужно немного css, чтобы создать его.

Answer 2

Полный календарь (https://fullcalendar.io/) день вид, что вы ищете здесь.

Библиотека очень расширяема, и я использую ее постоянно.