Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

day view on mobile device throws events off the day if they have the same times #445

suddenTim opened this issue Jan 5, 2015 · 7 comments


Copy link

@suddenTim suddenTim commented Jan 5, 2015

i have 2 events with the same time. on a mobile phone on day view, it displays the first event correctly. the second is far below where it should be. it pushes every other event lower too. so low in fact that they are off the time scale. ideas?

Copy link

@generelspaz generelspaz commented May 20, 2015


Copy link

@ErathiaChia ErathiaChia commented Jul 6, 2015

I am facing the same issue also, please leme know if there is a solution to this.

Copy link

@dot1q dot1q commented Oct 5, 2015

I am experiencing the same issue. I have pulled daily events from five different google calendars and displayed them all, and when events overlap with each over (more than 4, which fits on my screen) they display off the page, somewhere at the bottom. With my limited knowledge, it seems that they have the correct margin from the top, they just don't overlap, and kick to a new row. I am banging my head against a wall, trying to reverse engineer the code, to display in a more scale-able format, so there isn't as much wasted space, but It is getting too complicated for my knowledge.


Copy link

@suddenTim suddenTim commented Oct 5, 2015

The issue is the max-width property. max-width keeps the text from stretching the block further, but we need the width to change based on the screen size. However, it would still need a min-width and break down once there were very large numbers of event blocks at the same time.

Copy link

@dot1q dot1q commented Oct 7, 2015

I have solved my issue by, (not the best solution, but it works for me) creating an array that keeps track of columns. By setting the #cal-day-box .day-event position to absolute, all of my events line up correctly, but overlap with each other. When processing each event, the event currently being parsed will loop through the columns array, checking if the start time is greater than the currently value. If it is, it replaces that element of the array with the end time. If it does not, it will search the rest of the columns array, to see if it can find a place to sit. If it cannot find a position to replace, it will push to the end of the array, making a new column. The index for the column that an event resides in, is multiplied by 200 (fixed width for each day event size) and it offsets each event nicely. Obviously this code has the potential to cause holes that could be filled with other events depending on order and start and end time, but it prevents events from being relative to each other, and not formatting correctly. In addition, I made the events scroll horizontally, so I would not run into this issue of # of events conflicting with screen size.


Copy link

@sjaakmarelis sjaakmarelis commented Mar 15, 2016

hi Dot1q, can you post the event code that you used? i do think this is the best solotion at the moment

Copy link

@dot1q dot1q commented Apr 4, 2016


I could post that code, but it was a heavily modified version of this project, designed to pull gcal events via javascript API. Because it did a bulk pull, it handled the _loadEvents function differently and is not compatible with the original branch. However, between the time you commented and now, I have found another alternative, as my company is moving away from Google calendar, towards a php mysql driven solution. This required me to revert pretty much back to the original code (with some minor UI tweaks). Here is a result.

As for the code, I have slightly more modified version of this. This code was found on stack overflow and is not mine in any way. What I did do was crudely modify it to work for me.

If my memory recalls right, I only had to edit the day.html file. Below is my modified version. It is really messy, as I have only gotten a working example going as of right now, and I haven't had time to clean it up yet.

code at pastebin, because the preview looked bad

I am hoping that will work for you. My modified code should be only a few tweaks to calendar.js and apps.js and I trimmed/added some features. If that doesn't work, let me know and I can try to recreate it from a fresh clone!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants
You can’t perform that action at this time.