如何更改FullCalendar插件的选项?

时间:2014-10-29 09:35:41

标签: jquery events calendar

在Rails 4.1.4中,我使用gem'fulccalendar_engine'来表示日历事件。通过https://github.com/vinsol/fullcalendar-rails-engine

推荐

$('.calendar').fullCalendar(full_calendar_options);如果我使用此行,我可以在日历上创建活动,但无法更改UI(添加自定义选项)。

如果我使用下面的代码(自定义选项),日历主题将得到更改,但无法创建事件(点击任何单元格时),也不会显示已创建的事件。

var options = {
  theme: true,
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  }
};

$('.calendar').fullCalendar(options);

$('.calendar').fullCalendar();  // events creation and display will not happen

在index.html.erb中,

<p>
  <%= link_to 'Create Event', 'javascript:void()', id: 'new_event' %>
</p>
<div>
  <div class='calendar'></div>
</div>
<div id="event_desc_dialog" class="dialog" style="display:none;"></div>
<div id="create_event_dialog" class="dialog" style ="display:none;">
  <%= render 'form' %>
</div>

 <script type="text/javascript">

  $(document).ready(function(){
  var options = {
    theme: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    }
  };

  $('.calendar').fullCalendar(options);
  $('#new_event').click(function(event) {
    FullcalendarEngine.Form.display()
    event.preventDefault();
  });
 });
</script>

我必须通过UI更改和功能修复来完成此功能。请帮我解决这个日历问题。

1 个答案:

答案 0 :(得分:1)

您可以编辑config/fullcalendar.yml文件以添加将覆盖full_calendar_options全局JS变量提供的默认值的自定义选项。这将覆盖您实例化的任何日历的选项。

如果您只想覆盖一个日历实例,可以使用以下代码:

var options = {
  theme: true,
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  }
};

$('.calendar').fullCalendar($.extend(full_calendar_options,options));

您可以在此处查看fullcalendar_engine gem的默认fullcalendar选项: https://github.com/vinsol/fullcalendar-rails-engine/blob/master/config/initializers/configuration.rb