CODEWITHSUNDEEP
javascriptjqueryhtmlcssfullcalendar
Saravana
Saravana

Reputation: 3496

FullCalendar eventOverlap side by side only

The below code is working good. eventDrag and Drop I can place anywhere inside the table.

But I want to drag and drop the event only left and right side of the event.

picture

I want to stop drag event from top and bottom of the other events. Only left and right side of the other events I want to drag and move the events.

Comment for further clarification. Thanks!

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    plugins: [ 'interaction', 'resourceTimeline' ],
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
      right: 'resourceTimelineMonth,resourceTimelineWeek'
    },
    aspectRatio: 1.5,
    defaultView: 'resourceTimelineMonth',
    resourceLabelText: 'Rooms',
	editable: true,
    resources: [{"id":"a","title":"Auditorium A"},{"id":"b","title":"Auditorium B"},
	{"id":"c","title":"Auditorium C"},
	{"id":"d","title":"Auditorium D","children":[{"id":"d1","title":"Room D1"},
	{"id":"d2","title":"Room D2"}]},
	{"id":"e","title":"Auditorium E"},
	{"id":"f","title":"Auditorium F"},
	{"id":"g","title":"Auditorium G"},
	{"id":"h","title":"Auditorium H"},
	{"id":"i","title":"Auditorium I"}],
	events: [{"resourceId":"d","title":"event 1","start":"2019-08-02","end":"2019-08-06"},
	{"resourceId":"c","title":"event 3","start":"2019-08-05","end":"2019-08-06"},
	{"resourceId":"f","title":"event 4","start":"2019-08-02","end":"2019-08-04"},
  {"resourceId":"g","title":"event 5","start":"2019-08-02","end":"2019-08-03"},
	{"resourceId":"b","title":"event 5","start":"2019-08-05T10:00:00+00:00","end":"2019-08-05T15:00:00+00:00"},
	{"resourceId":"e","title":"event 2","start":"2019-08-05T09:00:00+00:00","end":"2019-08-05T14:00:00+00:00"}]
  });

  calendar.render();
});
#calendar {
  max-width: 900px;
  margin: 40px auto;
}
<link href="https://fullcalendar.io/releases/core/4.2.0/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/timeline/4.2.0/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.css" rel="stylesheet"/>
<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timeline/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-common/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.js"></script>


<div id="calendar"></div>

Upvotes: 2

Views: 1301

Answers (2)

ADyson
ADyson

Reputation: 61904

As far as I understand it now, you want it to be impossible to place an event underneath another event within the same resource.

When an event is underneath another event, then it means the two events must (at least partly) occur at the same time. This is called overlapping.

You can prevent this in fullCalendar by setting

eventOverlap: false

(as per my original suggestion in the comments).

Here's a demo. It is now impossible, for example, to move "event 1" to be underneath (i.e overlapping) "event 3" within the "Auditorium C" resource.

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    plugins: ['interaction', 'resourceTimeline'],
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
      right: 'resourceTimelineMonth,resourceTimelineWeek'
    },
    aspectRatio: 1.5,
    defaultView: 'resourceTimelineMonth',
    resourceLabelText: 'Rooms',
    editable: true,
    eventOverlap: false,
    resources: [{
        "id": "a",
        "title": "Auditorium A"
      }, {
        "id": "b",
        "title": "Auditorium B"
      },
      {
        "id": "c",
        "title": "Auditorium C"
      },
      {
        "id": "d",
        "title": "Auditorium D",
        "children": [{
            "id": "d1",
            "title": "Room D1"
          },
          {
            "id": "d2",
            "title": "Room D2"
          }
        ]
      },
      {
        "id": "e",
        "title": "Auditorium E"
      },
      {
        "id": "f",
        "title": "Auditorium F"
      },
      {
        "id": "g",
        "title": "Auditorium G"
      },
      {
        "id": "h",
        "title": "Auditorium H"
      },
      {
        "id": "i",
        "title": "Auditorium I"
      }
    ],
    events: [{
        "resourceId": "d",
        "title": "event 1",
        "start": "2019-08-02",
        "end": "2019-08-06"
      },
      {
        "resourceId": "c",
        "title": "event 3",
        "start": "2019-08-05",
        "end": "2019-08-06"
      },
      {
        "resourceId": "f",
        "title": "event 4",
        "start": "2019-08-02",
        "end": "2019-08-04"
      },
      {
        "resourceId": "g",
        "title": "event 5",
        "start": "2019-08-02",
        "end": "2019-08-03"
      },
      {
        "resourceId": "b",
        "title": "event 5",
        "start": "2019-08-05T10:00:00+00:00",
        "end": "2019-08-05T15:00:00+00:00"
      },
      {
        "resourceId": "e",
        "title": "event 2",
        "start": "2019-08-05T09:00:00+00:00",
        "end": "2019-08-05T14:00:00+00:00"
      }
    ]
  });

  calendar.render();
});
#calendar {
  max-width: 900px;
  margin: 40px auto;
}
<link href="https://fullcalendar.io/releases/core/4.2.0/main.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/releases/timeline/4.2.0/main.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.css" rel="stylesheet" />
<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timeline/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-common/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.js"></script>


<div id="calendar"></div>

Upvotes: 2

Ravi
Ravi

Reputation: 1330

Quite Difficult To Understand, But I guess you want to drag only left and right side(from one time to another). not up to to down(from one resource to another).

For stop dragging to another resource you just need to add following option in your options of fullcalender

eventResourceEditable: false

Example

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    plugins: [ 'interaction', 'resourceTimeline' ],
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
      right: 'resourceTimelineMonth,resourceTimelineWeek'
    },
    aspectRatio: 1.5,
    defaultView: 'resourceTimelineMonth',
    resourceLabelText: 'Rooms',
	editable: true,
   eventResourceEditable: false ,
    resources: [{"id":"a","title":"Auditorium A"},{"id":"b","title":"Auditorium B"},
	{"id":"c","title":"Auditorium C"},
	{"id":"d","title":"Auditorium D","children":[{"id":"d1","title":"Room D1"},
	{"id":"d2","title":"Room D2"}]},
	{"id":"e","title":"Auditorium E"},
	{"id":"f","title":"Auditorium F"},
	{"id":"g","title":"Auditorium G"},
	{"id":"h","title":"Auditorium H"},
	{"id":"i","title":"Auditorium I"}],
	events: [{"resourceId":"d","title":"event 1","start":"2019-08-02","end":"2019-08-06"},
	{"resourceId":"c","title":"event 3","start":"2019-08-05","end":"2019-08-06"},
	{"resourceId":"f","title":"event 4","start":"2019-08-02","end":"2019-08-04"},
  {"resourceId":"g","title":"event 5","start":"2019-08-02","end":"2019-08-03"},
	{"resourceId":"b","title":"event 5","start":"2019-08-05T10:00:00+00:00","end":"2019-08-05T15:00:00+00:00"},
	{"resourceId":"e","title":"event 2","start":"2019-08-05T09:00:00+00:00","end":"2019-08-05T14:00:00+00:00"}]
  });

  calendar.render();
});
#calendar {
  max-width: 900px;
  margin: 40px auto;
}
<link href="https://fullcalendar.io/releases/core/4.2.0/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/timeline/4.2.0/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.css" rel="stylesheet"/>
<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timeline/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-common/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.js"></script>


<div id="calendar"></div>

I hope this is how you want

Upvotes: 2

Related Questions