javascript - FullCalendar list view - how to hide "all-day" - Stack Overflow

admin管理员组

文章数量:1310143

I have a FullCalendar List view.

All of the entries in the view will always be "all day" events. Therefore I don't really need the "all-day" that appears in the left column. Is there a way to remove this from the list?

$(document).ready(

  function() {

    var calendarEl = document.getElementById('date_list');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'list' ],
        defaultView: 'listThirtyDay',
        height: 'auto',
        views: {
            listThirtyDay: {
                type: 'list',
                duration: { days: 30 },
                buttonText: '30 days'
            },
            listDay: { buttonText: 'Day' },
            listWeek: { buttonText: 'Week' }
        },
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'listDay,listWeek,listThirtyDay',
        },
        time: false,
        eventSources: [
            {
                url: $('.KeyDatesURL').val()
            }
        ]
    });
    calendar.render();      
  } 
);

I have a FullCalendar List view.

All of the entries in the view will always be "all day" events. Therefore I don't really need the "all-day" that appears in the left column. Is there a way to remove this from the list?

$(document).ready(

  function() {

    var calendarEl = document.getElementById('date_list');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'list' ],
        defaultView: 'listThirtyDay',
        height: 'auto',
        views: {
            listThirtyDay: {
                type: 'list',
                duration: { days: 30 },
                buttonText: '30 days'
            },
            listDay: { buttonText: 'Day' },
            listWeek: { buttonText: 'Week' }
        },
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'listDay,listWeek,listThirtyDay',
        },
        time: false,
        eventSources: [
            {
                url: $('.KeyDatesURL').val()
            }
        ]
    });
    calendar.render();      
  } 
);

• javascript
• html
• css
• fullcalendar
• fullcalendar-4

Share Improve this question Follow edited Mar 20, 2020 at 9:41 ADyson 62.1k1616 gold badges7777 silver badges9191 bronze badges asked Mar 20, 2020 at 9:29 Martin PerrieMartin Perrie 41077 silver badges1717 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

If you inspect the rendered HTML elements using your browser's Developer Tools you'll see the time text in a List view is kept inside a HTML element with the class "fc-list-item-time".

Therefore you can set a simple CSS rule to hide it:

.fc-list-item-time {
  display:none;
}

Live demo: https://codepen.io/ADyson82/pen/GRJByop

You can use this:

allDaySlot: false

See this link here - https://fullcalendar.io/docs/allDaySlot

also you can refer this: How to remove allDay from view in fullcalender JS?

*(Fullcalendar versions 5 + 6)

If you simply hide the area that contains the text 'all-day' - you prevent the utilization of that area pletely. If you wish to continue to utilize the space where the 'all-day' text is - you could use the method below.

You can utilize 'eventDidMount' function and JQUERY to target the area that holds the text 'all-day'

eventDidMount: function(object) {

   // remove 'all-day' text
   $(object.el).children(':first-child').text('');

   // continue on with other customization
   $(object.el).children(':first-child').append("<img src='img/icons/my_image.png' style='width: 24px;'>");
    
});

On Fullcalendar 6 you can use:

.fc-list-event-time {
  display:none;
}

本文标签： javascriptFullCalendar list viewhow to hide quotalldayquotStack Overflow