Question

我正在尝试制作一个网络应用程序，允许（学生）用户查看他们可以拥有的所有可能的课程表。现在，我有一个适合某些约束的类列表（用户所需的类）。我想创建可以使用这些类的组合制作的所有可能的计划。似乎FullCalendar可能是我想要显示这些日程表（仅在一周视图或其他东西）但我不确定我是否可以使FullCalendar只显示可能的日程安排，然后允许用户点击可能的日程安排在后端分配所有类日期或东西。

简而言之： FullCalendar是我想用的吗？或者还有其他更适合我目标的东西吗？

以下是我到目前为止的代码（仍在弄清楚如何从此列表中获取所有可能的时间表列表）

<!DOCTYPE html>
<html>
<head>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<h2 id="search_results"></h2>

<div id="morning_results_container">
    <h5>Morning Courses</h5>
    <ul id="morning_results_list">
    </ul>    
</div>

<script>

    $(document).ready(function() {


$.getJSON("http://vazzak2.ci.northwestern.edu/courses/?term=4540&subject=EECS", function(result) {
    var earlyCourses = [];

    $(result).each(function (index, item) {
        $('#search_results').text((index+1) + " total courses");

        if (item.start_time > '10:00:00') {
            if (item.meeting_days === 'We'){
            console.log(item);
                $('#morning_results_list').append('<li>' +   item.title + '</li>');
            }
        }        
    });
});


    });


</script>
</head>
<body>
    <div id="resultarea"></div>
</body>
</html>

感谢您提供的任何体验建议！

Answer 1

是的，我认为您可以使用您正在使用的jquery FullCalendar插件来实现您喜欢的操作。我不确定是否有更好的插件用于您的目的。 FullCalendar几乎为任何类型的Web应用程序的交互式日历提供了非常好的用户界面。

但是，您可以根据用户的UI交互在Web应用中实现应该执行的操作。你能提供一个包含所有时间表的JSON输出的例子吗？据我了解您的问题，也许您可以允许用户从下拉列表中选择一个计划，然后在日历中显示所选计划的类。

<强> [更新]

function load_all_classes()
{
    $.getJSON("http://vazzak2.ci.northwestern.edu/courses/?term=4540&subject=EECS", function(data) {
       window.all_classes = data;

    });
}

function update_calendar(classes)
{
    //update calendar to display the given classes
}

function get_classes_before_10_am()
{
    var results = [];

    $(window.all_classes).each(function (index, the_class) {

       if (the_class.start_time <= '10:00:00') {
         results.push(the_class);                            
       }    

    });

    return results;
}

$(document).ready(function() {

   load_all_classes();

   $('#select_schedule').change(function(){
        if ($(this).val = 'Before 10 am')
        {
           update_calendar(get_classes_before_10_am());
        }
        else if ($(this).val = 'After 10 am')
        {
          update_calendar(get_classes_after_10_am());
        }
        //...etc
    }); 

 });

FullCalendar是用于制作调度应用程序的正确选择吗？

1 个答案: