Добавьте jQuery slidetoggle к событию по щелчку на событии в виде списка дней полного календаря.

Question

Я пытаюсь настроить полный календарь для следующего. Мне нужно добавить сворачивающуюся панель или jquery slidetoggle к событию в виде дневного списка fullcalnedar. При нажатии на событие, оно должно скользить вниз или вверх по панели, на этой панели будет некоторая информация об этом событии. В настоящее время свертывание представления списка недоступно при полной библиотеке календаря. У кого-нибудь есть идеи, как это сделать?

Вот ссылка на мой проект: - https://github.com/mahi007rocks/custom_calendar

Вот код, который я сделал до сих пор index.html.erb

Я просмотрел полную документацию по календарю, свертывание представления списка недоступно и поиск в Google также не полезен

 <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. Это разработано только для просмотра списка календаря. В файле скрипта событие Click есть. При щелчке класса ". 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>