Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment | File | Size | Author |
---|---|---|---|
#32 | with-and-without-end-date-compared.JPG | 16.4 KB | ArVar |
#28 | calendar_overlapped-events-clickable-1895778-28.patch | 4.83 KB | jonraedeke |
#27 | same-start-same-end-default.png | 36.97 KB | Angel Blue01 |
#26 | overlapping-different-start-times.png | 2.84 KB | Angel Blue01 |
Comments
Comment #1
rubeke CreditAttribution: rubeke commentedWrong title
Comment #2
Dr. Bytes CreditAttribution: Dr. Bytes commentedI 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.
Comment #3
circleoflife CreditAttribution: circleoflife commentedsubscribe
I have the same issue.
Comment #4
highfellow CreditAttribution: highfellow commentedsubscribe - I'm also getting this, and wondering if it can be fixed in CSS?
Comment #5
dmadruga CreditAttribution: dmadruga commentedsubscribe - I'm also getting this. When I manually set the float and width properties of the events I can make them all clickable.
Comment #6
nfriend CreditAttribution: nfriend commentedsubscribe - I too am experiencing this.
Comment #7
JayDarnellI 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):
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:
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:
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.
Comment #8
JayDarnellI 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:
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.
Comment #9
calebtr CreditAttribution: calebtr commentedKudos, 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(){
Comment #10
ligongx CreditAttribution: ligongx commentedThanks 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,
Comment #11
nfriend CreditAttribution: nfriend commentedWhere exactly does the code from #8 go?
Thanks.
Neil
Comment #12
nfriend CreditAttribution: nfriend commentedThis 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
Comment #13
JayDarnellSorry 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.
Comment #14
nfriend CreditAttribution: nfriend commentedThanks 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
Comment #15
rag_gupta CreditAttribution: rag_gupta commentedSubscribing
Comment #16
calebtr CreditAttribution: calebtr commentednfriend, you've got too many single-quotes:
should be:
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.
Comment #17
dmadruga CreditAttribution: dmadruga commentedJS at #8 works for me! Thanks, man!
Comment #18
caspervoogt CreditAttribution: caspervoogt commentedCouldn't get #8 to work, strangely. Here's what I wrote instead:
I put this in my calendar-day-overlap.tpl.php:
And this went in my calendar-week-overlap.tpl.ph:
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.
Comment #19
humansky CreditAttribution: humansky commentedAny 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.
Comment #20
caspervoogt CreditAttribution: caspervoogt commentedhumansky, 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.
Comment #21
Damium CreditAttribution: Damium commentedI 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:
becomes:
Comment #22
ryandekker CreditAttribution: ryandekker commentedI 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):
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.
Comment #23
nerdoc CreditAttribution: nerdoc commented@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.
Comment #24
guillaumev CreditAttribution: guillaumev commentedIn 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...
Comment #25
sikofitt CreditAttribution: sikofitt commentedCouldn't get #8 to work, but #21 fixed this for me.
Comment #26
Angel Blue01 CreditAttribution: Angel Blue01 commented#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.
Comment #27
Angel Blue01 CreditAttribution: Angel Blue01 commentedIn 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.
Comment #28
jonraedeke CreditAttribution: jonraedeke commentedThe simple CSS solution in #21 is perfect. Here's a patch.
Comment #29
lias CreditAttribution: lias commented#21 CSS worked.
Comment #30
ron_s CreditAttribution: ron_s commentedThanks 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.
Comment #31
ArVar CreditAttribution: ArVar commentedPatch #28 is not working for me, if one of the overlapping events has no end date. Any ideas?
Comment #32
ArVar CreditAttribution: ArVar commentedComment #33
ron_s CreditAttribution: ron_s commented@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.Comment #34
ArVar CreditAttribution: ArVar as a volunteer commentedHi 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.
Comment #35
ron_s CreditAttribution: ron_s commented@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 thehalf-hour
class as I mentioned.Comment #36
ArVar CreditAttribution: ArVar as a volunteer commentedOkay, 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). Theni
ando
are set adequately. which meanso
is the same andi
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
is0
because there is no duration effectively.o
is the same. But now no concurrency is detected, thusmd
is0
and eachi
is0
, 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. :-)
Comment #37
ron_s CreditAttribution: ron_s commented@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
Comment #38
ArVar CreditAttribution: ArVar as a volunteer commentedAt least we got it. Worked fine for me. Thank you very much. :-)
Comment #39
Katy Jockelson CreditAttribution: Katy Jockelson as a volunteer commented#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
Comment #40
dsoms CreditAttribution: dsoms commented#28 patch worked fine for me. Thank you very much!
Comment #41
ron_s CreditAttribution: ron_s commentedHow about we mark this as RTBC?
Comment #42
sketman CreditAttribution: sketman commented#28 + this patch https://www.drupal.org/node/2512348#comment-10058784 fixed it for me.
thanks!
Comment #43
Nemanja CreditAttribution: Nemanja commentedThis patch calendar_overlapped-events-clickable-1895778-28.patch works and fixed the issue for me.
Comment #44
jcgarsan CreditAttribution: jcgarsan commentedHi 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
Comment #45
jcgarsan CreditAttribution: jcgarsan commentedHi all,
I got it. It was a mistake applying the patch. Everything is working ok!
Comment #46
littledynamo CreditAttribution: littledynamo at Allstar Solutions commentedThere is also a simple fix for this using Flexbox:
Just add the above CSS to your theme and it will ensure that events sit side by side without any overlap.
Comment #47
wylbur CreditAttribution: wylbur commentedComment #48
joelpittetSome 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.
Comment #51
izmeez CreditAttribution: izmeez commentedThis may have been committed after the calendar-7.x-3.16 release.