make calendar responsive

[davidemastruzzo]

I just noticed that the calendar is not responsive / doesn't work well on mobile devices. Maybe that is something that could be done in the future :)

---

We're using Polar.sh so you can upvote and help fund this issue. We receive the funding once the issue is completed & confirmed by you. Thank you in advance for helping prioritize & fund our work.

[niccokunzmann]

I think, a copy is updating this calendar to the new dhtmlx scheduler. Is that responsive?

Generally, another calendar can be embedded into this software. dhtmlx just happens to be the only one at the moment. So, if there is an outstanding open-source one, it takes a bit of work of converting the calendars but most of the work is done already and I can help.

[niccokunzmann]

See #166

[thenktor]

Same here. See example screenshot:

[tmoerschell]

Hi! Just started using Open Web Calendar on a website, and I would love to see this being added! Unfortunately I know about nothing about web design, so I funded the issue in the hope someone else might be able to do this.

[niccokunzmann]

It would be good if you could add issues that you are facing as well as screen shots and how to make the calendar look bad in that case.

This is what I found:

• [x] Buttons overlap
• [x] Quick info and details clash
• [x] Touch support can be enabled: https://docs.dhtmlx.com/scheduler/touch_support.html

Could you add examples of how you need it?

[niccokunzmann]

In #273, I added some support for responsive design.

Here are some images, left before, right after the change:

The changes should go live soon. If you feel like this is what you asked for, please close the issue. Otherwise, I will see if anything more specific is needed and if not, I will close it after a while. Thanks for supporting and reporting!

[vmario89]

Funny. i tried to adjust CSS for owc just yesterday, but i failed at some point :D (i messed with some floating like .dhx_cal_navline .dhx_cal_date{width:auto;padding-left: 30px;padding-right:30px;}.dhx_cal_navline,.dhx_cal_navline div{position:unset;float:left;}.dhx_cal_navline{height:119px!important;}div.dhx_cal_scale_placeholder{top:120px!important;}div.dhx_cal_header{top:120px!important;height: 49px!important;}div.dhx_multi_day,div.dhx_cal_data{top:141px!important;}div.dhx_multi_day{171px;})

i was asking myself if it would be possible to have an option to shorten the day names in columns to save space. So if we have had a checkbox to convert monday to mo, tuesday to tu or tue, and so on

[vmario89]

your commit works very well so far, tested it right now. many many thanks for doing this!

[tmoerschell]

This works pretty well! Thanks a lot.

A small issue I found is that at some widths, in languages where text is a little longer (French in my case), the "Today" button will overlap a little with the text below, see attached screenshot. Maybe it's possible to slightly increase the margin?

[niccokunzmann]

Thanks @vmario89 and @tmoerschell for answering so quickly!

"Today" button will overlap a little with the text below, see attached screenshot.

I think, it is possible to create a third column in case everything gets a bit too small. Also, I wonder: The days seem to be quite big at times. I wonder if they should be shortened.. Also, at a certain width, the time 09:00 is not readable as shown in your screenshot.

I think, one of the problems seems that the height and font size are dependent on the viewport width.

font-size: 4vw;
height: 6vw;

This changes the size of the elements depending on the width and there is actually, from my side not a real reason to change the height dependent on the width of the screen if the height of the header (where the buttons are) stays the same. This problem seems to be changeable via CSS. If someone would like to try it out, please give it a go! I might have another look at it. For my best guess at the moment is to assign either a fixed size or create another layout rule depending on the size of the screen.

Or, one could replace "today" with a calendar icon as shown below. It seems though that this is a false fix as the problem resides in the CSS layout.

For the picture above, we can see that the font size is constant but the height depends on the viewport width: Explanation of CSS units

What are your thoughts? What do you think is worth trying?

[niccokunzmann]

So if we have had a checkbox to convert monday to mo, tuesday to tu or tue, and so on - @vmario89

One could have an option to either always shorten them, shorten them when the width of the columns gets too small or never shorten them. I wonder if that is an option is actually useful or if it would be nice to always shorten them if they do not fit. What are your thoughts?

[vmario89]

i think in the real world case it might always make sense to shorten the days to 2 or 3 characters when space is not enough or its the mobile version

[niccokunzmann]

@vmario89 Would you be willing to create a new issue for this one? This issue is getting longer (and stuck somewhere in the issue list) and it would be nice to keep an overview.

Also, I am unsure of when this issue can actually be closed. It does not have clear closing criteria at the moment. "responsive" can be understood as all mobile issues are resolved - which is not the same. E.g.: @davidemastruzzo could you say what needs doing so the calendar is responsive? To all: What do you need doing, so it is "responsive" - could you open issues for this or comment?

[tmoerschell]

Sorry for not responding too quickly here.

About header space. I'm not sure I understood you well, but in my opinion, it would be totally fine to change the header size relative to the viewport width. I'd think the header height should be defined by the content, and thus the size of the text, rather than be constant.

Adaptive text dimensions could also be used in the calendar itself (when screen dimesions are getting too small) for the events for example, I tried setting the font size in dhx_cal_event_line and dhx_cal_event_clear to 3vw and it works OK.

Shortening the day names as soon as the space becomes too small is certainly sensible as well, and I don't think it's necessary to have an option for that.

For me this issue can be closed, as the main usability problems have been solved. The rest is more small improvements than fixing an issue. Thank you again!

[niccokunzmann]

Adaptive text dimensions could also be used in the calendar itself (when screen dimesions are getting too small) for the events for example, I tried setting the font size in dhx_cal_event_line and dhx_cal_event_clear to 3vw and it works OK.

This sounds alright: Would you be willing to create a Pull Request?

Shortening the day names as soon as the space becomes too small is certainly sensible as well, and I don't think it's necessary to have an option for that.

Yes, I created #280.

For me this issue can be closed, as the main usability problems have been solved. The rest is more small improvements than fixing an issue. Thank you again!

Great! I will wait for more feedback. Also, please test it out and create issues, possibly with code, or Pull Requests for all the small things you find :) Thanks!

[tmoerschell]

This sounds alright: Would you be willing to create a Pull Request?

I couldn't find how to only make that happen when the layout becomes small. I had only experienced with it in my browser.

If it's only about having my name as the commit author, it's not important. If it's about saving you some work, please say so and I will look further into it.

[niccokunzmann]

@tmoerschell, yes, a PR would save me work and make sure that we are in communication about that issue and not me guessing what the problem is.

One would solve CSS only applied on big/small screens with media queries.

Example from https://www.w3schools.com/css/css3_mediaqueries.asp:

@media screen and (max-width: 480px) {
    /* CSS when the screen is below 481px */
}

[niccokunzmann]

The calendar has a basic responsive design. The CI server also tests all features on a responsive screen. If you find that there is any problem with the responsive layout, please report another issue.

If you would like to discuss responsiveness of the calendar in general, please open a discussion.

Thank you all for your input on this issue and the cooperation! I am closing this now as basic responsiveness has been established and I like to have clear closing criteria for issues.

[niccokunzmann]

Thank you @tmoerschell for contributing to close this issue! ⭐

The rewards from this issue, totalling $30, has been shared with you.

What now?

1. Create a Polar account
2. See incoming rewards & setup Stripe to receive them
3. Get payouts as backers finalize their payments

If you already have a Polar account setup, you don't need to do anything.

[tmoerschell]

As my contribution was very small, and you had to help me bring it together, I do not think I need to receive anything. Please feel free to keep it all for you, since you did the vast majority of the work.