When there are multiple events on the same time their is only one shown in the week and day view.
I've tried it with version 3.4 as well as with the latest dev module.
any how can help?

Thanks

Comments

Title:Multiple events at same time are not displayed on week/day viewMultiple event with the same time overlap in the week and day view of the calendar
Priority:Normal» Major

Wrong title

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.