I'm using this format:
https://fullcalendar.io/js/fullcalendar-scheduler-1.5.1/demos/vertical-resource-view.html
, but when I add more than 4 rooms, it gets squeezed. I wanted that by adding more rooms (I need 12) I would not get everything squeezed. How can I do this?
This my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='../scheduler.min.css' rel='stylesheet' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/fullcalendar.min.js'></script>
<script src='../scheduler.min.js'></script>
<script>
$(function() { // document ready
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
defaultDate: '2017-03-06',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaTwoDay,agendaWeek,month'
},
views: {
agendaTwoDay: {
type: 'agenda',
duration: { days: 2 },
// views that are more than a day will NOT do this behavior by default
// so, we need to explicitly enable it
groupByResource: true
//// uncomment this line to group by day FIRST with resources underneath
//groupByDateAndResource: true
}
},
//// uncomment this line to hide the all-day slot
//allDaySlot: false,
resources: [
{ id: 'a', title: 'Consultório A' },
{ id: 'b', title: 'Consultório B', eventColor: 'green' },
{ id: 'c', title: 'Consultório C', eventColor: 'orange' },
{ id: 'd', title: 'Consultório D', eventColor: 'red' },
{ id: 'e', title: 'Consultório E', eventColor: 'blue' },
{ id: 'f', title: 'Consultório F', eventColor: 'yellow' },
{ id: 'g', title: 'Consultório G', eventColor: 'black' },
{ id: 'h', title: 'Consultório H', eventColor: 'white' },
{ id: 'i', title: 'Consultório I', eventColor: 'gray' },
{ id: 'j', title: 'Consultório J', eventColor: 'brown' },
{ id: 'k', title: 'Consultório K', eventColor: 'purple' },
{ id: 'l', title: 'Consultório L', eventColor: 'purple' },
{ id: 'm', title: 'Consultório M', eventColor: 'purple' }
],
events: [
{ id: '1', resourceId: 'a', start: '2017-03-06', end: '2017-03-08', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2017-03-07T09:00:00', end: '2017-03-07T14:00:00', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2017-03-07T12:00:00', end: '2017-03-08T06:00:00', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2017-03-07T07:30:00', end: '2017-03-07T09:30:00', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2017-03-07T10:00:00', end: '2017-03-07T15:00:00', title: 'event 5' }
],
select: function(start, end, jsEvent, view, resource) {
console.log(
'select',
start.format(),
end.format(),
resource ? resource.id : '(no resource)'
);
},
dayClick: function(date, jsEvent, view, resource) {
console.log(
'dayClick',
date.format(),
resource ? resource.id : '(no resource)'
);
}
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
I also had this problem. My solution was to use this in the eventAfterAllRender callback function.
function eventAfterAllRenderCallback(){
$('.fc-agendaDay-button').click(function(){
$("#schedule_container").css('min-width',$('.fc-resource-cell').length*slot_width_resource);
}
$('.fc-resourceDay-button').click(function(){
$("#schedule_container").css('min-width','');
}
}
The slot_width_resource is the number of pixel wide you want the columns to be (I use 125). Until Fullcalendar comes out with better support this solution has worked work me
Place this function after your fullcalendar initializer and inside the initializer put the callback function like another fullcalendar option
$('#calendar').fullCalendar({
eventAfterAllRender:eventAfterAllRenderCallback,
});