CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-3fullcalendar-6
Asifkhan Kadiwala
Asifkhan Kadiwala

Reputation: 5

Converting FullCalendar Horizontal Resource Agenda View from v3 to v6

I am upgrading from FullCalendar v3 to v6 and need help converting the horizontal resource agenda view from V3 to V6. In v3, resources were displayed horizontally across the top, but I can't find an equivalent in v6. Any guidance on how to achieve this in v6 would be appreciated. Thank you in advance!

var getDaysInMonth = function () {
  var d = new Date();
  var year = d.getYear();
  var month = d.getMonth() + 1;
  return new Date(year, month, 0).getDate();
};

var getMonthDay = function () {
  var d = new Date();
  return d.getDate();
};

var getMinTime = function () {
  var days = getMonthDay() - 1;
  var time = "-" + days + ".00:00:00";
  return time;
};

var getMaxTime = function () {
  var days = getDaysInMonth() - getMonthDay() + 1;
  var time = days + ".00:00:00";
  return time;
};

$('#calendar').fullCalendar({
  defaultView: 'resourceView',
  selectable: false,
  nowIndicator: false,
  allDaySlot: false,
  views: {

    resourceView: {
      type: 'agendaDay',
      minTime: getMinTime(),
      maxTime: getMaxTime(),
      slotDuration: '24:00:00',
      slotLabelFormat: [
      'MMMM YYYY',
      'D'],

      buttonText: '' } },


  selectable: false,
  nowIndicator: false,
  allDaySlot: false,
  resources: [
  { id: 34470, title: 'Auditorium A' },
  { id: 344701, title: 'Auditorium B', eventColor: 'green' }],

  events: [
  { id: '1', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 1' },
  { id: '11', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 2' },
  { id: '111', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 3' },
  { id: '111', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 4' },
  { id: '2', resourceId: 344701, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 5' },
  { id: '4', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 6' },
  { id: '5', resourceId: 34470, start: '2023-06-15T01:00:00', end: '2023-06-15T11:59:00', title: 'event 7' }] 
});
#calendar {
  max-width: 900px;
  margin: 20px auto;
}
.fc-event{
  height: 15px;
}
<link rel="stylesheet" href="https://fullcalendar.io/releases/fullcalendar/3.10.0/fullcalendar.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div id="calendar"></div>

<script src="https://fullcalendar.io/releases/fullcalendar/3.10.0/lib/moment.min.js"></script>
<script src="https://fullcalendar.io/releases/fullcalendar/3.10.0/lib/jquery.min.js"></script>
<script src="https://fullcalendar.io/releases/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

FullCalendar v3 horizontal resource agenda view: https://codepen.io/asifkhankadiwala/pen/JjedaMG

Upvotes: 0

Views: 138

Answers (0)

Related Questions