Jeff VIP
Total posts: 745
11 Sep 2013 21:33

Hi,

the calendar view isn't quite mobile friendly. You need too many clicks to actually see an event and the toggle functionality is unusable on a small screen.

I would like to see a new template where you can browse through years, months, weeks, etc but only shows the results in a (selectable) list view.

So on top you see the calendar navigation with a list beneath it.

And maybe a months, or days toolbar just like the alpha toolbar in the list view.

Jan | Feb | Mar | Jun | Jul | Aug | Sep | Nov | Dec

and

Mon | Tue | Wen | Thu | Fri | Sat | Sun

The count numbers should of course be included next to the months and days

What do you think?

Best regards,

Jeff

Last Modified: 23 Mar 2021


Sergey
Total posts: 13,744
12 Sep 2013 01:53

Not clear. Small drawing would help.


pepperstreet VIP
Total posts: 3,832
12 Sep 2013 12:31

I was about to post the same idea and some issues with screenshots. Everything on my other machine... had to make new ones ;-)

@Sergey You might watch the layout behavior on smaller screen-sizes here.

There are many issues with the display on smaller screens.

Table header:

I would suggest to exchange the table. The two button groups and centered headline is not responsive at all. Please, use bootstrap classes and DIVs, at least floating elements etc.

Labels/Names for days and months:

I am aware of the problematic table design for the actual content. 7 days in a row are hard to display. The only solution I see, is shortening the names. Like "Jeff" already mentioned it: 3 characters have a good readability and are well known. Could be even shorter with only 1 leading character. J = Januar, M = Monday etc.

3 characters are a good compromise. So, it could be used for all screen sizes... or use bootstrap responsive utility classes for variants: i.e. .hidden-phone, hidden-desktop etc.

Overflow and automatic "..."

AFAIK, there is text-overflow: ellipsis; used. Not sure about browser compatibility, but readability is very bad in this particular use case. Maybe working for longer text, but strange in a calendar. "..." do get the same style "bold", which makes them very dominant.

Years display mode:

The year display is messed-up if it gets 100% width. Seems to be a "pull-right" class issue.

Thanks for listening.


Jeff VIP
Total posts: 745
12 Sep 2013 22:04

@Sergey I see where your inspiration comes from: http://bootstrap-calendar.azurewebsites.net/

It seems the same responsive issues appear there.

The first thing that needs to be done is what pepperstreet already suggested, is to optimize some markup.

An example of proper responsive behaviour:

http://tympanus.net/Development/Calendario/

Full screen

Small screen

**

Form vs Function**

I'm a big fan of slick web design and sophisticated interaction, but not if it sacrifices functionality and clarity. A first glance at a calendar should give you instant information which event occurs on what date.

Take a look at Cobalts month view:

As you can see, the only information here is that "something" happens on certain dates.

There are no tooltips when you hover on a square. They are clickable however, although you don't have a clue to what it is linked to until you actually click it.

There is an issue with the expand button also

Not only is it very small (on mobile devices) to click on it, but it looses functionality ones you have clicked on it. Clicking on the red square area doesn't contract the flyout box. You have to click on the day box above to make it contract. Why not clicking on the day box to make it expand?

IMHO the expand-contract thing is confusing and is overkill.

The only Joomla calendar application I have been using successfully in several intranets and websites is Jevents (after completely restyling it ofcourse :D) Because it creates no puzzle for the end user.

Actually, I am more interested in calendar functionality than an actual calendar view.

Being able to create queries based on dates is what brings power to an application.

I expect to see something like this in the urls:

http://www.jevents.net/demo/all-events/eventsbyweek/2013/9/7/-

Where if you alter the year in the url you could actually see a new list based on that url.

It seems the current calendar is js driven, so I am not able to create a list by url.

To get back on my first request

I need a calendar template with a list view only. Currently you can toggle list view, but that only shows the latest events. There is no correlation between what you select on the calendar and the list.

So:

If I select year 2013, I see a list view of records of 2013 grouped by month

If I select March 2013, I see a list view of records of March grouped by week

etc.

Jevents example

What are your thoughts on this?


Sergey
Total posts: 13,744
15 Sep 2013 02:39

There are no tooltips when you hover on a square.

that wasa bug in calendar.js which was fixed and will be there o next update.

There are no tooltips when you hover on a square.

There is an issue with the expand button also

We will add single click events list expand on empty space in a cell. Already planned feature.

@Maik, in general very valuable input. I appreciate it as usual I appreciate your strong and clear view on UI related things. I will not comment everything but I learned a lot here. I will try to improve calendar.js responsiveness and small view.


Sergey
Total posts: 13,744
16 Sep 2013 07:52

You are welcome. Actually, all this was really quick and dirty ;-) As always, lack of spare time. Otherwise my post would be more pretty and detailed.

I believe somehow you need only outline and I understand whole your idea behind. So even outlining the issues is very good.

You are welcome. Actually, all this was really quick and dirty ;-) As always, lack of spare time. Otherwise my post would be more pretty and detailed.

but didn't want to sound to picky and rude...

Comone, we know each other too long. I absolutely understand your tone that this has not meant any attempt to insult anybody.


Guest
02 Feb 2021 06:20

Mint support is a website that is for the dealing of support forum in the advancement of connectivity with the suitable touch. The new calendar template has the property of https://www.australianwritings.com/ with the list of proper enlistment with the double standard estate in emergency for cobalt 8.


Guest
10 Mar 2021 20:51

I like this variant more than the original. But it also has some minuses. You have to hire a professional programmer, he can fix everything. Look at the resumes. www.topresumewritingservices.com is the best service to get a resume review. I got myperfectresume here


Guest
23 Mar 2021 11:01

If you want buy template with discount also crack theme and simple then you use vistaprint promo code.

Replay Topic
Uploading
Click here to upload and insert file from you hard drive: (png, gif, jpg, jpeg, zip, txt, rar)
Powered by Cobalt