设计时间表
有人可以帮我设计学生的时间表吗？以下屏幕截图数据是从2个模型中的数据库中获取的，第一个模型具有该学生的不同start_time和end_time，第二个模型具有start_time，end_time和课程详细信息，在视图中我正在运行在model1中的每个项目上循环，在model2中每天的另一个内部循环，请参阅下面的代码了解详细信息
问题是：我想组织与Outlook日历（图像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>
2 个答案:
答案 0 :(得分：1)
您需要在此处查看完整日历（https://fullcalendar.io/）日视图。
图书馆非常可扩展，而且我经常使用它。
答案 1 :(得分：1)
使用您当前的<table>布局，您可以使用rowspan元素的<td>属性，以允许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来设计它。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？