0

I am using full calendar week view with 15 mins of slots.

The slots are not coming as a complete column, and every slot is starting from middle of the row.

In the screen shot the 9am is starting from middle of row instead of starting How can I achieve that I cant find anything in documentation.

enter image description here

following is my calendar settings

$(function() {

  $('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    allDaySlot: false,

    minTime: "00:00:00",
    maxTime: "24:00:00",

    slotDuration: '00:15:00',
    slotLabelInterval: 15,
    slotLabelFormat: 'h(:mm)a',

    groupByResource: true,
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'agendaDay,agendaWeek'
    },
    views: {
      agendaWeek: {
        type: 'agenda',
        duration: { days: 7 }
      }
    },
    resources: [
      { id: 'a', title: 'Room A' }
    ],
    events: [
      {
        title: 'Available',
        start: '2018-09-03T07:30:00',
        end: '2018-09-07T23:00:00',
        color: 'rgba(83,253,173,0.3)'
      },
      { 
        title: 'Booked',
        start: '2018-09-03T09:30:00',
        end: '2018-09-03T10:00:00',
        color: 'rgba(253,83,83,0.3)',
        description: 'This is a cool event'
      },
      { 
        title: 'Buffer Time',
        start: '2018-09-04T09:30:00',
        end: '2018-09-04T10:00:00',
        color: 'rgba(74,74,74,0.5)',
        description: 'This is a cool event'
      },
      { 
        title: 'Rest Time',
        start: '2018-09-05T09:30:00',
        end: '2018-09-05T10:00:00',
        color: 'rgba(240,212,80,0.5)',
        description: 'This is a cool event'
      }
    ]

});
Bloomberg
  • 2,317
  • 2
  • 25
  • 47
  • 1
    from the screenshot you seem to have deployed some custom CSS to change the appearance of the calendar. This is the most likely place to start looking for problems. Remove it all and use the default CSS provided by fullCalendar and see if you still have an issue. – ADyson Sep 05 '18 at 10:34
  • 1
    BTW the code above does not produce the output shown in the screenshot (disregarding the style changes) - see http://jsfiddle.net/qxLuLhsf/149/ because you don't have any resource IDs on your events. It really helps on SO questions if the code is accurate. – ADyson Sep 05 '18 at 10:53
  • 1
    If I correct that, then http://jsfiddle.net/qxLuLhsf/151/ shows the events. Annoyingly the events still don't reproduce the screenshot because the event data is different. This is frustrating when trying to reproduce a problem! Please try to create a consistent example in your question. However, you can at least see that there is no issue with the positioning of the events in relation to the time grid. I am 99.99% certain this is an issue with your CSS. – ADyson Sep 05 '18 at 10:56
  • you are right @ADyson, its becuase of custom css – Bloomberg Sep 05 '18 at 12:05
  • Thank you for your consideration – Bloomberg Sep 05 '18 at 12:05
  • No problem. If you need specific help in fixing the CSS then of course you could ask a new question about that. Perhaps best to delete this one since it doesn't represent the actual issue. – ADyson Sep 05 '18 at 12:06

0 Answers0