Question 325181 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I am not able to gray-out resources which are outside start and end date

I want to grayout other date which is not between in bussinessHours. In this example I’ve passed in resource a businessHours dates. I want a grayout background of before 2024-01-19 and after 2024-01-30 dates. So I am not able to drop any event before and after this dates.

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: [
      {
        "id": "a",
        "title": "Auditorium A",
        bussinessHours: {
          start: new Date('2024-01-19'),
          end: new Date('2024-01-30')
        }
      },
      {
        "id": "b",
        "title": "Auditorium B",
        "eventColor": "green"
      },
      {
        "id": "c",
        "title": "Auditorium C",
        "eventColor": "orange"
      }
    ],
    events: [
      {
        "resourceId": "b",
        "title": "event 5",
        "start": "2024-01-19T10:00:00+00:00",
        "end": "2024-01-19T15:00:00+00:00"
      },
      {
        "resourceId": "a",
        "title": "event 2",
        "start": "2024-01-19T09:00:00+00:00",
        "end": "2024-01-19T14:00:00+00:00"
      }
    ]
  });

  calendar.render();
});

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you all of you for giving your time to resolve this but I got a solution from Fullcalendar support team which is below,

    I've added background-events based on my resource availability like

    events.push({
   id: 'my-resource-id',
   start: new Date('2024-01-01'),
   end: new Date('2024-03-15'),
   rendering: 'inverse-background',
   resourceId: 'my-resource-id',
   backgroundColor: 'gray'
})

    In my data Cornelia and Monika was not available from 15th March and I got below output which I want

    enter image description here


  2. 0

    you have to use datesSet callback in FullCalendar to dynamically update the background rendering of the calendar based on the conditions.

    Add a function to in the same like I did below. Change the dates as you need.

    document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: [
      {
        "id": "a",
        "title": "Auditorium A",
        bussinessHours: {
          start: new Date('2024-01-19'),
          end: new Date('2024-01-30')
        }
      },
      {
        "id": "b",
        "title": "Auditorium B",
        "eventColor": "green"
      },
      {
        "id": "c",
        "title": "Auditorium C",
        "eventColor": "orange"
      }
    ],
    events: [
      {
        "resourceId": "b",
        "title": "event 5",
        "start": "2024-01-19T10:00:00+00:00",
        "end": "2024-01-19T15:00:00+00:00"
      },
      {
        "resourceId": "a",
        "title": "event 2",
        "start": "2024-01-19T09:00:00+00:00",
        "end": "2024-01-19T14:00:00+00:00"
      }
    ],
    datesSet: function (info) {
      var startDate = info.start.toISOString().split('T')[0];
      var endDate = info.end.toISOString().split('T')[0];

      calendarEl.querySelectorAll('.fc-day').forEach(function (cell) {
        var cellDate = cell.getAttribute('data-date');
        if (cellDate < '2024-01-19' || cellDate > '2024-01-30') {
          cell.classList.add('fc-non-business');
        } else {
          cell.classList.remove('fc-non-business');
        }
      });
    }
  });

  calendar.render();
});

    Try this and let me know how it goes. Thanks.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search