fullcalender

1. ruby 安装 fullcalender

gem install fullcalender

2. rails 安装 fullcalender

# 1. Gemfile 添加如下，前两个支持，必须有
gem 'jquery-rails'
gem 'momentjs-rails'
gem 'fullcalendar'
# 2. 运行安装，如果在ruby中通过gem install单独安装过了，此步骤可以忽略
bundle install

3. 通过命令行在项目中添加，运行见图1

rails g fullcalendar:install

图1

通过手动添加

# 1.app/assets/javascripts/application.js:
//= require jquery
//= require calendar

//Core component
//= require fullcalendar
// optional locale
//= require fullcalendar/locale/ms

//Optional addon scheduler
//= require fullcalendar/scheduler

# 2. app/assets/stylesheets/application.css:
/*
*= require calendar
*/
@import 'calendar';
@import 'fullcalendar';
@import 'fullcalendar/scheduler';

4. 页面中使用

$(document).ready(function() {
  $("#calendar").fullcalendar();
});

---

引用：https://www.rubydoc.info/gems/fullcalendar/3.9.0

附xx.html.erb例子一个：

<div id='calendar'></div>

<script>

    $(document).ready(function() {
        var initialLocaleCode = 'zh-cn';

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listMonth'
            },
            defaultDate: '2019-01-12',
            locale: initialLocaleCode,
            buttonIcons: false, // show the prev/next text
            weekNumbers: true,
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
                {
                    title: 'All Day Event',
                    start: '2019-01-01'
                },
                {
                    title: 'Long Event',
                    start: '2019-01-07',
                    end: '2019-01-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2019-01-09T16:00:00'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2019-01-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: '2019-01-11',
                    end: '2019-01-13'
                },
                {
                    title: 'Meeting',
                    start: '2019-01-12T10:30:00',
                    end: '2019-01-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2019-01-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2019-01-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2019-01-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2019-01-12T20:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2019-01-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2019-01-28'
                }
            ]
        });

        // build the locale selector's options
        $.each($.fullCalendar.locales, function(localeCode) {
            $('#locale-selector').append(
                $('<option/>')
                    .attr('value', localeCode)
                    .prop('selected', localeCode == initialLocaleCode)
                    .text(localeCode)
            );
        });

        // when the selected option changes, dynamically change the calendar option
        $('#locale-selector').on('change', function() {
            if (this.value) {
                $('#calendar').fullCalendar('option', 'locale', this.value);
            }
        });
    });

</script>
<style>

  body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #top {
    background: #eee;
    border-bottom: 1px solid #ddd;
    padding: 0 10px;
    line-height: 40px;
    font-size: 12px;
  }

  #calendar {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 10px;
  }

</style>