Multiple event with the same time overlap in the week and day view of the calendar

I am having this issue too, where when two events share the same start time, they overlap on the view, and only the topmost event can be be clicked on. The HTML output shows that both events do have a valid HREF, so my guess is that it's somehwere within the CSS/JS.

subscribe
I have the same issue.

subscribe - I'm also getting this, and wondering if it can be fixed in CSS?

subscribe - I'm also getting this. When I manually set the float and width properties of the events I can make them all clickable.

subscribe - I too am experiencing this.

I am also experiencing this. The issue does lie within the CSS for the Calendar module. If you analyze the HTML output (I'm using Chrome) for the calendar day view it looks something like this (this is for a day with two items scheduled for the same time):

<div class="calendar item-wrapper first_item">
  <div class="inner">
    <div class="d_4 o_0 i_0 md_1">
      <div class="view-item view-item-events_calendar">
        <div class="calendar dayview">
          -- Individual view fields go here --   
        </div>   
      </div>
    </div>
    <div class="d_4 o_0 i_5 md_1">
      <div class="view-item view-item-events_calendar">
        <div class="calendar dayview">
          -- Individual view fields go here --
        </div>   
      </div>
    </div>
  </div>
</div>

If you inspect the first div with the classes "calendar" and "dayview" (line 5 in my code snippet) you'll notice the following CSS is being applied:

.calendar-calendar .day-view div.single-day .i_0.md_1 .view-item .calendar {
  width: 60% !important;
}

If you inspect the second div with the classes "calendar" and "dayview" (line 12 in my code snippet) you'll notice the following CSS is being applied:

.calendar-calendar .day-view div.single-day .i_5 .view-item .calendar {
  margin-left: 50%;
  width: 49%;
}

This looks like it should work fine at a glance but if you inspect the parent div for each of these cases (the divs with the classes "view-item" and "view-item-events_calendar" - lines 4 and 11) You can see that each of these divs is spanning the full width of their parent container. This is why ONLY the last item added to this container is clickable. As far as the browser is concerned all previous items are underneath the last item div and thus unable to be clicked.

I haven't figured out a reliable way to fix it yet. I'll check back soon if I come up with a CSS or jQuery solution.

I hate fixing things with jQuery unless I know of no other way. Due to the complexity of the Calendar module and my relatively limited module development experience I did not feel comfortable jumping into the code to craft a more elegant solution. I'm using the following jQuery solution for the time being:

var columnWidth = jQuery('#single-day-container td.last').width();
jQuery('#single-day-container .single-day .view-item-events_calendar .dayview').each(function(){
    
  var width = jQuery(this).width();
  width = (width / columnWidth * 100) + '%';
            
  var marginLeft = jQuery(this).css('margin-left');
  var marginArray = marginLeft.split("p");
  marginLeft = (marginArray[0] / columnWidth * 100) + '%';
        
  var marginRight = jQuery(this).css('margin-right');
  marginArray = marginRight.split("p");
  marginRight = (marginArray[0] / columnWidth * 100) + '%';
        
  var parentItem = jQuery(this).parent();
  parentItem.css('width', width).css('margin-left', marginLeft).css('margin-right', marginRight);
  jQuery(this).css('margin-left', '0').css('margin-right', '0').attr('style', function(i,s) { return s + 'width: 100% !important;' });
    
});

This code captures the width and margins for each .dayview item, applies those styles to the parent element (to fix the overlapping issue) and then zeroes out the margins for each .dayview item before setting the width to 100% of the container we just updated.

Kudos, this fix (#8) worked for me. The display is not the same in IE8 or Opera 11.60, but links are clickable and that is what is important for me at the moment.

Caveats:

1. I had to wrap the code in jQuery(document).ready(function() { ... });. I added it to my site using drupal_add_js in a local theme template for calendar-day-overlap.tpl.php.

2. The second line refers to a class for a local view (.view-item-events_calendar) - use whatever class is applied to your own view.

jQuery('#single-day-container .single-day .view-item-events_calendar .dayview').each(function(){

Thanks fix in post #8 and comment from post #9.

To fix both weekview and dayview event not-clickable issue, change the jquery query path mentioned in post #9 to .calendar instead of .dayview, which only applies to dayview.

jQuery('#single-day-container .single-day .view-item-YOUR_OWN_CALENDAR .calendar').each(function(){

The YOUR_OWN_CALENDAR is the part of the class name generated by drupal calendar. It's your calendar content type. You can find out the exact value using firebug. It's the parent of dayview or weekview class div.

For example, mine is,

<div class="view-item view-item-cbcgb_calendar">
  <div class="calendar weekview">

Where exactly does the code from #8 go?

Thanks.

Neil

This is such a great module - thank you very much!

However, nothing has been done with it in over a year and while I am not dealing with other bugs this one seems to be major. The fact that events just disappear on the Weekly and Daily view seems like someone of the 57,000+ users of the module would have come up with a patch.

If I had the skill I would do it but I have to depend on someone who does.

I can fiddle with code to get this working but in this case I would appreciate someone explaining #8 a little more or perhaps provide a patch or even better an upgraded version.

Thanks again!

Neil

Sorry for the lapse in communication nfriend. I've been away from drupal.org for a bit. The code I posted in #8 above goes in a javascript file. I simply put the code in my main.js file for the entire site - although it would probably be better to put the fix in its own custom javascript file (maybe call it calendarfix.js) and then programatically add the javascript file only where it is needed using drupal_add_js: https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_...

I haven't done this yet for lack of time but this would be the ideal setup until the module is patched to fix the issue.

Thanks CopperBot for responding - I tried adding the code to a few different JS areas and had no luck (like drupal.js too). So I tried to implement what calebtr offered in #9 and still no luck. I am able to get a JS Alert to work using the drupal_add_js just before this code but the code doesn't appear to do anything. I have multiple events at same time showing on Month view but not on day or week.

I placed this code in the calendar-day-overlap.tpl.php file located in the \calendar\theme folder. You can see I also changed the view class reference (.view-item-registration_events).

Any help is appreciated.

Neil

drupal_add_js("jQuery(document).ready(function () {var columnWidth = jQuery('#single-day-container td.last').width();
jQuery('#single-day-container .single-day .view-item-registration_events .dayview').each(function(){
   
  var width = jQuery(this).width();
  width = (width / columnWidth * 100) + '%';
           
  var marginLeft = jQuery(this).css('margin-left');
  var marginArray = marginLeft.split('p'');
  marginLeft = (marginArray[0] / columnWidth * 100) + '%';
       
  var marginRight = jQuery(this).css('margin-right');
  marginArray = marginRight.split('p'');
  marginRight = (marginArray[0] / columnWidth * 100) + '%';
       
  var parentItem = jQuery(this).parent();
  parentItem.css('width', width).css('margin-left', marginLeft).css('margin-right', marginRight);
  jQuery(this).css('margin-left', '0').css('margin-right', '0').attr('style', function(i,s) { return s + 'width: 100% !important;' });
   
});});", 'inline');

Subscribing

nfriend, you've got too many single-quotes:

  marginArray = marginRight.split('p'');

should be:

  marginArray = marginRight.split('p');

This happens twice in your code.

That's what I can see (I ran a diff of your code against mine), but if there is more, Chrome offers a good javascript troubleshooting tool - when you right click and inspect element, there is a tab for 'console' and errors will show up there.

JS at #8 works for me! Thanks, man!

Couldn't get #8 to work, strangely. Here's what I wrote instead:

I put this in my calendar-day-overlap.tpl.php:

drupal_add_js("
jQuery(document).ready(function() {

    jQuery('.day-view .single-day .item .view-item').css('display','block');
    jQuery('.day-view .single-day .item .view-item').css('position','relative');

    jQuery('.day-view .single-day .item-wrapper .inner').each(function(){
      var numitems = jQuery(this).children().length;
      if(numitems == 1){
        var width = '100%';
        jQuery(this).children('.item .view-item').css('width',width);
      }
      if(numitems == 2){
        var width = '50%';
      }
      if(numitems == 3){
        var width = '33%';
      }
      if(numitems == 4){
        var width = '25%;';
      }
      if(numitems == 5){
        var width = '20%';
      }
      if(numitems > 5){
        var width = '16%';
      }
      jQuery(this).children().each(function(){
        jQuery(this).css('width',width);
        jQuery(this).css('position','relative');
        jQuery(this).css('float','left');
      });
    });
});
","inline");

And this went in my calendar-week-overlap.tpl.ph:

drupal_add_js("
jQuery(document).ready(function() {

    jQuery('.week-view .single-day .item .view-item').css('display','block');
    jQuery('.week-view .single-day .item .view-item').css('position','relative');

    jQuery('.week-view .single-day .item-wrapper .inner').each(function(){
      var numitems = jQuery(this).children().length;
      if(numitems == 1){
        var width = '100%';
        jQuery(this).children('.item .view-item').css('width',width);
      }
      if(numitems == 2){
        var width = '50%';
      }
      if(numitems == 3){
        var width = '33%';
      }
      if(numitems > 3){
        var width = '25%;';
      }
      jQuery(this).children().each(function(){
        jQuery(this).css('width',width);
        jQuery(this).css('position','relative');
        jQuery(this).css('float','left');
      });
    });
});
","inline");

The above contains no view-specific view names so should be reusable as-is. I added in some jQuery handling of item widths, so if you have one item in a time slot it shows full-width, but with two they're each at 50%, with three they're at 33%, etc. I cut it off after 6 items (16%) because that would be ridiculously narrow. Adjust as needed.

Any chance the above fix(es) will make its way into the code? I too am experiencing the same problem:

http://english.princeton.edu/cal/day/2014-04-17

Notice how one event starts at 4 and the other starts at 4:30, yet you only see one event.

humansky, a temporary fix might be to not use the overlapping display. In the view there's an option for this; then the events will show one after another, each on a row, and there won't be overlaps or missing events. This is also handy for when you want to print the calendar. This is what I ended up doing in my case because printability was important to my project.

I found that removing the last ".calendar" selectors from the css in the calendar-overlap.css line 687 through 813 does the trick everywhere I've tested it. Is there some situation that this wouldn't work?

this:

.calendar-calendar .week-view div.single-day .i_0 .view-item .calendar {
  margin-left: 0px;
  width: 50%;
}

becomes:

.calendar-calendar .week-view div.single-day .i_0 .view-item {
  margin-left: 0px;
  width: 50%;
}

I would think the ideal "right way" to fix this would be at the template layer, doing about what #8 does but with PHP. Like others, I didn't want to dig in that far; but hopefully this simple CSS fix is useful to someone else.

This allows horizontal scrolling of all events in a given hour, without needing to know how many are present (tested to work in IE7+, FF, and webkit):

.calendar-calendar .day-view .single-day .inner {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  width: auto;
  height: 47px !important;
}
.calendar-calendar .day-view .single-day .inner .item {
  /* Inline-block, said enough ways to give it cross-browser support. :) */
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
.calendar-calendar .day-view .single-day .inner .item .view-item {
  position: relative;
}

Image of it here (IE9):
http://files.clikbox.com/skitch/calendar-day-scroll-20140206-125453.png

This could probably be adapted for the week view, but we're not showing all events in the same way for week views, so I couldn't test it that way.

@ryandekker, this does not fix the issue really. It just adds a horiz. scrollbar to each time slot (even if there is no event there), and does not prevent my calender to make ONLY the latest event a link (means clickable) all others are not accessible. See screenshot.

In my case, the patch available in this issue: https://www.drupal.org/node/2160183 fixed it, so I think both issues are related and might be duplicate...

Couldn't get #8 to work, but #21 fixed this for me.

#18 worked for me for the week display, events with the same start time are displayed side by side.

It does not address events with different but overlapping start times This is an example from my site's calendar: I've made the 2 events slightly transparent to provide clarity.

It also does not apply to the day display at all.

In the day display, if there 2 events with the same start time, regardless of end times being set or the value of end times, they overlap, but the second has a higher z value than the first (source order?) and the first is not clickable. This may be a side effect of the css applied to both events, as this screenshot highlights.

I've tried #18, but it doesn't address this issue.

The simple CSS solution in #21 is perfect. Here's a patch.

#21 CSS worked.

Thanks for the patch in #28, @jonraedeke. Should get this added as soon as possible.

Switching version and status so we can hopefully get this committed.

Patch #28 is not working for me, if one of the overlapping events has no end date. Any ideas?

@ArVar, I'm not seeing that issue. If you could, take some time to look more closely at the CSS in that area.

I'm wondering if you're facing the issue I've seen on numerous occasions with rows that have the .half-hour class.

I forget the actual fix, but somewhere in there it's necessary to add a position:relative otherwise it's impossible to hover over the link and make it clickable. This is something that can just be added to your site CSS.

Hi ron_s,
I dived into the css and there is some strange behavior in the "inner" wrapper where the item class is generated, e.g. div class="item d_4 o_0 i_0 md_1". I'm not sure what the class flags (d_4 o_0 etc.) in detail mean, but when I delete the end-date of an event, the same event is rendered with div class="item d_0 o_0 i_0 md_0", whereas the md flag is significant in this case.

This changes the applied css definition.
I think somehow the items array in the calendar-week-overlap.tpl.php should be different then. So the effect seen in #26 possibly has a completely different origin, than discussed here before.

I have atm no clue, where to look next.

@ArVar, I don't think the items array needs to be different. The css classes you are referencing are related to the the duration ("d") of the event in segments (there are 96 15-minute segments in one day), the position of the event within an hour ("o"), the position of the item horizontally ("i"), and the number of events happening concurrently ("md").

I highly recommend testing your events in Firebug so you can see how these work. Select a particular event, and change "d_4" to "d_5", and you'll see the box grow taller. The positions of "o_0" (:00), "o_1" (:15), "o_2" (:30), and "o_3" (:45) are particularly helpful related to the issue I'm describing.

If you can change the class from "o_0" to "o_2" (or vice versa) and the link is clickable, then it's a problem with the half-hour class as I mentioned.

Okay, let me explain it more detailed.
By changing these mentioned flags, I can get any position (horizontal and vertical) and height of each item. When I have two or more items which have identical start- and end-dates everything works as desired: The concurrency is well detected, md is set to 1 (or more respectively). Then i and o are set adequately. which means o is the same and i is different, such that I'm able to see (and click) each event.
Now I take two (ore more events) with an identical start-date, but without an end-date. Then I understand that each d is 0 because there is no duration effectively. o is the same. But now no concurrency is detected, thus md is 0 and each i is 0, too.
Only the upmost event is shown and I can only access its content.

Is this how it is intended to be?

PS: I'm sorry, if I'm too obstinate about that. :-)

@ArVar, now I understand what you're saying. That's a separate issue and needs its own thread.

See the patch I added: https://www.drupal.org/node/2512348

At least we got it. Worked fine for me. Thank you very much. :-)

#21 worked for me, but rather than make the change in the module, I copied those lines from calendar-overlap.css to my theme CSS, knocked the '.calendar' off the end, and added:

.calendar-calendar .week-view div.single-day .view-item .calendar,
.calendar-calendar .day-view div.single-day .view-item .calendar {
margin-left: 0px !important;
width: auto !important;
}

as well, which essetially overrides the lines in calendar-overlap.css

#28 patch worked fine for me. Thank you very much!

How about we mark this as RTBC?

#28 + this patch https://www.drupal.org/node/2512348#comment-10058784 fixed it for me.
thanks!

This patch calendar_overlapped-events-clickable-1895778-28.patch works and fixed the issue for me.

Hi all,
I tested this patch and https://www.drupal.org/node/2512348, but there is something missing. As you can see in the image, the events are shift every new hour. So, this causes that the lasts events will overlap again.

Some extra details, I'm using the calendar module version: 7.x-3.5 and Drupal core: 7.50

Hi all,
I got it. It was a mistake applying the patch. Everything is working ok!

There is also a simple fix for this using Flexbox:

.calendar-calendar .week-view .full div.single-day .inner, 
.calendar-calendar .day-view .full div.single-day .inner {
    display: flex;
    justify-content: left;
}

.calendar-calendar .week-view div.single-day .view-item,
.calendar-calendar .day-view div.single-day .view-item {
    position: static;
}

Just add the above CSS to your theme and it will ensure that events sit side by side without any overlap.

Some of these were corrected in #1790656: Concurrent events are not displayed correctly, I've picked off the rest from the patch in #28

Thanks for everybody's contribution to this and also patience.

This may have been committed after the calendar-7.x-3.16 release.