New calendar template: show results in list only

Not clear. Small drawing would help.

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.

@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?

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.

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.

Looks like Jeff is encountering a challenge with the display format in Cobalt 8's new calendar template. Hopefully, the community can offer some insights or solutions to help him out! Effective Product Landing Page