带Jquery的完整日历导轨

时间:2015-04-28 14:57:47

标签: jquery ruby-on-rails json calendar

我正在努力使用Fullcalendar,因为我对jquery没有太多经验。

我有一个事件模型,column names; price:floatavailability:stringstart_date:datetimeend_date:datetime

用户注册后,他们会填写可用性和价格的形式。所以,我想做的是,当用户访问特定页面时(比如说事件的index.html.erb),日历将用价格填满每个日期。过去的日子无法点击。这是我希望看到的图像;

enter image description here

在日历上,如果用户点击日期弹出窗口,他/她可以更新日期,这是图像;

enter image description here

但是日历上只能有一个价格。无论用户选择日期还是日期范围,都应该更新那些日期,而不是添加新行。这是另一个img;

enter image description here

所以,我想在Rails中验证唯一性,然后T认为它会给出错误。我尝试在日历外部放置一个按钮,当用户点击日期弹出窗体时,它会对#create动作起作用。如果我尝试类似的东西;

<%= form_for @event, :url => url_for(:controller => 'events', :action => 'update') do |f| %>

  <div class="field">
    <%= f.label :price %><br>
    <%= f.text_field :price %>
  </div>
  <div class="field">
    <%= f.label :availability %><br>
    <%= f.text_area :availability %>
  </div>
  <div class="field">
    <%= f.label :start_time %><br>
    <%= f.datetime_select :start_time %>
  </div>
  <div class="field">
    <%= f.label :end_time %><br>
    <%= f.datetime_select :end_time %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %> 

但是当我使用#update时,它会抛出一个错误。 到目前为止,这是jquery,几乎是空的;

<script>
$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here

          eventSources: [

                // your event source
                {
                    url: 'events.json', // use the `url` property
                    color: 'yellow',    // an option!
                    textColor: 'black'  // an option!
                }

                // any other sources...

            ]

    })

});
</script>

我发现这会使过去的日期无法选择,但却无法进入jquery。(我很缺乏经验)

select: function(start, end, allDay) {
    var check = $.fullCalendar.formatDate(start,'yyyy-MM-dd');
    var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
    if(check < today)
    {
        // Previous Day. show message if you want otherwise do nothing.
                // So it will be unselectable
    }
    else
    {
        // Its a right date
                // Do something
    }
  },

0 个答案:

没有答案