Question

我正在尝试自定义以下内容的完整日历。我需要在fullcalnedar的日列表视图上向事件添加折叠面板或jquery slidetoggle。单击某个事件后，它应该向下或向上滑动面板，该面板将提供有关该事件的一些信息。截至目前，完整的日历库都无法使用列表视图折叠功能。任何人都有想法，该怎么做？

这是我的项目链接：- https://github.com/mahi007rocks/custom_calendar

这是代码，到目前为止，我已经完成了 index.html.erb

我已经阅读了完整的日历文档，没有可用的列表视图折叠功能，并且谷歌搜索也不起作用

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

 <script type="text/javascript">
  $(document).ready(function() {
   $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'listDay,agendaWeek'
      },

      // customize the button names,
      // otherwise they'd all just say "list"
      views: {
        listDay: { buttonText: 'list day' },
        listWeek: { buttonText: 'list week' }
      },

      defaultView: 'listDay',
      defaultDate: '2019-01-02',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      events: [
        <% @data.each do |f| %>
          {
            title: '<%= f[:name]%>',
            start: '<%= f[:start_time] %>',
            end: ' <%= f[:end_time] %>',
            description: 'first description',
            addStar: "star",
            addNote: "Notes"
          },

        <% end %>
      ],
      eventRender: function(event, element) { 
      element.find('.fc-list-item-title').append(" 
     <br/>Slide toggle text should come here" + event.description); 
      }
    });

   });
 </script>

当我在日列表视图中单击任何事件时，该事件应向下滑动，并应显示文本“幻灯片切换文本应在此处”。但是使用当前的实现，我无法完成此操作。任何帮助将不胜感激。

Answer 1

我无需使用jQuery滑动切换就可以实现此目的。仅针对全日历的列表日视图进行开发。在脚本文件事件中，单击。单击“。fc-list-item” 类时，我们会将“。cat” 类绑定到具有一定高度的fc-list-item。这给人以滑动切换的感觉。单击列表日视图中的任何事件，它将向下滑动，如果再次单击，它将向上滑动。

index.html.erb

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

  <style>
    .cat{
      height: 50px;
    }
  </style>

<script type="text/javascript">
    $(document).ready(function() {

            $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'listDay,agendaWeek'
      },

      // customize the button names,
      // otherwise they'd all just say "list"
      views: {
        listDay: { buttonText: 'list day' },
        listWeek: { buttonText: 'list week' }
      },

      defaultView: 'listDay',
      defaultDate: '2019-01-03',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      events: [
        <% @data.each do |f| %>
          {
            title: '<%= f[:name]%>',
            start: '<%= f[:start_time] %>',
            end: ' <%= f[:end_time] %>',
            description: 'first description',
            addStar: "Add or remove",
            addNote: "Edit event notes",
            bell: "Notification settings",
          },

        <% end %>
      ],
      eventRender: function(event, element) {

      var color = element.find('.session-color')
      var bell = element.find('.bell-icon')
      var notes = element.find('.notes-icon')
      var slide = element.find('.slide-down')

      color.prepend("<i class='fa fa-star'></i>");
      bell.prepend("<i class='fa  fa-bell'></i>");
      notes.prepend("<i class='fa fa-sticky-note'></i>");
      slide.prepend("<i class='fa  fa-angle-down fa-2x'></i>");
      // element[0].title = "This is your name";
      // element[0].addNote = "Please add note"
      },
     eventClick: function(event,calEvent, jsEvent, view) {
          $(".bell-icon").click(function(){
            alert("bell here");
          })
          $(".fc-list-item").click(function(event, calEvent, jsEvent, view){

            var first_name = this.nextElementSibling
            if ( !first_name || first_name.className == "fc-list-item"){
              var slot_time = $(this)[0].querySelector(".fc-list-item-time").innerHTML
              // var star = $(this)[0].querySelector(".custom-class").innerHTML;
              var name = $(this)[0].childNodes[5].querySelector('a').innerHTML;

              $(this).after('<div class="cat"></div>');
              $(this).after('<div class="mat"></div>');

              $('.cat').append(slot_time);
              $('.mat').append(name);
            }
            else{
              $('.cat').remove();
              $('.mat').remove();
            }
          });
         }

       });
     });
  </script>

在全日历的日列表视图中单击事件后，将jQuery slidetoggle添加到事件

1 个答案: