title: How do I customise time slots in full calendar?
body: <p>I am using full-calendar from <a href="http://fullcalendar.io" rel="nofollow noreferrer">fullcalendar.io</a> and having some trouble customizing its time slot.</p>
  
  <p><a href="https://i.stack.imgur.com/gmwOC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gmwOC.png" alt="enter image description here"></a></p>
  
  <p>I want to add time slots like breakfast, lunch, dinner etc also user can add his/her own slots. How do I set the fixed height according to the number of slots? Also, I want to set the slot column text for breakfast, lunch etc. not 12 am, 6 am. Here's what I did until now:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var today = moment();
  $('#calendar').fullCalendar({
                      droppable: true,
                      defaultView: 'Week',
                      header: false,
                      defaultDate: today,
                      navLinks: false, // can click day/week names to navigate views
                      editable: true,
                      eventLimit: true, // allow "more" link when too many events
                      schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                      /*events: [
  
                          {
                              title  : 'event1',
                              start  : today,
                              imageurl:'assets/images/recipe/salad.jpg'
                          }
  
                      ],*/
                      /*views: {
                          agendaWeek: {
                              agendaEventMinHeight: 150,
                              allDaySlot: false,
                              slotLabelInterval: { hours: 6},
                              slotDuration: { hours: 1},
                              duration: { days: 7}
                          }
                      },*/
                      eventRender: function (event, element) {
                          element.find(".fc-event-title").remove();
                          element.find(".fc-event-time").remove();
                          var new_description = '#';
                          element.append(new_description);
  
                      },
                      now: today,
                      /*header: {
                          left: 'promptResource',
                          center: '',
                          right: ''
  
                      },*/
                      footer: {
                          left:   'promptResource',
                          center: '',
                          right:  ''
                      },
                      customButtons: {
                          promptResource: {
                              text: '+ add course',
                              click: function() {
                                  var title = prompt('Course name');
                                  if (title) {
                                      $('#calendar').fullCalendar(
                                          'addResource',
                                          { title: title },
                                          true // scroll to the new resource?
                                      );
                                  }
                              }
                          }
                      },
                      views: {
                          Week: {
                              type: 'timeline',
                              duration: { Days: '7' },
                              slotLabelInterval: { hours: 24},
                              slotDuration: { hours: 24},
                          }
                      },
                      resourceLabelText: 'Meal',
                      resourceRender: function(resource, cellEls) {
                          cellEls.on('click', function() {
                              if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
                                  $('#calendar').fullCalendar('removeResource', resource);
                              }
                          });
                      },
                      resources: [
                          { id: 'a', title: 'Breakfast' , eventColor: 'red'},
                          { id: 'b', title: 'Lunch', eventColor: 'green' },
                          { id: 'c', title: 'Dinner', eventColor: 'orange' },
                          { id: 'd', title: 'Other', eventColor: 'grey'},
                          ],
  
                      events: [
                          { id: '1', resourceId: 'b', start: today, end: today, title: 'event 1' },
                          { id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
                          { id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
                          { id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
                          { id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
                      ]
  
                  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" data-print="true" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css" /&gt;
  &lt;div id="calendar"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be really appreciated.</p>
  
  <p><strong>Edit:</strong>
  Here's what I actually want to implement.
  <a href="https://i.stack.imgur.com/UKIpS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UKIpS.png" alt="Design"></a>
  In design, you can see that the time of the day is not important. I want the users to add as many meals a day as they can. I just a want the option to add the meal's title(event). And remove the time slots on the left side.</p>
  
  <p><strong>update:</strong>
  I've managed to solve this problem to some extent. Here's how it looks now:<a href="https://i.stack.imgur.com/RPy6D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RPy6D.png" alt="enter image description here"></a>
  But still, there are some problems like how can I change the date format in columnHeader and how can I give fix size to row and columns?</p>