Calendar Using Classes of "DateTime" instead of Raw Format

I have no idea how easy it would be for you to translate the raw format of DateTime into separate classes for Day Month Year & Time and PAST & FUTURE, so that over-ambitious designers (like me) can really tinker the hell out of it for better viewing pleasure...?

In my opinion a "calendar" should really help users to orient and find things fast. And the dates are too subtle as they are now... So let me show you an example which I simulated in Photoshop rather than the browser (since I can not grab the parts from DateTime individually), but the following is entirely doable with CSS – IF there are Classes for each part...:

How an individual event looks now:
event_date_improvement_event_now.jpg
How it could look:
event_date_improvement_event_improved.jpg

How Featured events look now:
event_date_improvement_featured_event_now.jpg

How it could look like:
event_date_improvement_featured_event_improved.jpg


NOTEWORTHY: With a "past" class we could also influence how past events can look like...
 
Upvote 0
So much this. Those icons are something I was trying to do but my design skills suck. :)

To be clear, what kind of classes do you need for this? I can also expose individual increments of time for the event to the $event variable too, if needed (day, month, year, hour, min, etc).
 
I can help you with that. I can make a CSS design proposal for the default theme that you can use with the add-on if you can do the variables and implement them into the template.

You are right. Variables are much more flexible. So anyone with template modding skills can give them classes as they like... $event.day.start, $event.day.end, $event.month.start, $event.month.end ...etc etc

Let's say split the variables into
  • Day Start
  • Day End
  • Month Start
  • Month End
  • Year Start
  • Year End
  • Hours Start
  • Hours End
  • Minutes Start
  • Minutes End
Also if something is in the PAST, it should add a class called like "pastEvent" or so... so we can have past events displayed differently.

Whereas it is important that it keeps the language date/time format which the user has selected.
 
Alright, next version you can access increments of time like this $event.start.year, $event.start.month, etc. Most of the time, you'll get integers (2018, 01, etc) but you can also access some phrases such as $event.start.monthShort or $event.start.monthFull for Jan or January, respectively.
 
Back
Top