Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
I need the calendar to be flexible and responsive. It need to work for all thinkable screen sizes. Today it looks really odd as the buttons are floating over the year and if some dates are inside the calendar it may overflows the screen size and other stuff. This has major usability issues, see below:
I'm myself currently not sure how to solve this with day thead's, but maybe some brainstorming can help finding the way to go.
Comment | File | Size | Author |
---|---|---|---|
#38 | Screen Shot 2015-05-19 at 7.25.08 PM.png | 174.54 KB | jcam88 |
Comments
Comment #1
KarenS CreditAttribution: KarenS commentedI have some responsive css that I haven't had time to finish up.
The idea I started working with was adding the following css, which should make the calendar collapse down into a list in a small window:
I haven't had time to get back to this idea.
Comment #2
stephen Piscura CreditAttribution: stephen Piscura commentedForgive me as this may be obvious, but is this something that should exist within the module itself or at the theme level?
Comment #3
hass CreditAttribution: hass commentedWell... That's not so easy to answer. On one side it's theme level, but on the other side if the module code does not work it can be overridden. We are on the way to make all core themes responsible with D8. Therefore i think it should be part of module code. The yaml theme as example is flexible and responsive for very many years, but today it becomes more and more standard. The max-width may be discussable...
I hope i can try karens example code by the end of this week.
Comment #4
hass CreditAttribution: hass commented#1 looks very useful to me. I wondered first why you remove all empty days, but that's perfect on mobiles with limited display space. I hope to find some time soon to solve the button and year display issues. I just think the (max-width: 959px) may be too large value, but it works nevertheless.
Thank you very much for sharing this!
Comment #5
hass CreditAttribution: hass commentedI'm sharing my latest version now. It aligns the centered month name to the left and also adds the full day name to the column. It only becomes a problem after the CSS is compressed as the CSS compressor in core has a followup bug #1686178: CSS compressor destroys valid css "content" attribute values here as it removes the space in
", "
. I've added a Unicode workaround below.Comment #6
acranius CreditAttribution: acranius commentedThanks for sharing!
Works great, but if there are multi-day events in your calendar, the day (start date) is not displayed.
I'm trying to figure out how to solve that.
Comment #7
acranius CreditAttribution: acranius commentedOne possible solution is to set the "Multi-day style" option in the calendar settings to "Display multi-day item as a single column".
Contra:
1. Obviously, you can't display them as a multiple column row.
2. When the calendar is displayed as a list, there are three lines for a three day event, like:
It would be better if you had just one line, like:
But that's no CSS problem.
Comment #8
jonjonz CreditAttribution: jonjonz commentedBump!
Any further developments regarding the responsive design?
:-)
Comment #9
tmsimont CreditAttribution: tmsimont commentedI've been neck deep in calendar code lately and was wondering the same about responsive design. I think a big problem with RD and calendar is the fact that calendar depends on tables. Tables are hard to bend into new shapes with CSS. I think you'd need to use a new type of div-based style plugin so you could really play with the appearance.
I recently built a table-like div view that collapses on mobile devices:
http://www.kenyaschoolreport.com/schools/find-school/results?s=location&...
I think you'd need something similar for calendar. It's a standard table-like grid in large windows, but it collapses to a list format on small devices.
I will probably start working on this in the near future as I need a responsive calendar. I've been talking to myself on this issue #1908018: Break up large functions of calendar_plugin_style into smaller functions for a while, which could be a first step in breaking down the calendar plugin to something that could be extended into new style plugins.
Comment #10
stephen Piscura CreditAttribution: stephen Piscura commentedHere's a great example of a responsive calendar:
http://www.atlantaballet.com/calendar/
Albeit a really different approach in its markup.
Comment #11
stephen Piscura CreditAttribution: stephen Piscura commentedAlso, an example using Drupal Calendar can be found here:
http://www.stlouissabres.com/calendar/month/2012-10
Referenced from: http://groups.drupal.org/node/266223
Comment #12
tmsimont CreditAttribution: tmsimont commentedthanks stephen good stuff. do you know if atlanta ballet is using some kind of open source plugin?
Comment #13
stephen Piscura CreditAttribution: stephen Piscura commentedI'm really not sure. Also, i was trying to discover who developed the site, but with no luck.
I can only share what i see in the source:
http://www.atlantaballet.com/css/responsive-tables.css
http://www.atlantaballet.com/css/jqtransform.css
http://www.atlantaballet.com/css/flexslider.css
So the responsive-table stuff comes from Foundation. I don't know, maybe that's a starting point?
Comment #14
Geijutsuka CreditAttribution: Geijutsuka commentedRegarding the Atlanta Ballet calendar, the creator (Search Discovery) posted about it here:
http://www.searchdiscovery.com/blog/tutorial-creating-a-responsive-calendar
Comment #15
stephen Piscura CreditAttribution: stephen Piscura commentedCheers Geijutsuka! Thanks for sharing that link!
Comment #16
joserey CreditAttribution: joserey commentedThanks too.
It got me interested.
Comment #17
kiwad CreditAttribution: kiwad commentedIntegrating the calendar with Calendario from Tympanus would give a great flexible solution ... I guess that would need to be made as a new module or a addon for this module... or at least it could be a good starting point for someone who wants to get a nice flexible/responsive calendar
http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-pl...
Comment #18
brandy.brown CreditAttribution: brandy.brown commentedThe last posted code is awesome! However, using the code with or without the unicode hack both produced the same gray comma. My CSS files are not compressed via config > performance FYI.
Comment #19
rmanola CreditAttribution: rmanola commentedHow do I use this code in order to make the calendar responsive? I have copied it and pasted at the end of "calendar.css" but it didn't work.
Comment #20
stephen Piscura CreditAttribution: stephen Piscura commentedBethel Church in Redding, CA recently launched a new, Drupal-based site, including a responsive, very attractive calendar, which can be viewed here:
http://www.bethelredding.com/calendar
The theme is based on Zen. You can read a little more about it here:
https://groups.drupal.org/node/299938
The author, toddtomlinson, plans to release his solution as a contrib module.
Comment #21
caschbre CreditAttribution: caschbre commentedFYI... there is a drop-in (sandbox) module that alters the output of calendar so that it can be responsive without css hacking an html table.
https://drupal.org/node/2098587
https://drupal.org/sandbox/iconify/2087897
Comment #22
hass CreditAttribution: hass commentedCan you create a patch for calendar module, please. Do not like to install extra modules.
Comment #23
caschbre CreditAttribution: caschbre commented@hass... it's not my sandbox module. It would make sense to merge it into Calendar. Reach out to the two module maintainers and see what they say.
Comment #24
junedkazi CreditAttribution: junedkazi commented@hass I do not come across the compression issue on my site. I am running with jquery update jquery version 1.7.1. All js and css files have been aggregated.
Comment #25
kingfisher64 CreditAttribution: kingfisher64 commented@caschbre - thanks for the post. The module does only display the start date though not end date which is a bit of an issue but there's a work around and discussion on this in the 1 open issue.
Comment #26
QKWS CreditAttribution: QKWS commentedHi @hass
Where can I add the code to make my calendar responsive?
Comment #27
rahullamkhade CreditAttribution: rahullamkhade commentedThanks caschbre.
Comment #28
webservant316 CreditAttribution: webservant316 commented#11 worked for me
Comment #29
hwasem CreditAttribution: hwasem commentedI was able to complete a variation on #11 and add in a nicely-styled date for every day of the month. This uses the Month calendar view. It may not be a strict separation of content and styling, but it works much like the calendars referenced in #13 and 20. And it is much more simple than rewriting an unordered list view. No additional modules needed.
Basically, I rewrote the cell containing each day's data to add a data-label attribute to the td element. I did this with a custom calendar-month-col.tpl.php file. I put the new tpl.php file in my theme's sites/all/theme/my-theme/templates files. Here is the contents of the file:
Then, I restyled the table to behave like a list from http://css-tricks.com/responsive-data-tables. I added css in my theme's responsive styles sheet for each breakpoint (320px, 480px, 768px). Another key point is grabbing the date from the data-label attribute (referenced in this comment http://css-tricks.com/responsive-data-tables/#comment-91835). This bit of CSS does that:
td:before { content: attr(data-label); }
Here is all of my css for the calendar styling:
I'm so thankful I found that template file! It has been a long week trying to find this solution.
Heidi
Comment #30
stephen Piscura CreditAttribution: stephen Piscura commentedHey there hwasem,
Many thanks for your detailed post. I'll be taking a crack at this in the next few days and i'll followup with my own experience. I so appreciate the work that you and others have put into trying to crack this nut, since it's kind of a big deal.
Comment #31
rwilson0429 CreditAttribution: rwilson0429 commentedYes, thanks hwasem for the great details. I tried your method in #29. Without putting the css code in a media query, it changed the normal table/grid display of the calendar even when viewing from a wide screen. I didn't want that. So, I wrapped your css code in a media query:
And it seem to work fine. "Grabbing the date from the data-label attribute" makes for a better user experience and makes this a better solution for me than using the css in #5.
Comment #32
hwasem CreditAttribution: hwasem commentedGood to hear it worked for you both. Yes, you will need to put the code above in media queries for each breakpoint you want to display in a list. I can't wait until our next dev cycle to release this to our mobile users. It is such an improvement on small devices.
Comment #33
rwilson0429 CreditAttribution: rwilson0429 commentedThanks to hwasem, the above posts (#29) does a great job at making the Calendar's Month View responsive. How can the calendar's week view and Day view be made responsive as well?
Comment #34
hwasem CreditAttribution: hwasem commented@rwilson, I'm not sure if the same approach would work. I only use the month calendar and don't have week or day experience.
There is some metadata in the day data that you may be able to use in the same fashion as the month example I gave. I'd say look around at sites with calendars that are responsive to see how you want it to look. Then try to use these tips to get it to look that way.
Sorry I can't be of more help.
Comment #35
rwilson0429 CreditAttribution: rwilson0429 commentedThanks for the insight hwasem. I'll see what I can come up with.
Comment #36
kingfisher64 CreditAttribution: kingfisher64 commented@hwasem - thank you very much for #29, truly superb effort.
Just to make it slightly easier for someone coming here and not having to read through quite a few posts to get a responsive calendar up and running quickly.
Many thanks again hwasem
Comment #37
hwasem CreditAttribution: hwasem commentedYou are very welcome, kingfisher64! I'm so glad people are able to use it, too.
The code is now in production in case anyone wants to see it in action. Go to this page, http://www.midcolumbialibraries.org/calendar, and adjust your window to 768px wide or smaller. It will show our monthly calendar using the code in #29.
Comment #38
jcam88 CreditAttribution: jcam88 commentedI have tried #29. My header does not display, any ideas? Using Date Version: 7.x-2.9-rc1+1-dev and Calendar Version: 7.x-3.5
Comment #39
rothatboat CreditAttribution: rothatboat commentedDid anyone ever successfully implement #17 - the Calendario plug-in over the Calendar module? Thanks!
Comment #40
hwasem CreditAttribution: hwasem commented@jcam88, I'm no longer at that company, so I can't say what date version they are using for sure, but I'm pretty sure it is not dev.
I would suggest checking to make sure the template file is being picked up from your theme's sites/all/theme/my-theme/templates directory and that you cleared the cache? The data-label is not showing up in your html screen shot. The css looks good once the data-label attribute is showing up.
@rothatboat, I wasn't ever able to get that to work...hence why I finally ended up with #29.
Comment #41
lenoz CreditAttribution: lenoz commentedIt's important to note that the code in #29 is for the month view only.
@hwasem does indeed mention this but it's important to be clear since the thread's title does not restrict to one view, and also the code in #29 will mess up all other views.
Tweaking #29 code to prevent messing up other views
It's not enough to change bare
.calendar-calendar
selectors to.calendar-calendar .month-view
since this also matches the months displayed in the year view. I found the easiest way to fix this was just take a copy of the calendar-month.tpl.php template and change the opening output line from:<div class="calendar-calendar"><div class="month-view">
to:
<div class="calendar-calendar calendar-from-<?php print $display_type; ?>"><div class="month-view">
This means we now have a
calendar-from-month
class we can target in our CSS that is not used by the monthly displays in the year view.My updated version of #29 code using this new selector is below... but first, some caveats of other changes it includes:
* I do not want past dates hidden (as they were in #29).
* I would instead like empty dates (with no events on them) to be hidden.
* Fixed distrubution of padding for multiple events in any one date's block.
* Changed background colours of date headers and reduced padding a bit.
Here's the code:
(from a personal point of view, I haven't finished tweaking with this yet (e.g. some redundant declarations in there) but it does the job for now)
A responsive improvement for the year display
In calendar-year.tpl.php add the class
year-month-view
to all the month-holdingtd
s, giving you this:The following CSS is then all you should require to stack the months in the year view so that you have one month per row at your responsive screen size rather than three per row:
Hope this is of some help! I may look into responsive-friendly views for day and week, and if I do I'll add these to the thread.
Comment #42
pslcbs CreditAttribution: pslcbs commentedThank you!! @hwasem (#29) @kingfisher64 (#36) and @lenoz (#41) for sharing your ideas.
It works like a charm.
But I needed to translate to spanish the month view date header using the Drual API function format_date() as explained here
I changed this:
$responsive_date = (isset($item['date'])) ? date("l, F j, Y", strtotime($item['date'])) : '';
by this:
$responsive_date = (isset($item['date'])) ? format_date(strtotime($item['date']), 'custom','l, j F Y', 'es') : '';
or this for multilanguage:
$responsive_date = (isset($item['date'])) ? format_date(strtotime($item['date']), 'custom','l, j F Y', $language) : '';
Thanks!
Comment #43
krug CreditAttribution: krug commentedTnx!! @hwasem (#29) @kingfisher64 (#36) @lenoz (#41) @pslcbs (#42)
Multilanguage option works for me. Without $language
$responsive_date = (isset($item['date'])) ? format_date(strtotime($item['date']), 'custom','l, j F Y') : '';
with $language error:
Notice: Undefined variable: language in include() (line 15 of /home2/radionic/public_html/toz/sites/all/themes/jollyany/templates/calendar-month-col.tpl.php).
Comment #44
RichardBeacham CreditAttribution: RichardBeacham commentedImplemented this just fine- thanks for advice. Stuck with multi-day events though. Has anyone ever had any luck with these?
Comment #45
alexberendei CreditAttribution: alexberendei commentedVery nice work on #29 but on multi-day events it duplicate td's and mess up the order from what I've tested.
Comment #46
Tabestan CreditAttribution: Tabestan commentedHas anyone successfully implemented a responsive week view?
I'm currently struggling with this, I want the table to collapse to a list on mobile.
Comment #47
Neslee Canil Pinto