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

Question

I'm trying to customise the full calendar for the following. I need to add collapsing panel or jquery slidetoggle to an event on day list view of fullcalnedar. On clicking on an event it should slide down or up a panel, this panel will some information regarding that Event. As of now list view collapsing is not available with full calendar library. Any one have idea, how to do this?

Here is my project link:- https://github.com/mahi007rocks/custom_calendar

Here is code, i have done so far

I have gone through full calendar documentation, there list view collapsing is not available and bit googling also not helpful

 <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>

When i click on any event in day list view, the event should slide down and should show the text "Slide toggle text should come here". But with current implementation i was not able complete this. Any help would be appreciated.

Answer 1

I'm able to achieve this somehow without jquery slide toggle. This is developed only for list-day-view of fullcalendar. In script file event Click is there. On click of ".fc-list-item" class, we're binding ".cat" class to fc-list-item with some height. This gives a feel of slide toggle . On click of any event in list-day-view , it'll slide down and if you click again it'll slide up.

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>