0

I am using Full Calendar plugin to power up my calendar app. I have two calendars that are placed one on another (the pink calendar is under the red one). My goal is to make the pink calendar appear above the red calendar (by increasing its z-index) upon drag start event of the red calendar, while the draggable should be visible and eventually drop on the pink calendar.

As for now, the problem is that even though I assign maximum z-index to the draggable element, it still appears beyond both of the calendars. Here's the Fiddle.

        ...
        eventDragStart: function(event, jsEvent, ui, view) {
          $('#calendar2').css('z-index', 0);
          $(this).css('z-index', 999);
        }
        ...
Edgar Navasardyan
  • 4,261
  • 8
  • 58
  • 121
  • "I have two calendars that are placed one on another"...dare I ask why?? – ADyson Jun 13 '18 at 13:29
  • Why not splitting the parts? – marcuse Jun 13 '18 at 13:31
  • My eventual goal is to slide between months. That is, if the user drags the element to the left/right corners of the calendar, the calendar slides to the previous/next week – Edgar Navasardyan Jun 13 '18 at 13:39
  • wouldn't it be better to try and get a single calendar to change its view in that scenario, rather than overlaying multiple calendars? Then in theory you could scroll infinitely across months. Anyway, in your current scenario, what if you simply hide the red calendar, rather than changing the z-index? Not sure if that would hide the draggable as well though, since it's a child of the red calendar (which might well be why the z-index trick isn't working, too) – ADyson Jun 13 '18 at 14:18
  • There are several approaches that I have tried. But in all cases the problem with z-index persists. So I would really appreciate if someone helped me with the z-index issue – Edgar Navasardyan Jun 13 '18 at 15:16
  • well like I said I think the issue is that the draggable element (the event) is a child of the calendar, so its visibility is closely tied up with the visibility of the calendar (see https://stackoverflow.com/questions/11330207/how-can-i-get-a-child-of-an-element-with-lower-z-index-on-front-of-a-child-of-an). I suspect you'd have to somehow detach it from the calendar, which raises other potential issues of course. Sadly I don't think your requirement to drag between views or calendars is really something fullCalendar is really designed to support. Perhaps you could make a feature request. – ADyson Jun 13 '18 at 15:45
  • it's worth noting that if you place your two calendars side by side in your JSFiddle so that both are visible simultaneously it's still not possible to drag an event from one to the other - it doesn't think the other calendar is a valid landing place. – ADyson Jun 13 '18 at 15:47

0 Answers0