Search code examples
htmlcssfullcalendarfullcalendar-4fullcalendar-scheduler

remove column from timeLineview

I just created the most basic TimelineView under FullCalendar:

<!DOCTYPE html>
<html lang='fr'>
  <head>
    <meta charset='utf-8' />
        <link href='./fullcalendar/packages/core/main.css' rel='stylesheet' />
        <link href='./fullcalendar/packages/timegrid/main.css' rel='stylesheet' />
        <link href='./fullcalendar/packages-premium/timeline/main.css' rel='stylesheet' />
        <link href="layout.css" rel="stylesheet"  />
        
        <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js'></script>
        <script src='./fullcalendar/packages/core/main.js'></script>
        <script src='./fullcalendar/packages/timegrid/main.js'></script>
        <script src='./fullcalendar/packages/core/locales/fr.js'></script>
        <script src='./fullcalendar/packages-premium/timeline/main.js'></script>
        <script src='./fullcalendar/packages-premium/resource-common/main.js'></script>
        <script src='./fullcalendar/packages-premium/resource-timegrid/main.js'></script>
        <script src='./fullcalendar/packages-premium/resource-timeline/main.js'></script>

        <script src="./jquery-3.4.1.min.js" type="text/javascript"></script>
    

    
  </head>
  <body>
     <div id='calendar'></div>
    </body>
</html>
<script>
    var calendarEl = document.getElementById('calendar');
    calendar = new FullCalendar.Calendar(calendarEl, {
        schedulerLicenseKey:'',
        plugins: ['resourceTimeline'  ],
        defaultView: 'resourceTimelineMonth'})
    calendar.render();  
</script>

The issue is that it renders a grey column in the 2nd place which I do not want enter image description here

How to remove / hide this column ?

Thanks

Solution

  • You forgot to include the resource-timeline CSS file. I can't reproduce your problem with a standard Scheduler setup. Demo: https://codepen.io/ADyson82/pen/WNQyrzN

    But if you remove that file then your problem starts to occur. Demo: https://codepen.io/ADyson82/pen/mdeKVLQ

    I can also see that the relevant CSS file is missing from your code shown above. In your case I expect you need a link like this:

    <link href='./fullcalendar/packages-premium/resource-timeline/main.css' rel='stylesheet' />

    The FullCalendar plugin index shows what JS and CSS file (if any) is needed for each plugin to work correctly.