2

典型的日历涉及仅根据日期添加事件。每个事件通常只是按它们附加的日期列出。

我正在研究的是一个基于一天中的小时块的调度应用程序。因此，一个人可能能够在 08:00 到 12:00 之间安排会议室。用户将能够查看今天或任何其他日期......这将显示为查看的日期安排了哪些事件并将它们显示为保留时间块。

我需要以某种方式在 html 表中显示时间表。我正在努力解决的部分是 start_time 和 end_time 将需要在同一列中的表行之间垂直流动（见图）。

此外，时间表的所有者可以设置他们的工作时间。因此，如果他们的门在 09:00 开门并在 17:00 关门，那么这些时间（以 15 分钟为增量）将在表格左侧列出。并且，计划中的自定义“事件”将是表格头部的列。

该图像应该向您展示我正在尝试创建的内容。问题是，在 Schedule 模型中保存一条记录，其中包括谁安排了它、预订的日期以及该预订的开始和结束时间……然后，以某种方式将 css 类添加到适当的 td 和 tr 以显示表中的那个保留。

任何已经存在的想法、建议或宝石将不胜感激！

我正在使用 rails 3，ruby 2

在此处输入图像描述

4

1 回答 1

1

好的最好的方法是在你的控制器中创建一个 DateTime 对象来处理这个。然后，您可以循环遍历时间并获得您期望的输出，您还可以循环遍历事件，以便它生成您需要的单元格数量。完成所有这些之后，您必须做的下一件事是将 jQuery 对话框添加到单元格中，以便每个单独的单元格都是唯一可识别的。然后，您很可能希望在对话框中呈现部分内容，以便管理员可以创建这些计划。您将需要在 上使用 HTML5 数据属性，<td>以便您可以将此数据传递到应用程序中。我已经提供了一些起始代码供您在下面作为起点使用。

看法

<table class ="time_events">
  <thead>
    <tr>
      <th class="time">Time</th>
      <% @events.each do |eve| %>
        <th class="events-<%= eve.name %>"></th>
      <% end %>
    </tr>
  </thead>
  <tbody> 
    <% @time_range.each do |time| %> 
      <tr>
        <th>
          <%=time.to_formatted_s(:short)%>
        </th> 
        <% @events.each do |events| %> 
          <td class=time_slot> 
            <!--Do some more stuff here --> 
          </td>
      </tr>
  </tbody> 
</table>

如前所述，您可能希望在单元格上设置 jQuery 对话框，以便在单击单元格时出现对话框。有了这个，你可以在你身上做这样的事情application.js

应用程序.js

$(document).ready(function () {

    $('.time_events td').live('click', function (event) {

        var $target = $(this);
        // variable target find the class schedule 
        var $bf = $target.find('.event_form');
        //data of event_id is accessed by the .data() function
        var event = $target.data('event-id');

        $bf.dialog();
        //find the input value of the event_id.
        //Referenced via data-attributes.
        $bf.find('input#event_id').val(event);

        event.preventDefault();
    });
    $('.event_form.user_full_name').on('change', function (e) {
        this.form.submit();
    });
});

控制器

def index 

  @events = Event.all 

  @beginning_current = params[beginning_of_day].try(:to_time) || Time.now
  @time_range (@beginning_current.beginning_of_day..@beginning_current.end_of_day)

  respond_to do |format| 
   format.html
   format.json { render json: @events }

  end 
 end 
end

引用你说的：

问题是，在 Schedule 模型中保存一条记录，其中包括谁安排了它、预订的日期以及该预订的开始和结束时间。

如上所述，您需要使用 HTML5 数据属性将此数据传递给 application.js，以便它可以确定单击了哪个唯一单元格。做你想做的事情的替代方法是使用Ashraws 日历，它有完整的文档支持，可以根据你的需要调整它。

于 2013-05-26T22:05:16.257 回答