Search code examples
fullcalendarfullcalendar-schedulerfullcalendar-4

Should resourceEditable=false on an event disallow that event to be switch between resource?

I'm working with fullcalendar v4 and just begin with scheduler resourceTimeGrid. Dealing with resources I just run into the situation I ll describe here and wan to ask my question (I write thoses line because SO thinks there is no enough text in my question. Lorem ipsum dolore sit amet consectetur) :

Is the following behaviour normal ? Even with resourceEditable=false you can switch event to another resource

<html>
<head>
<link href='https://unpkg.com/@fullcalendar/[email protected]/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/[email protected]/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/[email protected]/main.min.css' rel='stylesheet' />


  <script src='https://unpkg.com/@fullcalendar/[email protected]/main.min.js'></script>
  <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
  <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
  <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
  <script src='https://unpkg.com/@fullcalendar/[email protected]/main.min.js'></script>
  <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
  <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
</head>
<body>

<a>Drop the event one time to disable editable and resourceEditable for that event</a><br/>
<a>Test to put that event in the other resource : even with resourceEditable=false you can switch event to another resource</a>
<div id="calendarArea"></div>

<script>

var calendarEl = document.getElementById('calendarArea');

var today = new Date();
var month = (today.getMonth()+1) > 10 ? today.getMonth()+1 : '0'+(today.getMonth()+1);
var day = today.getDate() > 10 ? today.getDate() : '0'+today.getDate();
var todayStringStart = today.getFullYear()+'-'+ month+'-'+today.getDate()+'T08:00';
var todayStringEnd = today.getFullYear()+'-'+ month+'-'+today.getDate()+'T09:00';

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'resourceTimeGrid' ],
  defaultView: 'resourceTimeGridWeek',
  editable: true,
  weekends: false,
  eventResourceEditable: true,
  scrollTime : '07:00:00',
  schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  resources: [
    {
      id: 'a',
      title: 'Room A',
    },
    {
      id: 'b',
      title: 'Room B',
    },
  ],
  events: [
    {
      id: 'a',
      title: 'my event',
      start: todayStringStart,
      end: todayStringEnd,
      resourceId: 'a',
      editable: true,
      resourceEditable: true,
    },
  ],
  views: {
    resourceTimeGridWeek: {
      type: 'resourceTimeGrid',
      duration: { week:1 },
    },
    resourceTimeGridMonth: {
      type: 'resourceTimeGrid',
      duration: { month:1 },
    },
  },
  eventDrop: (info) => {					
    info.event.setProp('editable', false);
    info.event.setProp('resourceEditable', false);
  },
});
calendar.render();

</script>
</body>
</html>

Solution

  • Yes it should (and probably will) but currently there is an improvment to do in the library.

    It seems that's an issue : https://github.com/fullcalendar/fullcalendar/issues/5166 related to a bigger issues in fullcalendar : https://github.com/fullcalendar/fullcalendar/issues/4625