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

Open
suddenTim opened this Issue Jan 5, 2015 · 7 comments

Comments

Projects
None yet
6 participants
@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?

@generelspaz

This comment has been minimized.

Show comment
Hide comment
@generelspaz

generelspaz commented May 20, 2015

+1

@ErathiaChia

This comment has been minimized.

Show comment
Hide comment
@ErathiaChia

ErathiaChia Jul 6, 2015

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

ErathiaChia commented Jul 6, 2015

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

@dot1q

This comment has been minimized.

Show comment
Hide comment
@dot1q

dot1q 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.

calendar-error

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.

calendar-error

@suddenTim

This comment has been minimized.

Show comment
Hide comment
@suddenTim

suddenTim 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.

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.

@dot1q

This comment has been minimized.

Show comment
Hide comment
@dot1q

dot1q 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.

calendar-fixed

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.

calendar-fixed

@sjaakmarelis

This comment has been minimized.

Show comment
Hide comment
@sjaakmarelis

sjaakmarelis 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

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

@dot1q

This comment has been minimized.

Show comment
Hide comment
@dot1q

dot1q Apr 4, 2016

sjaakmarelis,

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.
cal-new

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!

dot1q commented Apr 4, 2016

sjaakmarelis,

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.
cal-new

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